30 Seconds of CSS日本語訳③

「30 Seconds of CSS」

より、覚えておくと便利なCSSテクニックをどんどん訳して英語力も上げようというこの企画第3回目です。

前回:30 Seconds of CSS日本語訳②

目次:

9.CSS変数 – Custom variables

10.選択の禁止 – Disable selection

11.テーブル要素内の中央配置 – Display table centering

12.ドーナッツ型の回転アニメ―ション – Donut spinner

9.CSS変数 – Custom variables

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

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

<<説明>>

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

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

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

10.選択の禁止 – Disable selection

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

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

<<説明>>

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

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

11.テーブル要素内の中央配置 – Display table centering

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

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

<<説明>>

  1.  ‘.center’セレクタに指定したdisplay: tableによって、その要素はHTMLの<table>タグと同じようにふるまいます。
  2. 縦横の幅に100%を指定することで、 ‘.center’セレクタは親要素内いっぱいの大きさを取ります。
  3.  ‘.center > span’セレクタに指定したdisplay: table-cellによって、その要素はHTML要素と同じ働きをします。
  4. text-align: centerで子要素は横方向に中央配置されます。
  5. vertical-align: middleで子要素は縦方向に中央配置されます。

なおこの外側の親要素(この例では’.container’)は高さと横幅が固定されている必要があります。

12.ドーナッツ型の回転アニメ―ション – Donut spinner

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

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

<<説明>>

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

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

コメントを残す

メールアドレスが公開されることはありません。