打ち込むより簡単！保存しておくと便利なCSSスニペット18選

酒井涼

2017年2月8日

632

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 著者詳細はこちら

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。
スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。

とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。

今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。
スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。

保存しておくと便利なCSSスニペット

1. CSSリセット

さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させる「CSSリセット」と呼ばれるテクニックがあります。
CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とmargin・paddingの測定方法を定義するborder-boxに関するプロパティを挿入しています。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
　　margin: 0;
　　padding: 0;
　　border: 0;
　　font-size: 100%;
　　font: inherit;
　　vertical-align: baseline;
　　outline: none;
　　-webkit-box-sizing: border-box;
　　-moz-box-sizing: border-box;
　　box-sizing: border-box;
}

html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
 
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
 
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

2. 半透明化 (クロスブラウザ対応)

半透明化に関するプロパティとしてopacityがありますが、残念ながらこのプロパティはマイナーアップデートを繰り返しており、旧版のIEブラウザでは機能しません。そこで、filterで半透明化を行えるようにクロスブラウザ対応のコードを用意しました。

.transparent {
　　filter: alpha(opacity=50);
　　-khtml-opacity: 0.5;
　　-moz-opacity: 0.5;
　　opacity: 0.5;
}

3. blockquoteテンプレート

ブログサイトなどを運営する場合には引用部分にblockquoteを使う場合が多いのではないでしょうか。
しかしながら、毎回blockquoteのスタイルを設定するのは面倒です。
そこで、再利用可能なblockquoteのスニペットをご用意しました。

blockquote {
　　background: #f9f9f9;
　　border-left: 10px solid #ccc;
　　margin: 1.5em 10px;
　　padding: .5em 10px;
　　quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
　　color: #ccc;
　　content: open-quote;
　　font-size: 4em;
　　line-height: .1em;
　　margin-right: .25em;
　　vertical-align: -.4em;
}
blockquote p {
　　display: inline;
}

4. メディアクエリ

レスポンシブ対応のホームページを作る際には、メディアクエリを設定します。
ところが、毎回デバイスのサイズを入力するのは大変です。

そこで、デバイスサイズを差し込んだスニペットを用意しました。
必要のないデバイスサイズのところは削除してご利用ください。

// スマートフォン (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
　　// Style
}
 
// スマートフォン (landscape)
@media only screen and (min-width : 321px) {
　　// Style
}
 
// スマートフォン (portrait)
@media only screen and (max-width : 320px) {
　　// Style
}
 
// iPad (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
　　// Style
}
 
// iPad (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
　　// Style
}
 
// iPad (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
　　// Style
}

// デスクトップ
@media only screen and (min-width : 1224px) {
　　// Style
}
 
// 大きめのスクリーン
@media only screen and (min-width : 1824px) {
　　// Style
}

// iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
　　// Style
}

5. テキストハイライト

モダンブラウザの中には、テキストを反転させた際のハイライト色を変更できるものがあります。
デフォルトではライトブルーに設定されていますが、ホームページのテーマカラーに合わせてみてもいいでしょう。

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

6. H1タグのロゴ化

ほとんどのホームページでは、H1タグはテキストというよりもロゴ画像で囲んでいることのほうが多いのではないでしょうか。
一方、SEO対策としてプレーンなテキストを入れておきつつ、テキストを非表示にしてロゴ画像だけを表示するテクニックがあります。
それをスニペット化すると、以下のようになります。

h1 {
　　text-indent: -9999px;
　　margin: 0 auto;
　　width: 320px;
　　height: 85px;
　　background: transparent url("logo.jpg") no-repeat scroll;
}

7. ポラロイドカメラ風のボーダーを画像につける

画像にポラロイドカメラ風のボーダーを適用してみましょう。
ポイントは、box-widthの下側ラインを厚くして、box-shadowで影をつけているところです。

