More than 5 years have passed since last update.

30 Seconds of CSS日本語訳２５～３７

Posted at 2018-10-28

第一回：30 Seconds of CSS日本語訳１～１２
第二回：30 Seconds of CSS日本語訳１３～２４
に引き続き、CSSお役立ち小ネタ集

の翻訳をしていきます。
なお、ビジュアルで分かりやすいものはデモのスクショを載せてますが、コードサンプルやデモは転載していませんので元サイトの方でご確認ください。

『30 Seconds of CSS』は今回で全て翻訳したので最後ですが、今後もHTML・CSS・JavaScript関係で役立ちそうなページの翻訳はブログの方で続けていきたいと思っているのでよろしくお願いします。
TAMAのWEBデザイン勉強ノート+雑感

目次
２５．:notセレクタ - :not selector
２６．要素を非表示にする - Offscreen
２７．スクロール要素の下端に白いぼかしを入れる - Overflow scroll gradient
２８．パッと出て来るメニュー - Popout menu
２９．良い感じのアンダーライン - Pretty text underline
３０．全てのスタイルの初期化 - Reset all styles
３１．シェイプされた仕切り線 - Shape separator
３２．色が薄らぐ兄弟要素 - Sibling fade
３３．OS内蔵のフォント- System font stack
３４．トグルスイッチ- Toggle switch
３５．トランスフォームで中央配置- Transform centering
３６．三角形- Triangle
３７．省略されたテキスト- Truncate text

２５．:notセレクタ - :not selector

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

:not疑似セレクタは、最後の(または特定の)要素を除いて一つのグループ内の複数要素にスタイルを指定したい時に便利です。

<<説明>>

li:not(:last-child)は:last-childを除いたli要素すべてにスタイルを指定することを意味します。

２６．要素を非表示にする - Offscreen

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

これはある要素をドキュメント構造の中で視覚的にもポジション的にも完全に隠し去りつつ、JavaScriptでの操作や画面の音声読み上げソフトからの認識は許可する万全の手順です。この方法は視覚障害を持つユーザーのための説明を付け加えるといったアクセシビリティの向上(参考：ADA法)にとても役立つでしょう。
代わりの方法としてdisplay: noneでは音声読み上げソフトが認識しませんし、visibility: hiddenを使うとドキュメント構造の中で要素の入るスペースを保持してしまいます。

<<説明>>

ボーダーをすべて取り除きます。
`clip`の指定で要素の一部分も表示されない様にします。
要素の高さと横幅を`1px`にします。
`margin: -1px`で要素の高さと横幅を打ち消しましょう。
要素からはみ出た内容を非表示にしましょう。
パディングを全て取り除きます。
`osition: absolute`の指定でその要素が要素としての空間を取らないようにします。

(`clip`は技術的に賛否がありますが、新しくできた`clip-path`は現在サポートしているブラウザが非常に限られているのです。)

２７．スクロール要素の下端に白いぼかしを入れる - Overflow scroll gradient

https://30-seconds.github.io/30-seconds-of-css/#overflow-scroll-gradient

要素のオーバーフロー部分にスクロールできるコンテンツがあることをより明確に示すため、要素の下にグラデーションを付けてみよう。

<<説明>>

`position: relative`は指定した要素の疑似要素に、直角座標的な位置関係を与えます。
`::after`によって疑似要素を定義します。
`background-image: linear-gradient(...)`で上から下に、透明から白(背景色)へと薄れていくグラデーションを要素に乗せます。
`position: absolute`を指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
`width: 240px`はスクロールできる要素の幅と同じです。(スクロール要素はグラデーションを付けた疑似要素を持った親要素の子要素に当たります)
`height: 25px`は薄れていくグラデーション疑似要素の高さで、それは本体と比較して短くするべきでしょう。
`bottom: 0`で疑似要素の底部が本体要素の一番下に来るようにします。
`pointer-events: none`の指定によって、疑似要素にマウスポインタが当たらないようになり、そのまま背後の文章を選択出来るインタラクティブな状態を保持できます。

