便利だけど忘れそうなCSSプロパティ
はじめに
CSSプロパティの中で、便利だけど忘れそうなものをまとめてみました。
忘れそうなもの
擬似要素で連番を表示させる
counter-incrementを使用します。
:beforeや:afterで例えば「No.1,2,3…」など、連番を表示させたいときに使えるプロパティです。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
li{
counter-increment: number;
}
li:before{
content: "No."counter(number);
}カウントを途中でリセットさせる
counter-resetを使用します。
下記の場合はh3要素が現れるたびにカウントがリセットされます。
<h3>果物</h3>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
<h3>野菜</h3>
<ul>
<li>キャベツ</li>
<li>にんじん</li>
<li>セロリ</li>
</ul>
h3{
counter-reset: number;
}:nth-childの限定方法
最初の4つだけ
:nth-child(-n+4){}7個目から11個まで
:nth-child(n+7):nth-child(-n+11){}最後から2番目
:nth-last-child(2){}最後から2番目かつ奇数のとき
:nth-last-child(2):nth-child(odd){}要素が一つのとき
:only-child{}スマホでリンクをタップした時のハイライトを変える
下記だと透明になります。
-webkit-tap-highlight-color: rgba(0,0,0,0);Youtubeの埋め込みをレスポンシブ対応させる
Youtubeの埋め込みを、縦横比を保ったまま可変させる方法です。
<div class="youtube">
<iframe width="560" height="315" src="URL" frameborder="0" allowfullscreen></iframe>
</div>.youtube{
width: 100%;
position: relative;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}Youtubeの埋め込みでよく使うパラメータ
- 動画アノテーションなし
- 画質高
- 字幕表示なし
- 全画面表示ボタンあり
- YouTubeロゴ非表示
- 関連動画表示なし
<iframe width="560" height="315" src="URL?modestbranding=1&cc_load_policy=0&iv_load_policy=3&vq=hd720&rel=0" frameborder="0" allowfullscreen></iframe>文字の改行の設定
word-breakは問答無用で折り返し。
word-wrap,overflow-wrapはできる限り単語区切りで折り返し。
overflow-wrapはword-wrapの後継プロパティになりますが、互換性が微妙なので両方記載しておくと良いです。
もし折り返しがうまくいかない場合はbodyに対して指定してあげるとうまくいくことがあります。
word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;:hoverの指定
下記だと、クラスactive以外のa要素のホバー時にスタイルが当たります。
a:not(.active):hover{}hoverが可能なデバイスのみ限定で指定
IEは使えません。
@media (hover: hover){}チェックしたinput要素をハイライトする
input:checked + label{
background: yellow;
}文字選択中のスタイル変更
::selection{
color: red;
background-color: yellow;
}一文字目だけスタイルを変える
:first-letter{
color:red;
}傍点（文字の上に点をつける）
IE,Edgeは未対応です
-webkit-text-emphasis: filled circle #000;
text-emphasis: filled circle #000;IE,Edgeでも使いたい場合
padding: 0.3em 0;
background-repeat: repeat-x;
background-size: 1em 0.2em;
background-position: top left;
background-image: radial-gradient(0.08em 0.08em at center center, #000, #000 95%, rgba(0, 0, 0, 0));リンクの種類でスタイルを変える
a[href^="http://"]{}
a[href^="mailto:"]{}
a[href$=".pdf"]{}カラム数を指定する
下記だと3カラムになります
column-count: 3;テキストを選択できないようにする
スマホには-webkit-touch-calloutも使うと良い（iOSのみ対応）
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;要素の鏡面反射
下記は下方向に反射します。
とても面白いプロパティですが、対応ブラウザが少ないので注意してください。
-webkit-box-reflect: below;指定したクラスから始まる要素のみスタイルを当てる
下記だとクラス名「list」から始まるul要素のみ
ul[class^="list"]{}指定したクラスを含む要素にスタイルを当てる
下記だとクラス名「list」を含むul要素のみ
ul[class*='list']{}指定したクラスで終わる要素にスタイルを当てる
下記だとクラス名「list」で終わるul要素のみ
ul[class$='list']{}カスタムフォント読み込みの時のフォールバック
下記だとカスタムフォントが読み込まれるまで、代替フォントがすぐに表示されます。
フォントが読み込まれるまで、テキストが表示されない状態を回避することが可能です。
なお、こちらは@font-face{}内に記述する必要があります。
font-display: swap;