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

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

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

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

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

|目次|
|:-----------------|
|１３．活き活きした影 - Dynamic shadow|
|１４．イージングの変数 - Easing variables|
|１５．刻まれた文字 - Etched text|
|１６．均等に配置された子要素 - Evenly distributed children|
|１７．フレックスボックス内の中央配置 - Flexbox centering|
|１８．テキストグラデーション - Gradient text|
|１９．グリッド要素内の中央配置 - Grid centering|
|２０．髪の毛様に細いボーダー - Hairline border|
|２１．高さの値の変化 - Height transition|
|２２．ホバー時の下線アニメーション - Hover underline animation|
|２３．最後尾のアイテムに残りの高さを取らせる - Last item with remaining available height|
|２４．カーソルに付いてくるグラデーション - Mouse cursor gradient tracking|

##１３．活き活きした影 - Dynamic shadow
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#dynamic-shadow">https://30-seconds.github.io/30-seconds-of-css/#dynamic-shadow</a></span>
<img class="alignnone size-full wp-image-327" src="http://blackshepherd.net/wp-content/uploads/2018/10/Dynamic-shadow.jpg" alt="" width="247" height="232" />

`box-shadow`に似た効果だけど、その要素自体のカラーリングに基づいている影を作ろう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`position: relative`は指定した要素の疑似要素に、直角座標的な位置関係を与えます。</li>
 	<li>`z-index: 1`は要素に新しく「層」の位置関係を与えます。</li>
 	<li>`::after`によって疑似要素を定義します。</li>
 	<li>`position: absolute`を指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。</li>
 	<li>`width: 100%`と`height: 100%`で疑似要素をその親要素の面積いっぱいにし、同じサイズにします。</li>
 	<li>`background: inherit`によって疑似要素は親要素に指定された`linear gradient`を自分の要素として引き継ぎます。</li>
 	<li>`top: 0.5rem`で疑似要素をわずかに下にズラします。</li>
 	<li>`filter: blur(0.4rem)`の指定で疑似要素をぼかすことで、物の下に出来た影っぽい印象を作ります。</li>
 	<li>`opacity: 0.7`で疑似要素は半透明になります。</li>
 	<li>`z-index: -1`の指定によって、疑似要素は親要素の後ろかつ背景の手前に位置されます。</li>
</ol>
<span style="color: #ff6600;"><span style="font-size: 18pt;">⚠</span><span style="color: #808080;">ブラウザへのフルサポートには各プレフィクスが必要です。</span></span>


##１４．イージングの変数 - Easing variables
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#easing-variables">https://30-seconds.github.io/30-seconds-of-css/#easing-variables</a></span>

`transition-timing-function`プロパティの中で使われる変数は、既存の設定値である`ease`, `ease-in`, `ease-out` ,`ease-in-out`よりも幅広く強力です。

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

`:root`疑似クラス内に定義された変数は、ドキュメントを構成する樹状に連なる要素の根っこ(root)の要素に適用されるため、グロバーバル変数として機能します。HTMLの中で`:roo`tは`<html>`タグを表し、`:root`の方が詳細度が高いこと以外はまったく`html`セレクタと同一です。


##１５．刻まれた文字 - Etched text
<a href="https://30-seconds.github.io/30-seconds-of-css/#etched-text"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#etched-text</span></a>
<img class="alignnone size-full wp-image-328" src="http://blackshepherd.net/wp-content/uploads/2018/10/Etched-text.jpg" alt="" width="463" height="148" />

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

`text-shadow: 0 2px white`で要素の文字位置から横に`0px`、縦に`2px`ズレた白い影を作ります。

効果を出すためには背景は白い影より暗い色である必要があります。

背景に刻み込まれた、あるいは掘られたみたいに見える様に、テキスト色はわずかに彩度の低い暗色にしましょう。

##１６．均等に配置された子要素 - Evenly distributed children
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#evenly-distributed-children">https://30-seconds.github.io/30-seconds-of-css/#evenly-distributed-children</a></span>
<img class="alignnone size-full wp-image-329" src="http://blackshepherd.net/wp-content/uploads/2018/10/Evenly-distributed-children.jpg" alt="" width="744" height="130" />

子要素を親要素の中に均等に配置しよう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`display: flex`でフレックスボックスを作ります。</li>
 	<li>`justify-content: space-between`に指定することで子要素は横方向に均等配置されます。最初のアイテムは左端に位置され、最後のアイテムは右端に位置されます。</li>
</ol>
あるいは、`justify-content: space-around`を使うと子要素は`space-between`よりも周囲にスペースを持って配置されます。

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


##１７．フレックスボックス内の中央配置 - Flexbox centering
<a href="https://30-seconds.github.io/30-seconds-of-css/#flexbox-centering"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#flexbox-centering</span></a>

<img class="alignnone wp-image-330 size-full" src="http://blackshepherd.net/wp-content/uploads/2018/10/Flexbox-centering.jpg" alt="" width="758" height="174" />

