30 Seconds of CSS日本語訳②

「30 Seconds of CSS」

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

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

目次:

5.高さの比率に対して一定の横幅 – Constant width to height ratio

6.自動連番 – Counter

7.スクロールバーのカスタマイズ – Custom scrollbar

8.テキスト選択範囲のカスタマイズ – Custom text selection

 

5.高さの比率に対して一定の横幅 – Constant width to height ratio

https://30-seconds.github.io/30-seconds-of-css/#constant-width-to-height-ratio

要素に可変の横幅を与えることで、レスポンシブデザインでも高さが釣り合う状態を保持できるようになる。(言い換えれば、その要素の高さに対する横幅の比率が一定になる)

<<説明>>

::before疑似要素に指定されたpadding-topによって、要素の高さは横幅に指定されている%と同じ値になります。従って100%という値を指定することでその要素の高さが常にその横幅の100%になり、レスポンシブな正方形を作り出せるのです。
(訳者補足:縦横関係なく、%を値に持つpaddingは横幅を基準にした%の長さを取るようです。)
この方法は、この要素の中に中身を正常に配置することにも使えるでしょう。

6.自動連番 – Counter

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

カウンターとは要するにCSSによって運用される変数であり、使用された回数に適用されるCSSのルールに従って、その変数の値は追加されていく。

<<説明>>

連番の入ったリストがどんなHTMLタグでも作れます。

  1. counter-resetはカウンターの変数を初期化するプロパティで、値には対象となる任意のカウンター名を取ります。デフォルト値では、カウンターは0からのスタートです。またこのプロパティは初期値を特定の値に変えることも出来ます。
  2. counter-incrementはカウントされる要素に指定します。一度counter-resetによって初期値になったカウンターの値が増加あるいは減少を開始します。
  3. counter(name, style)で、その項目ごとのカウンターの値を表示します。一般的に疑似要素のcontentプロパティ内で使用します。この機能は2つのパラメータを持ち、1つ目はカウンターの名前、2つ目はdecimalとupper-romanのどちらかです。(初期値はdecimal)
    (※訳者注:この機能はサンプルでは使用されていません。)
  4. counters(counter, string, style)もまた、その項目ごとのカウンターの値を表示し、一般的に疑似要素のcontentプロパティ内で使用します。この機能は3つのパラメーターを持っています。1つ目はそのカウンターの任意の名前、2つ目はカウンターの数値の後に来る任意の文字列、3つ目はdecimalとupper-romanのどちらかです。(初期値はdecimal)
  5. CSSカウンターは特に概要のリストを作る際に便利でしょう、なぜなら子要素の中には自動的に新しい階層のカウンターが作成されるからです。counters()の機能を使うことで、階層が違う入れ子状のカウンターたちの間に区切り用の文字列を挿入することも出来ます。

7.スクロールバーのカスタマイズ – Custom scrollbar

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

スクロールバーのスタイルをドキュメントやバー付きの要素によってカスタマイズしよう。(WebKit 系プラットフォーム限定)

  1. ::-webkit-scrollbarはスクロールバー要素全体にスタイルを指定します。
  2. ::-webkit-scrollbar-trackはスクロールバートラックの要素(上下するパーツとそのレール部分)にスタイルを指定します。
  3. ::-webkit-scrollbar-thumbはスクロールバーサムの要素(上下するパーツ)にスタイルを指定します。

この他にもたくさんのスクロールバー用疑似クラスが用意されています。もしそれらも知りたい場合は、WebKit Blogをご覧ください。

スクロールバーのスタイルはどの標準化過程にも載っていないと思われます。
(訳者注:前述のとおりWebKit 系のSafariやChromeでのみ使用可)

 

8.テキスト選択範囲のカスタマイズ – Custom text selection

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

テキスト選択範囲(クリックやドラッグした時)のスタイルを変えよう。

::selectionはある要素の中のテキストが選択されたときに指定するスタイルを定義します。ただし他のセレクタをその前に結合して使わない場合は、指定したスタイルはドキュメントのルートレベルに適用され、選択可能な全ての要素が対象になるという点に留意してください。

 

—-

「チーズ・イン・ザ・トラップ」という個人的に近年最高の少女漫画があって、今までLINE漫画やXOYで読んでいたのですがこの夏についに書籍化されました。(韓国の漫画なので本国では普通に売ってたみたいなんですが)翻訳版がついに発売されて本当に嬉しくてすぐ買ったんですが、厚さの割に話が進まな…というか、スマホだとサクサク読めるけど思ったより長い話なんだなと実感しました。早く3.4巻出して欲しい。

コメントを残す

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