２８．パッと出て来るメニュー - Popout menu

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

ホバーされた時やフォーカスされた時に現れるインタラクティブなポップアウトメニューを作ろう。

<<説明>>

`position: relative`は指定した要素の疑似要素に、直角座標的な位置関係を与えます。
`position: absolute`を指定することで、ポップアウト要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
`left: 100%`でポップアウト要素は左端から親要素の幅100%分移動します。
`visibility: hidden`で最初はポップアウト要素は非表示にしつつ、トランジションが使用できる状態にします。(`display: none`では使用出来ない)
`.reference:hover > .popout-menu`で、`.reference`要素がホバーされたときに、その子要素にあたる`.popout-menu`クラスの要素にそのプロパティが持つ`visibility`の値を`visible`に変えるよう指定し、ポップアウト要素を出現させます。
`.reference:focus > .popout-menu`で、`.reference`要素がフォーカスされたときにポップアウト要素が出現するよう指定します。
`.reference:focus-within > .popout-menu`を指定することで、`.reference`要素の中にある要素がフォーカスされた時にもポップアウト要素が出て来ることを確かなものにします。

２９．良い感じのアンダーライン - Pretty text underline

https://30-seconds.github.io/30-seconds-of-css/#pretty-text-underline

text-decoration: underlineと違い、下線より下に飛び出る文字が下線と交差しないより良い代替案。text-decoration-skip-ink: autoの指定でも既に実装されているが、それよりも下線部をより細かく指定できる。
(訳者：descendersはyやgなどのベースラインから下に飛び出る文字。日本の文字には無い概念？なので英字やアラビア文字で有効な方法か)

<<説明>>

文字の飛び出た分が下線に交差するところで下線がその「肉厚な」影に覆われて見えなくなるように、`text-shadow`を4つ指定して4ｘ4pxのエリア(上下左右に1pxづつずらす)をテキストに付与します。影色は背景と同じ色を指定しましょう。また、文字サイズが大きい場合は影のpx数を増やしましょう。数が大きければより太い影が出来ますし、逆に細くしたければサブピクセル（小数点以下）も使用できます。
`background-image: linear-gradient(...)`で背景に90度の方向(水平)のグラデーションを文字と同じ色で作ります。(`currentColor`という値で要素の文字色と同色が取得できます。)
続く一連の`background-*`プロパティは、グラデーションを掛けた背景の幅を要素の`100%`、高さを`1px`にして底辺に固定、繰り返しを無効にすることで、`1px`幅のアンダーラインをテキストの下に作り上げます。
`::selection`疑似セレクタは、`text-shadow`プロパティがテキスト選択時に影響しないように指定するものです。

３０．全てのスタイルの初期化 - Reset all styles

https://30-seconds.github.io/30-seconds-of-css/#reset-all-styles

一つのプロパティの指定ですべてのスタイルを初期値に戻そう。（direction、unicode-bidiプロパティ以外）

<<説明>>

allプロパティはinheritかそうでないかに関わらずすべてのスタイルを初期値に戻します。

⚠MS Edgeでの導入は現状検討段階です。

３１．シェイプされた仕切り線 - Shape separator

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

2つのブロックを区切るのに、標準的な横に一本線と比べてビジュアル的に面白味のある見た目の仕切り線をSVGシェイプで作ってみよう。
(訳者：下の白い三角形の列を作る方法です)

<<説明>>

`position: relative`は指定した要素の疑似要素に、直角座標的な位置関係を与えます。
`::after`によって疑似要素を定義します。
`background-image: url(...)`の指定で、その疑似要素の背景にデフォルトで繰り返して並べられるSVGシェイプ(24ｘ12の三角形)が生成されます。それは分離されるブロック(下側)と同じ色でなければなりません。また別の形が良ければ、the URL-encoder for SVGが使えるでしょう。
`position: absolute`を指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
`width: 100%`で要素をその親要素いっぱいの横幅になるようにします。
`height: 12px`はSVGシェイプと同じ高さです。
`bottom: 0`で疑似要素は親要素の底部に配置されます。

