意外と盲点!? あまり知られていないけど"知ると便利"なCSSプロパティ19選

「HTML5」と並びよく目にする*「CSS3」*では、従来のCSS(スタイルシート)にはない様々なプロパティが実装されています。

本来であればJavaScriptで実装するような*「アニメーション(animation)」をはじめ、floatを使わなくても段組ができる「フレックスボックス(flexbox)」、文字やボックスに影をつける「シャドウ(shadow)」*など、ダイナミックな動きから複雑な装飾まで、あらゆることが短いコードで実装可能になりました。

しかし、ひとくちに「CSS3」と言っても様々なプロパティがありすぎて、実際蓋を開けてみると普段から使い慣れているプロパティしか実装していない方も多いのではないでしょうか。

そこで今回は、あまり知られていない(かもしれない)けれども、案外便利なCSSプロパティをまとめて19個ご紹介します。

「なるほど！」というものがあれば、実作業でも活用してみてはいかがでしょうか。ぜひご覧ください。
　　

あまり知られていないけれど案外便利なCSSプロパティ19選

CSS(Cascading Style Sheet)は「スタイルシート」とも呼ばれています。
「HTML」が文書構造、「JavaScript」が動的なアクションを担っているのに対し、CSSは見た目・見栄えの部分を担っている言語です。

参考：
CSS【Cascading Style Sheets】｜ferret マーケティング用語辞典

2011年から策定が進んでいる「CSS3」は、従来のCSSと互換性を持ちながらも、現在も便利な仕様を増やし続けています。

ここからは、案外便利なCSSプロパティをABC順にご紹介していきます。
　　

1. align-self

*「align-self」*は「フレックスボックス」に関するプロパティです。

「align(整列させる)」と名前が付いているところからもわかるように、flexアイテムを整列させる役割を担っています。
同様のプロパティに「align-items」がありますが、全ての要素を整列させるのではなく、あるflexアイテムだけを整列させるというのが「align-items」の特徴です。

例えば、「align-items: center;」で全てのflexアイテムを中央揃えさせた場合を考えてみましょう。

デフォルトでは*「align-self: auto;」となっているため、「align-items」で指定した位置に従います。しかし、あるflexアイテムに「align-self: flex-start;」と指定すると、垂直方向に先頭の位置にやってきます。同様に「align-self: flex-end;」*と指定すれば、そのflexアイテムだけが下に下がります。

続いて同じように、「align-items: flex-start;」を指定して*「align-self: center;」*を指定することもできます。

「align-items: center;」で中央揃えさせながら、*「align-self: stretch;」*を指定することもできます。

この場合は、指定した要素だけがflexコンテナ要素の上下いっぱいに高さを揃えることになります。
「:hover」でマウスカーソルを合わせた要素だけ大きさが変わる、といったことも「align-self」プロパティで実装できそうですね。
　　

2. animation-delay

*「amination-delay」*は「アニメーション」に関するプロパティです。

CSSでアニメーションを実装することも多くなりましたが、*「animation-delay」*を使うことでアニメーションのスタートのタイミングを遅くしたり早くしたりすることができます。アニメーションの繰り返し設定がなされている場合には、最初のターンのみにdelayのタイミングが適用されます。

デフォルトでは「animation-delay: 0s;」となっており、ブラウザの読み込み完了とともにアニメーションが開始されます。
しかし、例えば*「amination-delay: 1.2s」*とすることで、ブラウザの読み込み完了から1.2秒後にアニメーションを開始する設定に変更でき、「animation-delay: 1200ms」とミリ秒で記述することも可能です。ミリ秒は整数値で指定します。

マイナス値を設定することもできます。
例えば、「animation-delay: -500ms」と指定すると、アニメーションがあたかも0.5秒前に実行されているかのように見せることができます。
　　

3. animation-fill-mode

*「animation-fill-mode」*も「アニメーション」に関するプロパティです。

このプロパティでは、アニメーションが始まる「前」とアニメーションが終わった「後」に何をするかを指定することができます。

わかりやすく言えば、

- 「animation-delay」プロパティで指定した待ち時間
-  アニメーションが終了した後

にどうするか、ということを指定することができます。

上記に該当する場合には、*「再生開始直後の状態」に戻すか「再生終了直前の状態」*のままにするかを選ぶことができます。

デフォルトでは、*「animation-fill-mode: none;」*となっています。この場合、再生中以外は、@keyframes規則で定められたプロパティは無効とします。

*「animation-fill-mode: forward;」*を指定した場合、再生中以外は再生終了直前のプロパティを適用します。つまり、@keyframesで言うところの100%での状態を適用することになります。

また、*「animation-fill-mode: backward;」を指定した場合には、再生中以外は再生開始直後のプロパティ、すなわち@keyframesで言うところの0%での状態を適用します。「animation-fill-mode: both;」*を指定すると、「再生開始前は開始直後の状態」「再生終了後は終了直前の状態」となります。
　　

4. animation-iteration-count

