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

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

『30 Seconds of 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を使うとドキュメント構造の中で要素の入るスペースを保持してしまいます。

<<説明>>

1. ボーダーをすべて取り除きます。


2. clipの指定で要素の一部分も表示されない様にします。


3. 要素の高さと横幅を1pxにします。


4. margin: -1pxで要素の高さと横幅を打ち消しましょう。


5. 要素からはみ出た内容を非表示にしましょう。


6. パディングを全て取り除きます。


7. osition: absoluteの指定でその要素が要素としての空間を取らないようにします。

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

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

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

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

<<説明>>

1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。


2. ::afterによって疑似要素を定義します。


3. background-image: linear-gradient(...)で上から下に、透明から白(背景色)へと薄れていくグラデーションを要素に乗せます。


4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。


5. width: 240pxはスクロールできる要素の幅と同じです。(スクロール要素はグラデーションを付けた疑似要素を持った親要素の子要素に当たります)


6. height: 25pxは薄れていくグラデーション疑似要素の高さで、それは本体と比較して短くするべきでしょう。


7. bottom: 0で疑似要素の底部が本体要素の一番下に来るようにします。


8. pointer-events: noneの指定によって、疑似要素にマウスポインタが当たらないようになり、そのまま背後の文章を選択出来るインタラクティブな状態を保持できます。

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

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

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

<<説明>>

1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。


2. position: absoluteを指定することで、ポップアウト要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。


3. left: 100%でポップアウト要素は左端から親要素の幅100%分移動します。


4. visibility: hiddenで最初はポップアウト要素は非表示にしつつ、トランジションが使用できる状態にします。(display: noneでは使用出来ない)


5. .reference:hover > .popout-menuで、.reference要素がホバーされたときに、その子要素にあたる.popout-menuクラスの要素にそのプロパティが持つvisibilityの値をvisibleに変えるよう指定し、ポップアウト要素を出現させます。


6. .reference:focus > .popout-menuで、.reference要素がフォーカスされたときにポップアウト要素が出現するよう指定します。


7. .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などのベースラインから下に飛び出る文字。日本の文字には無い概念？なので英字やアラビア文字で有効な方法か)

<<説明>>

1. 文字の飛び出た分が下線に交差するところで下線がその「肉厚な」影に覆われて見えなくなるように、text-shadowを4つ指定して4ｘ4pxのエリア(上下左右に1pxづつずらす)をテキストに付与します。影色は背景と同じ色を指定しましょう。
   また、文字サイズが大きい場合は影のpx数を増やしましょう。数が大きければより太い影が出来ますし、逆に細くしたければサブピクセル（小数点以下）も使用できます。


2. background-image: linear-gradient(...)で背景に90度の方向(水平)のグラデーションを文字と同じ色で作ります。(currentColorという値で要素の文字色と同色が取得できます。)


3. 続く一連のbackground-*プロパティは、グラデーションを掛けた背景の幅を要素の100%、高さを1pxにして底辺に固定、繰り返しを無効にすることで、1px幅のアンダーラインをテキストの下に作り上げます。


4. ::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シェイプで作ってみよう。
(訳者：下の白い三角形の列を作る方法です)

<<説明>>

1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。


2. ::afterによって疑似要素を定義します。


3. background-image: url(...)の指定で、その疑似要素の背景にデフォルトで繰り返して並べられるSVGシェイプ(24ｘ12の三角形)が生成されます。それは分離されるブロック(下側)と同じ色でなければなりません。また別の形が良ければ、the URL-encoder for SVGが使えるでしょう。


4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。


5. width: 100%で要素をその親要素いっぱいの横幅になるようにします。


6. height: 12pxはSVGシェイプと同じ高さです。


7. 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に定義された中に)見つからなければその次のフォントをチェックします。

1. -apple-systemはiOSやmacOS(ただしChromeは別)で使われているSan Franciscoフォントです。


2. BlinkMacSystemFontはmacOSのChromeで使用されているSan Franciscoフォントです。


3. Segoe UIは Windows 10で使われています。


4. RobotoはAndroid固有のフォントです。


5. Oxygen-SansはGNU+Linux上で使われています。


6. UbuntuはLinuxで使われるフォントです。


7. "Helvetica Neue"とHelveticaはmacOS 10.10とそれ以前のバージョンで使用されたフォントです。(クォートで囲んでいるのは、名前に空白を含んでいるから)


8. Arialは全てのOSでサポートされているフォントです。


9. sans-serifはもし上記のフォント全てが使用できなかった場合のフォールバックとして指定するサンセリフ体のフォントです。

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

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

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

<<説明>>

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

1. for属性はそれを指定した<label>要素を、同じidを持つ<input>要素のチェックボックスに紐付けします。


2. .switch::afterの指定によって、<label>要素の疑似要素で丸いトグルボタンを作ります。


3. input[type='checkbox']:checked + .switch::afterは、チェックボックスがchecked状態になった時に<label>要素の疑似要素に指定されるスタイルを定義します。


4. transform: translateX(20px)で疑似要素(トグルボタン)を右方向に20px、チェックボックスがchecked状態になった時に移動させます。


5. background-color: #7983ff;の指定で、checked状態になった時にスイッチの背景色を変化させます。


6. .offscreenクラスには、実際トグルスイッチの外装に必要がない<input>要素のチェックボックスをドキュメント構造から独立させて画面外の遠くに移動させるためのプロパティを指定します。しかしそれを完全に隠してしまうわけではないので、キーボードや画面読み上げ機能を通せばアクセスすることは可能です。


7. 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での方法同じく、親要素と子要素両方の縦幅横幅が分からなくても機能するので、レスポンシブなアプリケーションに適している。

<<説明>>

1. position: absoluteを子要素に指定することで、子要素をその親要素であるコンテナとの位置関係で配置できるようになります。


2. left: 50%とtop: 50%で子要素を、コンテナ要素の左端と上端からコンテナ要素の幅50％分それぞれ移動させます。


3. transform: translate(-50%, -50%)の指定で、子要素の高さと横幅がコンテナ内で相殺され、縦・横方向に中央配置されます。

注：親要素の高さと横幅を固定しているのはデモだからです。

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

３６．三角形- Triangle

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

CSSだけで三角形を作ってみよう。

<<説明>>

詳細な説明はこちらをご覧ください。

ボーダーの色が三角形の色になります。また、三角形の頂角は反対側のborder-*プロパティに対応しています。例えば、border-topにだけ色を付けたら下向きの三角形が出来るでしょう。

pxの値を変えて三角形の大きさや形の変化を試してみましょう。

３７．省略されたテキスト- Truncate text

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

テキストが1行より長かった場合に、続きを省略して省略記号「…」を末尾に配置する方法。

<<説明>>

1. overflow: hiddenでテキストがその表示領域(ブロック要素の横幅100%と高さauto)からオーバーフローしないようにします。


2. white-space: nowrapでテキストが一行以上の高さになるのを防ぎます。


3. text-overflow: ellipsisにより、テキストがブロックの寸法を超えた場合、省略記号で終わるようになります。


4. width: 200px;で要素の幅を決めるのは、どの地点で省略されるかを明らかにするためです。

⚠一行の要素でのみ機能します。