CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。
1. 並んでいる要素の最後だけスタイルを適用しない
★対応ブラウザ → 確認
リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。
li {
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
これが
li:not(:last-child) { /* 最後のli要素以外に適用 */
margin-right: 20px;
}
これだけの記述でOKです。
スタイルの打ち消しが発生しないので優しい実装です。
2. ウィンドウの横幅、高さを取得して適用
★対応ブラウザ → 確認
現在のウィンドウの横幅や高さを指定することが出来る単位vw、vhを利用すれば、JavaScript無しで全画面表示を実装することが出来ます。
ウィンドウが変化しても値が変化するので非常に便利。
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw; /* ウィンドウの横幅を指定 */
height: 100vh; /* ウィンドウの高さを指定 */
background-color: #fff;
}
3. CSS上で数値の計算を行う
★対応ブラウザ → 確認
「横幅100%から30pxだけ引いた数値がほしいんだけど・・・」という時に便利なプロパティがcalc()です。こちらもJavaScriptを使用せずにCSSのみで数値の計算が可能になります。
また、ウィンドウの変化にも対応しています。
/* ウィンドウの横幅から30px引いた数値で指定する */
.box {
width: calc(100% - 30px);
}
/* 3つの要素をぴったり横に並べる */
.box-3cols {
float: left;
width: calc(100% / 3);
}
4. 高さがなくても要素を中央に配置する
★対応ブラウザ → 確認
親要素に高さがなくても、子要素を中央に配置するテクニックです。
数行のCSSで実装できるため、非常に使いやすいテクニックなのですが、
transformは不具合を引き起こしやすいプロパティなので乱用は避けましょう。
.box-center {
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
5. CSSでカーニング（文字間のアキ調整）を行う
★対応ブラウザ → 確認
font-kerningというプロパティを使用すると、CSS上でカーニングを行うことが出来ます。
似たようなプロパティにletter-spacingがありますが、こちらはすべての文字を均等に調整するのに対し、font-kerningは 特定の文字の組み合わせ の時のみ調整してくれます。
.kerning {
font-kerning: auto; /* ブラウザ設定に合わせる（標準値） */
font-kerning: normal; /* カーニングを適用する */
font-kerning: none; /* カーニングを適用しない */
}
6. 要素を均等に横に並べる、順番を入れ替える
★対応ブラウザ → 確認
display: flexを指定すると、カスタマイズ性に優れたフレキシブルボックスレイアウトを簡単に作ることが出来ます。ブラウザのバージョンによっては記述が違ったり、動作しなかったりするのでブラウザ対応状況をよくご確認ください。
最新ブラウザを使用できる環境ならぜひ覚えておきたいテクニックです。
/* 親要素に display: flex; を設定 */
ul {
display: flex;
}
/* 子要素を均等に横に並べる */
li {
flex: 1;
}
/*
* 子要素の順番を入れ替える
*
* 初期値は「0」
* 「-1」を指定すると、要素を最初に表示
* 「1」 を指定すると、要素を最後に表示
*
*/
li.no-1 {
order: -1;
}
li.no-2 {
order: 0;
}
li.no-3 {
order: 1;
}
その他にも様々なカスタマイズが行えるので、要チェックです。
★参考サイト → CSS3の「フレキシブルレイアウト」使い方まとめ
7. 要素の中身が空だった場合、非表示にする
★対応ブラウザ → 確認
「要素の中に何も入っていないときは違うスタイルを当てたい・・・」という時に使えるのが、:emptyです。これを使えば、空の要素に対してのみ異なったスタイルを適用することが出来ます。
空の要素は表示崩れの原因になりやすいので、動作していない時は非表示にしておくことをおすすめします。
/* このままでは、.alert の中身が空だった場合に表示崩れが起きる。 */
.alert {
padding: 20px 30px;
border: 2px solid red;
color: red;
}
/* :empty を指定することで、空の場合は非表示にできる。 */
.alert:empty {
display: none;
}
8. <textarea>のリサイズ操作を無効にする、アイコンを非表示にする
★対応ブラウザ → 確認
resize: none;を指定すると、<textarea>ウィンドウのリサイズ操作を無効化することが出来ます。
ついでに、ウィンドウ右下に表示されるアイコンも非表示にできるので、デザイン的に調整したいときは使ってみるとよいでしょう。
※IE系統は全滅なので注意。
/* textarea のリサイズ操作を無効化 */
textarea {
resize: none;
}
/* おまけ: input要素の初期スタイルを消す */
input {
appearance: none;
}
9. テキスト・画像のドラッグ操作を無効化する
★対応ブラウザ → 確認
user-select: none;を指定すると、テキストのドラッグ操作を無効化します。
テキストを簡単にコピーされたくない場合などに使えますが、完全なコピー防止はできません。
あれば多少はマシ、ってくらいです。
/* テキストをドラッグ操作できなくする */
p {
user-select: none;
}
/* おまけ: 画像もドラッグ操作できなくする (Webkit系統のみ) */
img {
-webkit-user-drag: none;
}
10. 要素の中に慣性スクロール（なめらかなスクロール）を実装する
★対応ブラウザ → Webkit系スマホブラウザ
overflow: scrollで要素の中をスクロールできるようにして、スマホで触ってみるとどうもぎこちない動きになってしまいます。
そこで、overflow-scrolling: touchを指定してやると、スマホでも慣性スクロール（なめらかなスクロール）に変更することが出来ます。
/* 慣性スクロールに変更する */
.scroll {
height: 300px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
11. 画面いっぱい（要素いっぱい）に背景として動画を表示させる
★対応ブラウザ → 確認
画面または要素いっぱいに背景として動画を表示させたいときは、<video>タグとbackground-size: coverの組み合わせが便利です。
ウィンドウの伸縮にも対応可能、いい感じに表示してくれます。
<video src="video.mp4" autoplay loop></video>
video {
position: absolute; /* 画面いっぱいの場合は fixed でもOK */
top: 0;
left: 0;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
background-size: cover;
}
12. <img>タグをbackground-size:coverのように扱う
★対応ブラウザ → 確認
<img>タグを親要素の横幅と高さに応じて可変させ、広げた状態（background-size:coverのような状態）で配置したいというときは、<img>にobject-fit: coverを指定しましょう。
どちらもアスペクト比は固定されたまま拡大・縮小させることが可能です。
/* 親要素の縦横幅に合わせて広げた状態で配置（収まりきらない場合ははみ出す） */
img {
object-fit: cover;
}
/* 親要素の縦横幅に合わせて収まるように配置（はみ出さない） */
img {
object-fit: contain;
}
・
・
・
また時間のあるときに追記します！