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

第一回：[30 Seconds of CSS日本語訳１～１２](https://qiita.com/tama441/items/7c6b1e7689e993979eb9)
第二回：[30 Seconds of CSS日本語訳１３～２４](https://qiita.com/tama441/items/76a1a845021800b036de)
に引き続き、CSSお役立ち小ネタ集

[**『30 Seconds of CSS』**](https://30-seconds.github.io/30-seconds-of-css/)

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

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

|目次|
|:-----------------|
|２５．: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

&nbsp;
##２５．:notセレクタ - :not selector
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#not-selector">https://30-seconds.github.io/30-seconds-of-css/#not-selector</a></span>

<img class="alignnone size-full wp-image-356" src="http://blackshepherd.net/wp-content/uploads/2018/10/not-selector.jpg" alt="" width="348" height="132" />

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

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

##２６．要素を非表示にする - Offscreen
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#offscreen">https://30-seconds.github.io/30-seconds-of-css/#offscreen</a></span>

<img class="alignnone size-full wp-image-358" src="http://blackshepherd.net/wp-content/uploads/2018/10/Offscreen2.jpg" alt="" width="369" height="102" /> <img class="alignnone size-full wp-image-357" src="http://blackshepherd.net/wp-content/uploads/2018/10/Offscreen1.jpg" alt="" width="577" height="204" />

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>ボーダーをすべて取り除きます。</li>
 	<li>`clip`の指定で要素の一部分も表示されない様にします。</li>
 	<li>要素の高さと横幅を`1px`にします。</li>
 	<li>`margin: -1px`で要素の高さと横幅を打ち消しましょう。</li>
 	<li>要素からはみ出た内容を非表示にしましょう。</li>
 	<li>パディングを全て取り除きます。</li>
 	<li>`osition: absolute`の指定でその要素が要素としての空間を取らないようにします。</li>
</ol>
(`clip`は技術的に賛否がありますが、新しくできた`clip-path`は現在サポートしているブラウザが非常に限られているのです。)

##２７．スクロール要素の下端に白いぼかしを入れる - Overflow scroll gradient
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#overflow-scroll-gradient">https://30-seconds.github.io/30-seconds-of-css/#overflow-scroll-gradient</a></span>

<img class="alignnone size-full wp-image-359" src="http://blackshepherd.net/wp-content/uploads/2018/10/Overflow-scroll-gradient.jpg" alt="" width="333" height="266" />

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

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

##２８．パッと出て来るメニュー - Popout menu
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#popout-menu">https://30-seconds.github.io/30-seconds-of-css/#popout-menu</a></span>

<img class="alignnone size-full wp-image-360" src="http://blackshepherd.net/wp-content/uploads/2018/10/Popout-menu.jpg" alt="" width="232" height="143" />

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

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

##２９．良い感じのアンダーライン - Pretty text underline
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#pretty-text-underline">https://30-seconds.github.io/30-seconds-of-css/#pretty-text-underline</a></span>

<img class="aligncenter size-full wp-image-399" src="http://blackshepherd.net/wp-content/uploads/2018/10/Pretty-text-underline.jpg" alt="" width="511" height="96" />

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

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

##３０．全てのスタイルの初期化 - Reset all styles
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#reset-all-styles">https://30-seconds.github.io/30-seconds-of-css/#reset-all-styles</a></span>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

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

<span style="color: #ff6600;"><span style="font-size: 18pt;">&#x26a0;</span><span style="color: #808080;">MS Edgeでの導入は現状検討段階です。</span></span>

##３１．シェイプされた仕切り線 - Shape separator
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#shape-separator">https://30-seconds.github.io/30-seconds-of-css/#shape-separator</a></span>

<img class="aligncenter size-full wp-image-400" src="http://blackshepherd.net/wp-content/uploads/2018/10/Shape-separator.jpg" alt="" width="801" height="108" />

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

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

##３２．色が薄らぐ兄弟要素 - Sibling fade
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#sibling-fade">https://30-seconds.github.io/30-seconds-of-css/#sibling-fade</a></span>

<img class="aligncenter size-full wp-image-401" src="http://blackshepherd.net/wp-content/uploads/2018/10/Sibling-fade.jpg" alt="" width="541" height="92" />

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

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

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

##３３．OS内蔵のフォント- System font stack
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#system-font-stack">https://30-seconds.github.io/30-seconds-of-css/#system-font-stack</a></span>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

ブラウザーは並んでいるフォントの中で、手前から順番に使用できるフォントを探し、もし(システム上やCSSに定義された中に)見つからなければその次のフォントをチェックします。
<ol>
 	<li><strong>`-apple-system`</strong>はiOSやmacOS(ただしChromeは別)で使われているSan Franciscoフォントです。</li>
 	<li><strong>`BlinkMacSystemFont`</strong>はmacOSのChromeで使用されているSan Franciscoフォントです。</li>
 	<li><strong>`Segoe UI`</strong>は Windows 10で使われています。</li>
 	<li><strong>`Roboto`</strong>はAndroid固有のフォントです。</li>
 	<li><strong>`Oxygen-Sans`</strong>はGNU+Linux上で使われています。</li>
 	<li><strong>`Ubuntu`</strong>はLinuxで使われるフォントです。</li>
 	<li><strong>`"Helvetica Neue"`</strong>と<strong>`Helvetica`</strong>はmacOS 10.10とそれ以前のバージョンで使用されたフォントです。(クォートで囲んでいるのは、名前に空白を含んでいるから)</li>
 	<li><strong>`Arial`</strong>は全てのOSでサポートされているフォントです。</li>
 	<li><strong>`sans-serif`</strong>はもし上記のフォント全てが使用できなかった場合のフォールバックとして指定するサンセリフ体のフォントです。</li>
</ol>

##３４．トグルスイッチ- Toggle switch
<a href="https://30-seconds.github.io/30-seconds-of-css/#toggle-switch"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#toggle-switch</span></a>

<a href="http://blackshepherd.net/wp-content/uploads/2018/10/Toggle-switch1.jpg"><img class="size-full wp-image-418 alignleft" src="http://blackshepherd.net/wp-content/uploads/2018/10/Toggle-switch1.jpg" alt="" width="196" height="96" /></a> <a href="http://blackshepherd.net/wp-content/uploads/2018/10/Toggle-switch2.jpg"><img class="alignnone size-full wp-image-419" src="http://blackshepherd.net/wp-content/uploads/2018/10/Toggle-switch2.jpg" alt="" width="190" height="97" /></a>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

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

##３５．トランスフォームで中央配置- Transform centering
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#transform-centering">https://30-seconds.github.io/30-seconds-of-css/#transform-centering</a></span>

<a href="http://blackshepherd.net/wp-content/uploads/2018/10/Transform-centering.jpg"><img class="alignnone size-full wp-image-420" src="http://blackshepherd.net/wp-content/uploads/2018/10/Transform-centering.jpg" alt="" width="305" height="318" /></a>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`position: absolute`を子要素に指定することで、子要素をその親要素であるコンテナとの位置関係で配置できるようになります。</li>
 	<li>`left: 50%`と`top: 50%`で子要素を、コンテナ要素の左端と上端からコンテナ要素の幅50％分それぞれ移動させます。</li>
 	<li>`transform: translate(-50%, -50%)`の指定で、子要素の高さと横幅がコンテナ内で相殺され、縦・横方向に中央配置されます。</li>
</ol>
注：親要素の高さと横幅を固定しているのはデモだからです。

<span style="color: #ff6600;"><span style="font-size: 18pt;">&#x26a0;</span><span style="color: #808080;">ブラウザへのフルサポートには各プレフィクスが必要です。</span></span>

##３６．三角形- Triangle
<a href="https://30-seconds.github.io/30-seconds-of-css/#triangle"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#triangle</span></a>

<a href="http://blackshepherd.net/wp-content/uploads/2018/10/Triangle.jpg"><img class="alignnone size-full wp-image-421" src="http://blackshepherd.net/wp-content/uploads/2018/10/Triangle.jpg" alt="" width="116" height="96" /></a>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>

<a href="https://stackoverflow.com/questions/7073484/how-do-css-triangles-work">詳細な説明はこちらをご覧ください。</a>

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

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

##３７．省略されたテキスト- Truncate text
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#truncate-text">https://30-seconds.github.io/30-seconds-of-css/#truncate-text</a></span>

<a href="http://blackshepherd.net/wp-content/uploads/2018/10/Truncate-text.jpg"><img class="alignnone size-full wp-image-422" src="http://blackshepherd.net/wp-content/uploads/2018/10/Truncate-text.jpg" alt="" width="263" height="133" /></a>

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

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`overflow: hidden`でテキストがその表示領域(ブロック要素の横幅`100%`と高さ`auto`)からオーバーフローしないようにします。</li>
 	<li>`white-space: nowrap`でテキストが一行以上の高さになるのを防ぎます。</li>
 	<li>`text-overflow: ellipsis`により、テキストがブロックの寸法を超えた場合、省略記号で終わるようになります。</li>
 	<li>`width: 200px;`で要素の幅を決めるのは、どの地点で省略されるかを明らかにするためです。</li>
</ol>


<span style="color: #ff6600;"><span style="font-size: 18pt;">&#x26a0;</span><span style="color: #808080;">一行の要素でのみ機能します。</span></span>