[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ
Post on:2014年4月25日
sponsors
CSSの進化が止まりません。
ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。
最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。
SVGを使った版はこちら、Pinked Border
CSSのみでメモ帳のようなエレメントを作りだします。チュートリアルのページのようにコードをノート風に記すのもいいですね。
画像を使ってさまざまな形状にマスクするCSSとSVGのテクニック。
CSSのみで文字をスタイルし、ホバーでネオンのように輝かせます。実際には↑のキャプチャよりアニメーションでもっと輝いています。
Twitter, Facebookなどのソーシャルメディアのボタンを設置する時に悩むのがそのデザイン。そんな問題を解決するソーシャルボタンを隠して配置するテクニックです。
ページ上部の打ち出し画像に、どんな表示サイズでもアスペクト比を維持したまま最も大きなサイズで画像を表示させるテクニック。
フッタやページの下部に面白いインタラクションを加えたアイデア。
レスポンシブ用のナビゲーションをさまざまなエフェクトで表示します。
パネルの片隅をカットしてスタイルします。単なる矩形のパネルがおしゃれになりますね。
背景画像をブラーにして、くきっりした画像やテキストを重ねるGoogle+のヘッダのようなエフェクトをCSSで実装します。
テキストにパルス間隔の揺れるアニメーションを与えます。
レスポンシブ用の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
