30 Seconds of CSS日本語訳１～１２

『30 Seconds of CSS』
ご存知の方も多いと思いますが、CSSの役立つ小技集のようなサイトです。
誰でも知っているようなものもありますが、標準仕様とは言えないながらも覚えておくとお得なテクニックやデザイン的なテクニックなども多数載っていて、解説も分かりやすい。
その上文章も短く簡潔なので、私の貧弱な英語力でもそれなりに読めるのがありがたいという素晴らしいサイトです。

今回は英語の勉強も兼ねてこちらを翻訳していきたいと思います。
なお、コードサンプルやデモは転載しませんので元サイトの方でご確認ください。

この記事はブログで4個づつ翻訳したものをまとめたものになります。
この先はQiitaの前にブログで公開しているのでよろしくお願いします。
TAMAのWEBデザイン勉強ノート+雑感

目次
１．はずむ読み込み – Bouncing loader
２．Box-sizingの初期化 – Box-sizing reset
３．真円 – Circle
４．クリアーフィクス – Clearfix
５．高さの比率に対して一定の横幅 - Constant width to height ratio
６．自動連番 - Counter
７．スクロールバーのカスタマイズ - Custom scrollbar
８．テキスト選択範囲のカスタマイズ - Custom text selection
９．CSS変数 - Custom variables
１０．選択の禁止 - Disable selection
１１．テーブル要素内の中央配置 - Display table centering
１２．ドーナッツ型の回転アニメ―ション - Donut spinne

１．はずむ読み込み – Bouncing loader

https://30-seconds.github.io/30-seconds-of-css/#bouncing-loader

はずむ読み込み動画を作ろう。

<<説明>>
注：1remは通例16pxとする。

1. @keyframesで、要素の不透明度opacityの変化、またtransform: translateY()を使った要素の二次元平面上の移動という２つ状態を持ったアニメーションを定義します。

2. .bouncing-loaderセレクタは跳ねる円形の親コンテナ要素なので、その子要素を中央に位置させるためにdisplay: flexとjustify-content: centerを指定します。

3. .bouncing-loader > divセレクタは、親要素の中の3つのdivを対象にスタイルを指定します。div要素はそれぞれ1remの高さと幅を与えられ、border-radius: 50%の指定によって角が球状に丸められています。

4. margin: 3rem 0.2remが各円形に指定している上下3rem、左右0.2remのマージンは、円形同士が接触しないように余白を作るためです。

5. animationは各種アニメーションプロパティを表すためのショートハンドプロパティです。animation-name, animation-duration, animation-iteration-count, animation-directionプロパティが使用されています。

6. nth-child(n)はその親要素の中のｎ番目の子要素を対象にする疑似クラスです。

7. animation-delayは二番目と三番目の要素にそれぞれの値で使用されています。それによって、各々の要素が違うタイミングでアニメーションを開始するのです。

２．Box-sizingの初期化 – Box-sizing reset

https://30-seconds.github.io/30-seconds-of-css/#box-sizing-reset

要素の幅と高さがそれらに指定されたborderやpaddingの影響を受けないよう、ボックスモデルの初期化をしよう。

<<説明>>

1. box-sizing: border-boxは追加したpaddingやborderが要素の幅や高さに影響を与えないようにします。

1. box-sizing: inheritで、ある要素がその親要素のbox-sizing規則に従うようにします。

３．真円 – Circle

https://30-seconds.github.io/30-seconds-of-css/#circle

真円形の要素をCSSだけを使って作ろう。

<<説明>>

border-radius: 50%で要素のフチを湾曲させて真円を作ります。
真円というものは中心から辺のどの点までの距離も同じでなければならないので、要素の幅と高さは必ず同じにします。違う値にした場合は楕円が作られるでしょう。

４．クリアーフィクス – Clearfix

子要素のフロート解除を親要素で確実に行おう。
注：このテクニックは貴方がまだレイアウトにフロートを使っている場合のみ有効です。フレックスボックスやグリッドレイアウトを用いた近代的な手法の使用を検討してください。

<<説明>>

1. .clearfix::afterで疑似要素にスタイルを指定します。
2. content: ‘　’を指定して、その疑似要素がレイアウトに影響を与えることを許可します。
3. clear: bothはその要素の左右、あるいは両側の要素がclearを指定しているそのブロックの中で前出しているフロート要素に隣接できなくなることを示します。(この訳自信無し)

５．高さの比率に対して一定の横幅 - Constant width to height ratio

https://30-seconds.github.io/30-seconds-of-css/#constant-width-to-height-ratio

要素に可変の横幅を与えることで、レスポンシブデザインでも高さが釣り合う状態を保持できるようになる。(言い換えれば、その要素の高さに対する横幅の比率が一定になる)

<<説明>>

::before疑似要素に指定されたpadding-topによって、要素の高さは横幅に指定されている％と同じ値になります。従って100%という値を指定することでその要素の高さが常にその横幅の100％になり、レスポンシブな正方形を作り出せるのです。
(訳者補足：縦横関係なく、%を値に持つpaddingは横幅を基準にした%の長さを取るようです。)
この方法は、この要素の中に中身を正常に配置することにも使えるでしょう。

６．自動連番 - Counter

https://30-seconds.github.io/30-seconds-of-css/#counter

カウンターとは要するにCSSによって運用される変数であり、使用された回数に適用されるCSSのルールに従って、その変数の値は追加されていく。

<<説明>>

連番の入ったリストがどんなHTMLタグでも作れます。