`flexbox`を使った親要素の中で子要素を縦・横両方に中央配置しよう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`display: flex`でフレックスボックスを作ります。</li>
 	<li>`justify-content: centerで`水平方向に子要素を中央配置します。</li>
 	<li>`align-items: center`で垂直方向に子要素を中央配置します。</li>
</ol>
<span style="color: #ff6600;"><span style="font-size: 18pt;">⚠</span><span style="color: #808080;">ブラウザへのフルサポートには各プレフィクスが必要です。</span></span>


##１８．テキストグラデーション - Gradient text
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#gradient-text">https://30-seconds.github.io/30-seconds-of-css/#gradient-text</a></span>

テキストにグラデーションカラーを適用しよう。

<img class="alignnone wp-image-331 size-full" src="http://blackshepherd.net/wp-content/uploads/2018/10/Gradient-text.jpg" alt="" width="505" height="130" />

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`background: -webkit-linear-gradient(...)`でテキストを含む要素の背景にグラデーションを掛けます。</li>
 	<li>`webkit-text-fill-color: transparent`はそのテキストの色を透明色で塗りつぶします。</li>
 	<li>`webkit-background-clip: text`で背景を文字の形に切り抜き、その結果テキストは背景のグラデーションで塗りつぶされます。</li>
</ol>
<span style="color: #ff6600;"><span style="font-size: 18pt;">⚠</span><span style="color: #808080;">標準化されていないプロパティを使用しています。(webkit系プラットフォームでのみ使用可)</span></span>


##１９．グリッド要素内の中央配置 - Grid centering
<a href="https://30-seconds.github.io/30-seconds-of-css/#grid-centering"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#grid-centering</span></a>

<img class="alignnone wp-image-332 size-full" src="http://blackshepherd.net/wp-content/uploads/2018/10/Grid-centering.jpg" alt="" width="752" height="176" />

`grid`を使った親要素の中で子要素を縦・横両方に中央配置しよう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`display: grid`でグリッド要素を作ります。</li>
 	<li>`justify-content: center`で水平方向に子要素を中央配置します。</li>
 	<li>`align-items: center`で垂直方向に子要素を中央配置します。</li>
</ol>


##２０．髪の毛の様に細いボーダー - Hairline border
<a href="https://30-seconds.github.io/30-seconds-of-css/#hairline-border"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#hairline-border</span></a>

<img class="alignnone wp-image-333 size-full" src="http://blackshepherd.net/wp-content/uploads/2018/10/Hairline-border.jpg" alt="" width="745" height="96" />

とてもシャープでパッキリとした印象を与える、どのデバイスで見ても1px幅のボーダーを要素に付けてみよう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`box-shadow`は4番目の拡大の数値だけ指定した場合、サブピクセル*(1pxを構成する色の粒)を使用できる疑似ボーダーを要素に付与します。</li>
 	<li>`@media (min-resolution: ...)`メディアクエリを使って、そのデバイスのデバイス・ピクセル比(1dppxは96 DPIに等しい)を調べ、`box-shadow`の拡大値を1 / dppxと等しくなるように調整しましょう。</li>
</ol>
<span style="color: #ff6600;"><span style="font-size: 18pt;">⚠</span><span style="color: #808080;">代替手段としてのシンタックスやJavaScriptユーザーエージェントでフルサポートされているかをチェックする必要があります。</span></span>
&nbsp;
*Chromeは`border`にサブピクセル値を使うことをサポートしていません。Safariは`box-shadow`にサブピクセル値を使うことをサポートしていません。そしてFirefox はその両方をサポートしています。

##２１．高さの値の変化 - Height transition
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#height-transition">https://30-seconds.github.io/30-seconds-of-css/#height-transition</a></span>

<span style="color: #3366ff;"><img class="alignnone size-full wp-image-343" src="http://blackshepherd.net/wp-content/uploads/2018/10/Height-transition.jpg" alt="" width="424" height="124" /></span>

<span style="color: #3366ff;">※JavaScriptが必要</span>

要素の高さが分からない時に、要素の高さを`0`から`auto`に変化させるトランジションを作ろう。

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

<strong>CSS</strong>
<ol>
 	<li>`transition: max-height: 0.5s cubic-bezier(...)`で、要素の`max-height`になるまで0.5秒掛かり、`ease-out-quint`の動きをするイージングを持ったトランジションを指定する。
(訳者：デモには`cubic-bezier(...)`使われてないですよね、謎…)</li>
 	<li>`overflow: hidden`でコンテンツ内の非表示になっている要素がコンテナからはみ出るのを防ぎます。</li>
 	<li>`max-height: 0`の指定によって初期状態の要素の高さを0にします。</li>
 	<li>`.target:hover > .el`という形で指定することで、親要素の.targetがホバー状態になった時に、その中にある.elクラスにJavaScriptで定義した変数`--max-height`が適用されます。
(訳者注：`.target`はデモ中では`.trigger`というクラス名です。)</li>
</ol>
<strong>JavaScript</strong>
<ol>
 	<li>`el.scrollHeight`ではみ出る分も含めた、中身の量に従って更新される要素の高さを取得します。</li>
 	<li>`el.style.setProperty(...)`で`.target`クラスがホバー状態になった時に`.el`クラスの`max-height`の値にCSS変数の`--max-heigh`tを設定し、`0`から`auto`までのスムーズなトランジションを起こします。</li>