iterationとは「繰り返し」のことです。すなわち、*「animation-iteration-count」*はアニメーションを何回繰り返すかを指定することができます。

*「animation-iteration-count: 1;」が初期値となっていますが、「animation-iteration-count: 2;」*と指定することで2回アニメーションを繰り返すことができます。

*「animation-iteration-count: infinit;」*で無限再生を実装することも可能です。
　　

5. background-clip

*「background-clip」*は「背景」に関するプロパティです。

このプロパティでは、背景の範囲を要素内のどこまでに広げるかを指定することが可能です。

デフォルトで指定されている*「background-clip: border-box;」では、ボーダーの外ギリギリまでに背景を適用することになっています。しかし、「background-clip: padding-box;」*と指定することでボーダーの縁の内側に背景を適用します。

また、*「background-clip: content-box;」*にすると、要素の中のコンテンツにだけ背景をしていすることができます。
　　

6. background-origin

*「background-origin」*は背景に画像を指定した場合に、どこから敷き詰めるかを指定するプロパティです。

先ほど紹介した「background-clip」と違って、「background-origin」では「padding-box」が初期値となっています。*「background-origin: border-box;」でボーダーの外ギリギリの位置から背景画像を敷き詰め、「background-origin: content;」*で要素の中のコンテンツの縁から背景画像を敷き詰めることができます。
　　

7. box-sizing

*「box-sizing」*は要素のwidth(横幅)・height(縦幅)の計算方法を指定するためのプロパティです。簡潔にいえば、paddingやborderを縦横の幅に含めるかどうかを指定することができます。

例えば、以下のプロパティを指定したボックス要素があるとしましょう。

- border-width: 12px;
- padding: 30px;
- width: 200px;

この時、初期値では*「box-sizing: content-box;」*となっています。
この場合、widthやheightは要素の中身に対して適用されるので、widthの合計は以下のとおりです。

24px + 60px + 200px = 284px

一方、*「box-sizing: border-box;」*とすれば、widthやheightは「paddingやborderを含めた値」として計算されます。もちろん、widthの合計はどんなことがあっても常に『200px』であり、要素の中身であるコンテンツに関して言えば、widthの計算方法は下記になります。

200px - 60px - 24px = 116px

　　

8. column-count

*「column-count」*はその名のとおり「カラム数」を指定するプロパティです。
table要素以外の再配置できないブロック要素、インラインブロック要素、table-cellに指定できます。

「column-count」によってカラム数を指定すると、まるでフレックスボックスを使っているかのように要素を横配置することができます。

デフォルトでは*「column-count: auto;」となっており、カラム指定されていません。「column-count: 3;」*のようにカラム数を整数値で指定することで、親要素の中にあるものが横並びになります。

フレックスボックスを使うまでもないですが、部分的に横配置したい時に活躍してくれそうです。
　　

9. column-gap

*「column-gap」*もカラムに関するプロパティです。

このプロパティでは、カラムとカラムの間の余白を指定します。
*「column-gap: normal;」*が初期値となっていますが、この場合はブラウザが規定値として設定した値が設定されます。ほとんどのブラウザは1emを設定しています。一方、「column-gap: 2px;」のようにpx値で指定することで、カラム間の余白を設定することができます。

ただし、この値にはそれぞれの要素のボーダーは含まれず、単純に余白の間の値であることに注意しましょう。
　　

10. font-valiant

*「font-variant」*は欧米フォントに関するプロパティです。

例えば、「Hello world!」という文字列を表示してみます。

デフォルトで設定されている*「font-variant: normal;」では、そのまま表示されます。
一方、「font-variant: small-caps;」*と指定すると、先頭の文字以外は、小さな大文字で表示されます。タイトルを表示するときなどに活躍しそうです。
　　

11. mix-blend-mode

*「mix-blend-mode」*は要素と背景のブレンド具合を設定するプロパティです。

一見すると透明度を設定する「opacity」にも似ていますが、Photoshopのレイヤーのように*「乗算」「除算」「焼き込み」*などができる点で異なります。

*「mix-blend-mode: normal;」*では、何もブレンドされていません。
*「mix-blend-mode: multiply;」で乗算、「mix-blend-mode: screen;」*でスクリーンモードになります。

そのほか様々なモードがありますので、興味のある方は下記のページを参考にしてみてください。
親要素と子要素に背景を設定して、子要素「mix-blend-mode」を設定すれば、Photoshop並みの写真加工もできそうです。

参考：
CSSブレンドモードで画像を彩ろう｜Webクリエーターボックス
　　

12. outline

*「outline」*は要素の外枠を設定するプロパティです。

「border」と似ていますが、「border」はもともと「border-right」、「border-bottom」……と上下左右それぞれの外枠を設定するショートハンド(省略する書き方)だったのですが、「outline」は概念として4つの外枠をまとめて設定するプロパティとなります。

