30 Seconds of CSS日本語訳④

「30 Seconds of CSS」

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

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

13.活き活きした影 – Dynamic shadow

14.イージングの変数 – Easing variables

15.刻まれた文字 – Etched text

16.均等に配置された子要素 – Evenly distributed children

13.活き活きした影 – Dynamic shadow

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

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

<<説明>>

  1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。
  2. z-index: 1は要素に新しく「層」の位置関係を与えます。
  3. ::afterによって疑似要素を定義します。
  4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
  5. width: 100%とheight: 100%で疑似要素をその親要素の面積いっぱいにし、同じサイズにします。
  6. background: inheritによって疑似要素は親要素に指定されたlinear gradientを自分の要素として引き継ぎます。
  7. top: 0.5remで疑似要素をわずかに下にズラします。
  8. filter: blur(0.4rem)の指定で疑似要素をぼかすことで、物の下に出来た影っぽい印象を作ります。
  9. opacity: 0.7で疑似要素は半透明になります。
  10. z-index: -1の指定によって、疑似要素は親要素の後ろかつ背景の手前に位置されます。

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

14.イージングの変数 – Easing variables

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

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

<<説明>>

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

15.刻まれた文字 – Etched text

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

<<説明>>

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

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

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

16.均等に配置された子要素 – Evenly distributed children

https://30-seconds.github.io/30-seconds-of-css/#evenly-distributed-children

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

<<説明>>

  1. display: flexでフレックスボックスを作ります。
  2. justify-content: space-betweenに指定することで子要素は横方向に均等配置されます。最初のアイテムは左端に位置され、最後のアイテムは右端に位置されます。

あるいは、justify-content: space-aroundを使うと子要素はspace-betweenよりも周囲にスペースを持って配置されます。

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

 

 


窪塚洋介の「GO」見てるけどすっごい面白いですね。メンタル弱いのでハッピーエンドで良かったなと思いました。
ところで柴咲コウのあの髪型から来る先入観によるものかもしれないアスカっぽさ、なんなんでしょうね?

なんかいきなり語りだしますが、自分としては特に親友のジョンイルが死ぬシーンが胸に残っています。ナイフをお守りとして持たされた少年、しかし刺した瞬間の覚悟も、意思も、ナイフと共に突き出した感情も何も無い表情が凄い。アングルが変わって傷を見るまで即死するような傷だと思わせませなかった。

ジョンイルが今わの際に見た杉原のレールを走る姿も非常に印象的。
葬式の後に主人公の杉原はジョンイルの影響でハマった落語の寄席に行って、ジョンイルが最後に貸してくれたロミオとジュリエットの、彼が一番感銘を受けた「薔薇と呼んでいる花を別の名前にしてみても、美しい香りはそのまま」という一節を読んで涙を流す。笑いの場に深い悲しみがある構図のアンバランスさと、青春小説らしい絶妙に明快なメッセージ性が素晴らしいと思った。

つまり、「なにかの本質、本当の価値を知っている者にとって、そのものの名前や立場には大した価値がない」という価値観を杉原に教えてくれたジョンイルが、杉原の中にその価値だけ残していなくなってしまったやるせなさと、その一節の美しさを理解する自分の中にジョンイルがいることを再確認する切なさだろう。
そしてこの映画を見ている方は、ジョンイルの作り上げた価値観における「美しさ」の根源は恐らく杉原がレールの上を走る、自分の存在をただひたすらに確かめる姿なのだろうと分かる。

ついでの予想というか推測だけど、ジョンイルが死ぬ直前に話そうとしていた「凄い発見」みたいなものも、薔薇の香りのようにその価値を知らない者にとっては取るに足らない、多分ほとんどの観客にとっては詰まらない話なんだろうなと思った。

コメントを残す

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