30 Seconds of CSS日本語訳⑧

「30 Seconds of CSS」

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

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

29.良い感じのアンダーライン – Pretty text underline

30.全てのスタイルの初期化 – Reset all styles

31.シェイプされた仕切り線 – Shape separator

32.色が薄らぐ兄弟要素 – Sibling fade

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

30.全てのスタイルの初期化 – Reset all styles

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

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

<<説明>>

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

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

31.シェイプされた仕切り線 – 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シェイプ(24x12の三角形)が生成されます。それは分離されるブロック(下側)と同じ色でなければなりません。また別の形が良ければ、the URL-encoder for SVGが使えるでしょう。
  4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
  5. width: 100%で要素をその親要素いっぱいの横幅になるようにします。
  6. height: 12pxはSVGシェイプと同じ高さです。
  7. bottom: 0で疑似要素は親要素の底部に配置されます。

32.色が薄らぐ兄弟要素 – 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に変わります。

 


サイトレイアウトにgridを使ってみた感想というか分かったことをまとめた記事を書こうとして、改めてサンプルを作ってIEに対応させようとしたら出来なくて頑張ってたらやがて気持ち悪くなってきたので翻訳の方進めました。

翻訳は分からないにしてもまだどこがどう分からないのか分かるので精神衛生上良いですね…

ところで予備知識なしでブラピとか出て来る「seven」を見ちゃったんですけど、めちゃくちゃバッドエンドでビックリしちゃいましたね。
別にブラピ繋がりじゃないんですが、その前にベンジャミンバトンとか見てて、割とどっちもピンと来なかったんですが、こういう意味深胸糞ストーリーの方が考察厨的なファンが付きやすいのでsevenの方は感想で結構楽しめましたね。
てかハリウッドの大作って日曜洋画劇場とかの地上波放送モノしか見てなかったのでこういうのあるんだってビックリしました。よく考えたら当たり前なんすけど。。

コメントを残す

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