例えば、borderで設定するのと同じように、*「outline: 4px dotted red;」*と設定すれば、赤枠のドット線の4pxの外枠ができ上がります。スタイルや太さなどを個別に設定したい場合には、「outline-width」「outline-style」「outline-color」で設定すればOKです。

ただし、outlineの太さを何pxに設定しても、要素の幅(width)は変わらないので注意しましょう。
　　

13. overflow

*「overflow」*は要素の中には収まりきらないテキストや画像などのコンテンツを「こぼして」表示するかを指定します。

デフォルトでは*「overflow: visible;」*と指定されていて、要素内のはみ出したコンテンツは「こぼして」表示されています。

*「overflow: hidden;」*と指定すると、はみ出したコンテンツ部分は隠れてしまいます。
*「overflow: scroll;」*では、縦横にスクロールバーをつけて、はみ出した部分は隠されますが、スクロールでコンテンツを見ることができます。
*「overflow: auto;」*を指定すると、ブラウザによってスクロールバーをつけるかどうかが決まります。
　　

14. overflow-wrap

*「overflow-wrap」*は「word-break」がCSS3になってリネームされたものです。
※「word-break」はもともとIE独自の仕様だったため、より汎用的に使えるプロパティが生まれました

長い単語やURLを表示する場合に折り返して改行するかを指定します。

指定なしでは、*「overflow-wrap: normal;」*となります。この場合は、URLなどは折り返ししないために、要素からはみ出して表示される場合もあります。

一方、*「overflow-wrap: break-word;」*を指定すると、URLなどがどれだけ長くとも、行の終わりで強制的に改行を行います。
　　

15. pointer-events

あまり使用頻度は高くないかもしれませんが、*「pointer-events」*も紹介しておきましょう。
このプロパティでは、ホバー(マウスオーバー)やクリックをした時の要素の挙動を設定することができます。

例えば、あるテキストコンテンツの上にボタンが重なっている場面があるとしましょう。
*「pointer-events: auto;」*がデフォルトです。この場合は、「:hover」を設定していれば、その設定に合わせた動きを行います。ボタンにマウスポインタを重ねることで、「:hover」で設定したプロパティに変化します。

一方、*「pointer-events: none;」*を指定すると、「:hover」が無効となり、クリックしても「:hover」で指定した要素の背面の要素がクリックの対象となります。
　　

16. text-indent

*「text-indent」*では、段落の最初の行の開始位置(インデント)を設定することができます。

初期値は「text-indent: 0;」となっていますが、例えば*「text-indent: 40px;」*のように指定することで、最初の行の開始位置をずらすことが可能です。pxやem、rem、%などが指定でき、適用されるのは最初の行だけなので全体をずらしたい場合にはpaddingなどを使用しましょう。

また、マイナスの値を指定することで、一行目だけを飛びたしたように見せることもできます。
　　

17. text-overflow

*「text-overflow」*では、テキストが親要素からはみ出してしまいそうな場合にどういう処理をするかを指定します。

*「text-overflow: clip;」がデフォルトです。この場合、はみ出した部分は切り取られ、選択することもできません。「text-overflow: ellipsis;」*と指定することで、はみ出した部分は「…」(三点リーダー)で表示されます。

ブログなどの記事の要約部分などで使えそうですね。
　　

18. text-transform

*「text-transform」*では、アルファベットを使った場合の大文字・小文字の扱いについて指定します。
例えば、ブログ記事のタイトル部分に「text-transform」を指定する場合を考えてみましょう。

*「text-transform: none;」*が初期値となっており、指定したタイトル部分はそのままです。
*「text-transform: capitalize;」*にすれば、テキストのそれぞれの単語の先頭が大文字になります。
*「text-transform: uppercase;」では全てが大文字になり、「text-transform: lowercase;」*では全てが小文字になります。
　　

19. white-space

*「white-space」*は、連続した半角スペースの取り扱い方法について定義します。

例えば、次のような、半角スペースや改行を含んだソースコードがあるとしましょう。

あのイーハトーヴォのすきとおった風 _ 夏でも底に冷たさをもつ青いそら
うつくしい森で飾られたモリーオ市 _  郊外のぎらぎらひかる草の波

(半角スペースが連続して挿入されていると仮定しましょう)

デフォルトの*「white-space: normal;」では、連続した半角スペースは1つの半角スペースに圧縮され、ソースコードの改行は無視され、コンテンツを包むように扱われます。
一方、「white-space: nowrap;」*を指定すると、連続した半角スペースは1つの半角スペースに圧縮され、改行は無視されますがコンテンツは一行で表示されます。

*「white-space: pre;」*は、連続した半角スペースは保護(preserve)され、改行もそのまま表示されます。
*「white-space: pre-wrap;」では、連続した半角スペースや改行はそのまま表示されますが、要素の終点で強制的な改行も行われます。
最後に、「white-space: pre-line;」*では、連続した半角スペースは1つの半角スペースに圧縮されますが、改行はそのまま表示され、要素の終点で強制的な改行が行われる設定になります。