３２．色が薄らぐ兄弟要素 - Sibling fade

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

要素がホバーされた時に、その兄弟要素の色が薄くなる効果をつけよう。

<<説明>>

transition: opacity 0.2sで不透明度が0.2秒で変化することを指定します。

.sibling-fade:hover span:not(:hover)という形で指定することで、アイテムの親要素がホバーされた時に今ホバーされていないspanを選択して、それらの不透明度が0.5に変わります。

３３．OS内蔵のフォント- System font stack

https://30-seconds.github.io/30-seconds-of-css/#system-font-stack

実際のアプリの使用感に近づけるために、各OSに元から入っているフォントを使おう。

<<説明>>

ブラウザーは並んでいるフォントの中で、手前から順番に使用できるフォントを探し、もし(システム上やCSSに定義された中に)見つからなければその次のフォントをチェックします。

`-apple-system`はiOSやmacOS(ただしChromeは別)で使われているSan Franciscoフォントです。
`BlinkMacSystemFont`はmacOSのChromeで使用されているSan Franciscoフォントです。
`Segoe UI`は Windows 10で使われています。
`Roboto`はAndroid固有のフォントです。
`Oxygen-Sans`はGNU+Linux上で使われています。
`Ubuntu`はLinuxで使われるフォントです。
`"Helvetica Neue"`と`Helvetica`はmacOS 10.10とそれ以前のバージョンで使用されたフォントです。(クォートで囲んでいるのは、名前に空白を含んでいるから)
`Arial`は全てのOSでサポートされているフォントです。
`sans-serif`はもし上記のフォント全てが使用できなかった場合のフォールバックとして指定するサンセリフ体のフォントです。

３４．トグルスイッチ- Toggle switch

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

CSSだけでトグルスイッチを作ってみよう。

<<説明>>

これは<label>要素にのみトグルスイッチを模したスタイルを付けて、実際の<input>要素のチェックボックスは画面外に飛ばして隠すエフェクトです。<input>要素に紐付けられた<label>要素がクリックされた時に、<input>要素のチェックボックスは:checked状態になります。

`for`属性はそれを指定した<`label`>要素を、同じidを持つ<`input`>要素のチェックボックスに紐付けします。
`.switch::after`の指定によって、<`label`>要素の疑似要素で丸いトグルボタンを作ります。
`input[type='checkbox']:checked + .switch::after`は、チェックボックスが`checked`状態になった時に<`label`>要素の疑似要素に指定されるスタイルを定義します。
`transform: translateX(20px)`で疑似要素(トグルボタン)を右方向に`20px`、チェックボックスが`checked`状態になった時に移動させます。
`background-color: #7983ff;`の指定で、`checked`状態になった時にスイッチの背景色を変化させます。
`.offscreen`クラスには、実際トグルスイッチの外装に必要がない<`input`>要素のチェックボックスをドキュメント構造から独立させて画面外の遠くに移動させるためのプロパティを指定します。しかしそれを完全に隠してしまうわけではないので、キーボードや画面読み上げ機能を通せばアクセスすることは可能です。
`transition: all 0.3s`でチェックボックスが`check`状態になった時は、<`label`>要素に適用されている全て、つまり`background-color`と、その疑似要素の`transform`プロパティは0.3秒掛けてトランジションします。

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

３５．トランスフォームで中央配置- Transform centering

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

position: absoluteとtransform: translate()を使って親要素の中で子要素を縦・横両方向に中央配置しよう。(flexboxやdisplay: tableを使う方法の代替手段)
flexboxでの方法同じく、親要素と子要素両方の縦幅横幅が分からなくても機能するので、レスポンシブなアプリケーションに適している。

<<説明>>