1. `counter-reset`はカウンターの変数を初期化するプロパティで、値には対象となる任意のカウンター名を取ります。デフォルト値では、カウンターは0からのスタートです。またこのプロパティは初期値を特定の値に変えることも出来ます。
2. `counter-increment`はカウントされる要素に指定します。一度`counter-reset`によって初期値になったカウンターの値が増加あるいは減少を開始します。
3. `counter(name, style)`で、その項目ごとのカウンターの値を表示します。一般的に疑似要素の`content`プロパティ内で使用します。この機能は2つのパラメータを持ち、1つ目はカウンターの名前、2つ目は`decimal`と`upper-roman`のどちらかです。(初期値は`decimal`) (※訳者注：この機能はサンプルでは使用されていません。)
4. `counters(counter, string, style)`もまた、その項目ごとのカウンターの値を表示し、一般的に疑似要素の`content`プロパティ内で使用します。この機能は3つのパラメーターを持っています。1つ目はそのカウンターの任意の名前、2つ目はカウンターの数値の後に来る任意の文字列、3つ目は`decimal`と`upper-roman`のどちらかです。(初期値は`decimal`)
5. CSSカウンターは特に概要のリストを作る際に便利でしょう、なぜなら子要素の中には自動的に新しい階層のカウンターが作成されるからです。`counters()`の機能を使うことで、階層が違う入れ子状のカウンターたちの間に区切り用の文字列を挿入することも出来ます。

７．スクロールバーのカスタマイズ - Custom scrollbar

https://30-seconds.github.io/30-seconds-of-css/#custom-scrollbar

スクロールバーのスタイルをドキュメントやバー付きの要素によってカスタマイズしよう。(WebKit 系プラットフォーム限定)

<<説明>>

1. `::-webkit-scrollbar`はスクロールバー要素全体にスタイルを指定します。
2. `::-webkit-scrollbar-track`はスクロールバートラックの要素(上下するパーツとそのレール部分)にスタイルを指定します。
3. `::-webkit-scrollbar-thumb`はスクロールバーサムの要素(上下するパーツ)にスタイルを指定します。

この他にもたくさんのスクロールバー用疑似クラスが用意されています。もしそれらも知りたい場合は、WebKit Blogをご覧ください。

⚠スクロールバーのスタイルはどの標準化過程にも載っていないと思われます。
(訳者注：前述のとおりWebKit 系のSafariやChromeでのみ使用可)

(訳者補足：コメント欄より情報提供いただきました。
『CSS Scrollbars Module Level 1』にて同一の内容ではないもののスクロールバーのCSSプロパティが標準化過程に記載されているようです。)

８．テキスト選択範囲のカスタマイズ - Custom text selection

https://30-seconds.github.io/30-seconds-of-css/#custom-text-selection

テキスト選択範囲(クリックやドラッグした時)のスタイルを変えよう。

::selectionはある要素の中のテキストが選択されたときに指定するスタイルを定義します。ただし他のセレクタをその前に結合して使わない場合は、指定したスタイルはドキュメントのルートレベルに適用され、選択可能な全ての要素が対象になるという点に留意してください。

９．CSS変数 - Custom variables

https://30-seconds.github.io/30-seconds-of-css/#custom-variables

CSS変数は一つのドキュメントを通して使う特定の値を格納する。

<<説明>>

:root疑似クラス内に定義された変数は、ドキュメントを構成する樹状に連なる要素の根っこ(root)の要素に適用されるため、グロバーバル変数として機能します。

--variable-name:の形で変数を宣言しましょう。

変数はドキュメント内であればvar(--variable-name)の値を使って呼び出すことができます。

１０．選択の禁止 - Disable selection

https://30-seconds.github.io/30-seconds-of-css/#disable-selection

コンテンツを選択できない様にしよう。

<<説明>>

user-select: noneを指定することで、そのテキストは選択できない様になります。

⚠ブラウザへのフルサポートには各プレフィクスが必要です。
⚠閲覧者がコンテンツをコピーすることを防ぐ確実な方法ではありません。
(訳者注：Devツールでこの指定を外せば通常通りの選択が可能になるため)

１１．テーブル要素内の中央配置 - Display table centering

https://30-seconds.github.io/30-seconds-of-css/#display-table-centering

縦横の両方向に子要素を中央配置するためにその親要素にdisplay: tableを使おう。(flexboxの代用手段として)

<<説明>>

1.  `'.center'`セレクタに指定した`display: table`によって、その要素はHTMLの``タグと同じようにふるまいます。
   縦横の幅に`100％`を指定することで、 `'.center'`セレクタは親要素内いっぱいの大きさを取ります。
    `'.center > span'`セレクタに指定した`display: table-cell`によって、その要素はHTML要素と同じ働きをします。
   `text-align: center`で子要素は横方向に中央配置されます。
   `vertical-align: middle`で子要素は縦方向に中央配置されます。
   なおこの外側の親要素(この例では`'.container'`)は高さと横幅が固定されている必要があります。

   １２．ドーナッツ型の回転アニメ―ション - Donut spinner

   https://30-seconds.github.io/30-seconds-of-css/#donut-spinner
   

   コンテンツが読み込み中であることを示す、ドーナッツ型の回転アイコンを作ろう。

   <<説明>>

   半透明のborderを要素の全辺に適用し、その上で一辺だけに読み込み進行中の指針を表すように色を付けます。animationプロパティを使って、そのドーナツ型の要素を回転させます。

   ⚠ブラウザへのフルサポートには各プレフィクスが必要です。