30 Seconds of CSS日本語訳⑤

「30 Seconds of CSS」

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

静止画でも分かる効果についてはスクショを添えることにしました。

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

17.フレックスボックス内の中央配置 – Flexbox centering

18.テキストグラデーション – Gradient text

19.グリッド要素内の中央配置 – Grid centering

20.髪の毛様に細いボーダー – Hairline border

17.フレックスボックス内の中央配置 – Flexbox centering

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

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

<<説明>>

  1. display: flexでフレックスボックスを作ります。
  2. justify-content: centerで水平方向に子要素を中央配置します。
  3. align-items: centerで垂直方向に子要素を中央配置します。

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

18.テキストグラデーション – Gradient text

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

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

<<説明>>

  1. background: -webkit-linear-gradient(…)でテキストを含む要素の背景にグラデーションを掛けます。
  2. webkit-text-fill-color: transparentはそのテキストの色を透明色で塗りつぶします。
  3. webkit-background-clip: textで背景を文字の形に切り抜き、その結果テキストは背景のグラデーションで塗りつぶされます。

標準化されていないプロパティを使用しています。(webkit系プラットフォームでのみ使用可)

19.グリッド要素内の中央配置 – Grid centering

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

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

<<説明>>

  1. display: gridでグリッド要素を作ります。
  2. justify-content: centerで水平方向に子要素を中央配置します。
  3. align-items: centerで垂直方向に子要素を中央配置します。

20.髪の毛の様に細いボーダー – Hairline border

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

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

<<説明>>

  1. box-shadowは4番目の拡大の数値だけ指定した場合、サブピクセル*(1pxを構成する色の粒)を使用できる疑似ボーダーを要素に付与します。
  2. @media (min-resolution: …)メディアクエリを使って、そのデバイスのデバイス・ピクセル比(1dppxは96 DPIに等しい)を調べ、box-shadowの拡大値を1 / dppxと等しくなるように調整しましょう。

代替手段としてのシンタックスやJavaScriptユーザーエージェントでフルサポートされているかをチェックする必要があります。

*Chromeはborderにサブピクセル値を使うことをサポートしていません。Safariはbox-shadowにサブピクセル値を使うことをサポートしていません。そしてFirefox はその両方をサポートしています。

 


 

やっぱりちゃんと翻訳してみると、最初読んだ時に「分かったような分からんような感じだけど、効果自体は分かったしまぁ良いか」と流していた部分が理解できたりして、やって良かったと思いますね。

Hairline borderなんか正直なんでborderを使わないのか意味わかってなかったんですけど、今回読んだら恐らく「borderに小数点以下の幅を指定できないブラウザが多いから」だということが分かりました。(違ったらすみません、教えてください…)

コメントを残す

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