img.polaroid {
　　background:#000;
　　border:solid #fff;
　　border-width:6px 6px 20px 6px;
　　box-shadow:1px 1px 5px #333;
　　-webkit-box-shadow:1px 1px 5px #333;
　　-moz-box-shadow:1px 1px 5px #333;
　　height:200px;
　　width:200px;
}

8. フルスクリーン背景

背景にフルスクリーンで画像を敷き詰めることもよくあるかと思います。
ウィンドウサイズが変わっても背景の大きさを自動的に変えるようにbackground-size: cover;を指定していますが、未対応ブラウザのことも考えてベンダープレフィックスをつけています。

html { 
　　background: url('images/bg.jpg') no-repeat center center fixed; 
　　-webkit-background-size: cover;
　　-moz-background-size: cover;
　　-o-background-size: cover;
　　background-size: cover;
}

9. 垂直中央配置

margin: 0 auto;を使うことでページの水平位置に中央配置するテクニックは簡単なので頻繁に使われます。
しかし、水平ではなく垂直位置に中央配置するのは少しだけ面倒で、特にスクロールバーが出ていたり他の要素との位置関係を考慮したりすると、どうすればいいかわからなくなることがあります。
そういう場合には、下記のスニペットを使ってみましょう。JavaScriptなどを使うことなく垂直位置に中央配置できます。

.vertically-centered {
　　min-height: 6.5em;
　　display: table-cell;
　　vertical-align: middle;
}

10. テーブルのゼブラストライプ化

テーブルを表示するときに、もっと見やすくデザインしたいと思っているWebデザイナーは多いでしょう。
特に表の行を交互に色分けする「ゼブラストライプ化」は頻繁に使う可能性があるので、スニペットとして保存しておきましょう。

tbody tr:nth-child(odd) {
　　background-color: #ddd;
}

11. 段落のドロップキャップ化

海外の新聞や本などでよく見る、段落の先頭の文字だけが大きく印刷されているドロップキャップを、ブログサイトでも表示したいと思ったことはありませんか。
「:first-letter」を使うことで段落の先頭の文字のみにスタイルを適用することができるので、ドロップキャップ化するために以下のコードを利用します。

p:first-letter{
　　display: block;
　　margin: 5px 0 0 5px;
　　float: left;
　　color: #ff3366;
　　font-size: 5.4em;
　　font-family: Georgia, Times New Roman, serif;
}

12. センターレイアウト

ほとんどのWebデザイナーが最初に行うことは、おそらくコンテンツを画面の中央に配置することでしょう。
今更紹介するまでもありませんが、コンテンツの中央配置もスニペットとして保存して、いつでも使えるようにしておきましょう。

#wrap {
　　width: 800px;
　　margin: 0 auto;
}

13. CSS3カラム

最近ではグリッドレイアウトを実装するためにflexboxを使う場面も多いですが、もっと簡単なのはCSS3のcolumnを使ってみることです。
column-countを指定するだけで、要素を横並びに表示することができるからです。
そういうわけで、以下のコードをテンプレート化しておきます。

#columns-3 {
　　text-align: justify;
　　-moz-column-count: 3;
　　-moz-column-gap: 12px;
　　-moz-column-rule: 1px solid #c4c8cc;
　　-webkit-column-count: 3;
　　-webkit-column-gap: 12px;
　　-webkit-column-rule: 1px solid #c4c8cc;
}

14. 固定フッター

シンプルに固定フッターを表示させるためのコードも用意してみました。
フッターにはSNS拡散用のリンクを置いたり、著作権を表示したりすることが多いと思いますが、ページ下部までスクロールされないと見られないというデメリットがあります。
固定しておくことでそうしたデメリットを緩和することができます(もちろん内容を盛り込みすぎるのはよくありませんが…)。

#footer {
　　position: fixed;
　　left: 0px;
　　bottom: 0px;
　　height: 30px;
　　width: 100%;
　　background: #444;
}

