[CSS]次のプロジェクトで使える!スタイルシートの極上テクニックのまとめ
Post on:2014年4月25日
CSSの進化が止まりません。
ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-01.png)
最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。
SVGを使った版はこちら、Pinked Border
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-02.png)
CSSのみでメモ帳のようなエレメントを作りだします。チュートリアルのページのようにコードをノート風に記すのもいいですね。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-03.png)
画像を使ってさまざまな形状にマスクするCSSとSVGのテクニック。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-04.png)
CSSのみで文字をスタイルし、ホバーでネオンのように輝かせます。実際には↑のキャプチャよりアニメーションでもっと輝いています。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-05.png)
Twitter, Facebookなどのソーシャルメディアのボタンを設置する時に悩むのがそのデザイン。そんな問題を解決するソーシャルボタンを隠して配置するテクニックです。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-06.png)
ページ上部の打ち出し画像に、どんな表示サイズでもアスペクト比を維持したまま最も大きなサイズで画像を表示させるテクニック。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-07.png)
フッタやページの下部に面白いインタラクションを加えたアイデア。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-08.png)
レスポンシブ用のナビゲーションをさまざまなエフェクトで表示します。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-09.png)
パネルの片隅をカットしてスタイルします。単なる矩形のパネルがおしゃれになりますね。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-10.png)
背景画像をブラーにして、くきっりした画像やテキストを重ねるGoogle+のヘッダのようなエフェクトをCSSで実装します。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-11.png)
テキストにパルス間隔の揺れるアニメーションを与えます。
![デモのキャプチャ](/wp-content/uploads-201402/2014042503-12.png)
レスポンシブ用のfont-size指定のアイデア。
ルートはpx指定、コンポーネントごとにremで定義し、各エレメントにはemで適用。レスポンシブ用の各サイズごとにはルートで振り分けるため管理も楽。
CSS
簡単に書くとこんな感じに。
/* ルート */ html { font-size: 17px; } @media (max-width: 900px) { html { font-size: 15px; } } /* コンポーネント */ .header { font-size: 1.5rem; } .footer { font-size: 0.75rem; } .sidebar { font-size: 0.85rem; } /* 各エレメント */ h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 2em; }
sponsors