30 Seconds of CSS日本語訳①

なんとなくブログ更新から遠のいてしまっていたので、自分用のメモ程度ではありますが英語サイトの技術解説ページなどの翻訳をしてみたいと思います。
まずは一度読み通した「30 Seconds of CSS」

 

基本からちょっと知らなかったオッとなるものまでワンポイントCSSテクニックを分かりやすく紹介してくれる(語学レベル的にも)素晴らしいサイトです。
コードサンプル等は転載しないので、私の訳を参考にされる場合は英語タイトルを見て対照させてください。

…訳が間違っていたらコメント欄で教えていただけるとありがたいです!

目次:

1.はずむ読み込み – Bouncing loader

2.Box-sizingの初期化 – Box-sizing reset

3.真円 – Circle

4.クリアーフィクス – Clearfix

1.はずむ読み込み – Bouncing loader

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

はずむ読み込み動画を作ろう。

<<説明>>
注:1remは通例16pxとする。

  1. @keyframesで、要素の不透明度opacityの変化、またtransform: translateY()を使った要素の二次元平面上の移動という2つ状態を持ったアニメーションを定義します。
  2. .bouncing-loaderセレクタは跳ねる円形の親コンテナ要素なので、その子要素を中央に位置させるためにdisplay: flexとjustify-content: centerを指定します。
  3. .bouncing-loader > divセレクタは、親要素の中の3つのdivを対象にスタイルを指定します。div要素はそれぞれ1remの高さと幅を与えられ、border-radius: 50%の指定によって角が球状に丸められています。
  4. margin: 3rem 0.2remが各円形に指定している上下3rem、左右0.2remのマージンは、円形同士が接触しないように余白を作るためです。
  5. animationは各種アニメーションプロパティを表すためのショートハンドプロパティです。animation-name, animation-duration, animation-iteration-count, animation-directionプロパティが使用されています。
  6. nth-child(n)はその親要素の中のn番目の子要素を対象にする疑似クラスです。
  7. animation-delayは二番目と三番目の要素にそれぞれの値で使用されています。それによって、各々の要素が違うタイミングでアニメーションを開始するのです。

 

2.Box-sizingの初期化 – Box-sizing reset

https://30-seconds.github.io/30-seconds-of-css/#box-sizing-reset

要素の幅と高さがそれらに指定されたborderやpaddingの影響を受けないよう、ボックスモデルの初期化をしよう。

<<説明>>

  1. box-sizing: border-boxは追加したpaddingやborderが要素の幅や高さに影響を与えないようにします。
  2. box-sizing: inheritで、ある要素がその親要素のbox-sizing規則に従うようにします。

 

3.真円 – Circle

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

真円形の要素をCSSだけを使って作ろう。

<<説明>>

border-radius: 50%で要素のフチを湾曲させて真円を作ります。
真円というものは中心から辺のどの点までの距離も同じでなければならないので、要素の幅と高さは必ず同じにします。違う値にした場合は楕円が作られるでしょう。

 

4.クリアーフィクス – Clearfix

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

子要素のフロート解除を親要素で確実に行おう。
注:このテクニックは貴方がまだレイアウトにフロートを使っている場合のみ有効です。フレックスボックスやグリッドレイアウトを用いた近代的な手法の使用を検討してください。

<<説明>>

  1. .clearfix::afterで疑似要素にスタイルを指定します。
  2. content: ‘ ’を指定して、その疑似要素がレイアウトに影響を与えることを許可します。
  3. clear: bothはその要素の左右、あるいは両側の要素がclearを指定しているそのブロックの中で前出しているフロート要素に隣接できなくなることを示します。(この訳自信無し)

 

ーーー

最近36巻で一度買うの止めていたベルセルクを最新刊40巻まで買ったのですが、話しもまた面白くなってきてるし、なによりも一時期妙に間延びしていた顔の描き方が昔みたいなバランスに戻っているのが嬉しいです。絵柄の復活がキャスカの復活(?)に間に合ったのが本当に嬉しい。。。ウラケン先生の絵が大好きなので。

コメントを残す

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