今日ではますますCSSがパワフルになり、その可能性が広がっています。この記事では最新のCSSスキルをマスターするためのTipとテクニックをご紹介します。
【ご注意】これからご紹介するテクニックの中には実験的なものも含まれています。実際にご使用の際にはブラウザとの適合性をチェックするようにしてください。
パワフルなCSS3テクニック8選
【1】SVGファイルを背景画像として使う
SVGファイルは最近の全てのブラウザでサポートされているファイル形式です。そのためもうjpgやpngを使い続ける理由はなくなったと言っても過言ではありません。
下は「background-size」を用いて、背景画像のサイズを適正化するCSSコードです。
【2】テーブルのレイアウトを調整する
幅広くサポートされている割にはあまり知られていないのが下記のテーブルの書き出し方法です。こちらを使えばより頑丈で書き出し後が予測可能なテーブルが作れます。
【3】画像の周りにテキストを円状に配置する
「shape-outside」プロパティを使えば幾何学的なテキスト配置が行えるようになります。
このプロパティを使うと下図のようにテキストが配置されます。
【4】Boxに固有に割合を維持する
下記のCSSを使えば、例えばwidthがなんであろうと、子要素は独自の割合(100% / 20% = 5:1)を維持し続けることができます。
【5】リンクホバー時に色を使ったエフェクトをつける
とても簡単にリンクをかっこよく見せることができます。
【6】壊れた画像ファイルとして固有のエラーメッセージを出す
壊れた画像はデザイン上よくないものですが、Webサイトに2～3個は存在することもしばしば。最新のCSSを使えば、訪問者に固有のメッセージを見えることができます。
【7】空なのか/あるのか、でスタイルを使い分ける
CSS3は、「data-*」属性が空なのか入っているかによって、ある要素に異なるスタイルを適合することが簡単にできます。まずは下記のhtmlをご覧ください。
そして次にCSSです。「data-attr」属性が空の時に特定のスタイルを定義します。
【8】コンマで区切ったリストを作る
コンマで区切ったリストとして乱雑なリストを表示します。「:not(:last-child)」を使えば、リストの最後の要素にコンマがつくかどうかを確認できます。
(※本記事は「Advanced CSS tricks and techniques」を翻訳・編集したものです)
おすすめ新着記事
おすすめタグ