// IE 6
* html #footer {
　　position: absolute;
　　top: expression((0-(footer.offsetHeight)+(　　document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

15. min-height (クロスブラウザ対応)

min-heightはあらゆる場面で使いますが、旧型のIEとFirefoxではうまく表示されないこともあります。
クロスブラウザ対応するために、以下のコードを使ってみましょう。

#content {
　　min-height: 300px;
　　height: auto !important;
　　height: 550px;
}

16. リストの連続ナンバリング

OLタグを使ってリストをナンバリングするときに、一旦別の内容を挿入して、そのあとに前の番号に続いてナンバリングを行うテクニックをご紹介します。
原理としては、ナンバリングの数字部分とリスト部分を切り離して、数字部分をひとつずつカウントさせていきます。

ol.chapters {
　　list-style: none;
　　margin-left: 0;
}

ol.chapters > li:before {
　　content: counter(chapter) ". ";
　　counter-increment: chapter;
　　font-weight: bold;
　　float: left;
　　width: 40px;
}

ol.chapters li {
　　clear: left;
}

ol.start {
　　counter-reset: chapter;
}

ol.continue {
　　counter-reset: chapter 11;
}

17. ツールチップ

最近ではツールチップを使ったホームページはあまり見られなくなりましたが、ツールチップを実装するときにはjQueryのプラグインを使って表示することが多いのではないでしょうか。
ここでは、少々珍しい、CSSを使ったツールチップのスニペットをご紹介します。

a { 
　　border-bottom:1px solid #bbb;
　　color:#666;
　　display:inline-block;
　　position:relative;
　　text-decoration:none;
}
　　a:hover, a:focus {
　　color:#36c;
}
a:active {
　　top:1px; 
}

// ツールチップのスタイル
a[data-tooltip]:after {
　　border-top: 8px solid #222;
　　border-top: 8px solid hsla(0,0%,0%,.85);
　　border-left: 8px solid transparent;
　　border-right: 8px solid transparent;
　　content: "";
　　display: none;
　　height: 0;
　　width: 0;
　　left: 25%;
　　position: absolute;
}
a[data-tooltip]:before {
　　background: #222;
　　background: hsla(0,0%,0%,.85);
　　color: #f6f6f6;
　　content: attr(data-tooltip);
　　display: none;
　　font-family: sans-serif;
　　font-size: 14px;
　　height: 32px;
　　left: 0;
　　line-height: 32px;
　　padding: 0 15px;
　　position: absolute;
　　text-shadow: 0 1px 1px hsla(0,0%,0%,1);
　　white-space: nowrap;
　　-webkit-border-radius: 5px;
　　-moz-border-radius: 5px;
　　-o-border-radius: 5px;
　　border-radius: 5px;
}
a[data-tooltip]:hover:after {
　　display: block;
　　top: -9px;
}
a[data-tooltip]:hover:before {
　　display: block;
　　top: -41px;
}
a[data-tooltip]:active:after {
　　top: -10px;
}
a[data-tooltip]:active:before {
　　top: -42px;
}

18. テキストを選択不可に

モバイルアプリケーションなどをWebサイトベースで製作する場合に、テキストを反転選択させることを禁止にしたい場合があります。
そんなときには、次のスニペットを使ってみましょう。
touch-callout: none;はスマートフォン端末などで長押ししても挙動を抑えるときに使い、user-select: none;は反転選択を禁止します。

body {
　　-webkit-touch-callout: none;
　　-webkit-user-select: none;
　　-khtml-user-select: none;
　　-moz-user-select: none;
　　-ms-user-select: none;
　　user-select: none;
}

まとめ

今回は、毎回打ち込むよりも保存しておいた方が断然使いやすい、便利なCSSスニペットをご紹介しました。
HTMLやJavaScript以上に、CSSのコードは使い回すことが多いでしょうから、スニペットとして保存しておくと便利です。

ちなみに、スニペット管理にはGistBoxやKobitoのようなツールを使うといいでしょう。
できるだけ無駄を排除して、効率のいいコーディングを行なっていきましょう。