</ol>
<span style="color: #ff6600;"><span style="font-size: 18pt;">⚠</span><span style="color: #808080;">アニメーションのコマごとに発生するreflow(JavaScriptの要素の表示位置などの取得)が原因で、要素の下に隠された、高さの変化に影響を与える要素の量が膨大な場合には動きのガク付きが起きるでしょう。</span></span>

##２２．ホバー時の下線アニメーション - Hover underline animation
<a href="https://30-seconds.github.io/30-seconds-of-css/#hover-underline-animation"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#hover-underline-animation</span></a>

<img class="alignnone size-full wp-image-344" src="http://blackshepherd.net/wp-content/uploads/2018/10/Hover-underline-animation.jpg" alt="" width="327" height="71" />

テキストがホバー状態になった時に効果的に動く下線を作ろう。

<strong>出展:</strong> <a href="https://flatuicolors.com/" target="_blank" rel="noopener">https://flatuicolors.com/</a>

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`display: inline-block`は`<p>`タグを`block`要素から`inline-block`要素に変え、要素のアンダーラインがその親要素の幅全部ではなく、コンテンツとなる文章の下にのみ広がるようにします。</li>
 	<li>`position: relative`は指定した要素の疑似要素に、直角座標的な位置関係を与えます。</li>
 	<li>`::after`によって疑似要素を定義します。</li>
 	<li>`position: absolute`を指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。</li>
 	<li>`width: 100%`の指定で疑似要素はその本体のテキスト入り要素いっぱいの横幅を確保します。</li>
 	<li>`transform: scaleX(0)`で最初は疑似要素の大きさを0にして、幅の無い見えない状態にしておきます。</li>
 	<li>`bottom: 0`と`left: 0`は疑似要素を本体要素の左下に配置させます。</li>
 	<li>`transition: transform 0.25s ease-out`は、`transform`プロパティが0.25秒かけて`ease-out`のイージングで変化することを意味しています。</li>
 	<li>`transform-origin: bottom right`は、 `transform`プロパティの変化の基準点が本体要素の右下に位置していていることを示します。</li>
 	<li>`:hover::after`で本体要素にホバーした時、疑似要素は`scaleX(1)`の指定で幅が`100％`になり、`transform-origin`の値が`bottom left`に変わることで変化の基準点が逆転します。それによりホバーが解除された時の変化の戻り方が逆方向になります。</li>
</ol>

##２３．最後尾のアイテムに残りの高さを取らせる - Last item with remaining available height
<a href="https://30-seconds.github.io/30-seconds-of-css/#last-item-with-remaining-available-height"><span style="color: #3366ff;">https://30-seconds.github.io/30-seconds-of-css/#last-item-with-remaining-available-height</span></a>

<img class="alignnone size-full wp-image-345" src="http://blackshepherd.net/wp-content/uploads/2018/10/Last-item-with-remaining-available-height.jpg" alt="" width="471" height="467" />

親要素内の最後尾の子要素に、ウィンドウのサイズと一緒に変化する表示域の中でまだ残されたスペースを与えてビューポートの利用可能域を有効活用しよう。

<span style="font-size: 14pt;"><strong><span style="color: #3366ff;">&lt;&lt;説明&gt;&gt;</span></strong></span>
<ol>
 	<li>`height: 100%`でコンテナにビューポート(画面表示域)と同じ高さを与えます。</li>
 	<li>`display: flex`でフレックスボックスを作ります。</li>
 	<li>`flex-direction: column`でフレックスアイテムの並び順を上から下への縦方向に変えます。</li>
 	<li>`flex-grow: 1`の指定でフレックスボックスはコンテナの中の残ったスペースを最後尾の要素に割り当てるでしょう。</li>
</ol>
親要素は必ずビューポートと同じ高さを取らなければなりません。また`flex-grow: 1`は1番目の要素にも2番目の要素にも同じように適用して、利用可能な限りのスペースを割り当てるでしょう。

##２４．カーソルに付いてくるグラデーション - Mouse cursor gradient tracking
<span style="color: #3366ff;"><a style="color: #3366ff;" href="https://30-seconds.github.io/30-seconds-of-css/#mouse-cursor-gradient-tracking">https://30-seconds.github.io/30-seconds-of-css/#mouse-cursor-gradient-tracking</a></span>

<img class="alignnone size-full wp-image-346" src="http://blackshepherd.net/wp-content/uploads/2018/10/Mouse-cursor-gradient-tracking.jpg" alt="" width="197" height="100" />

<span style="color: #3366ff;">※JavaScriptが必要</span>

マウスカーソルが乗ったところに反応するグラデーションのホバー効果

<strong>出展：</strong> <a href="https://codepen.io/electerious/pen/MQrRxX" target="_blank" rel="noopener">Tobias Reich</a>

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

TODO(訳者：後で追記します…という意味ですよね？)