30 Seconds of CSS日本語訳⑦

「30 Seconds of CSS」

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

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

25.:notセレクタ – :not selector

26.要素を非表示にする – Offscreen

27.スクロール要素の下端に白いぼかしを入れる – Overflow scroll gradient

28.パッと出て来るメニュー – Popout menu

25.:notセレクタ – :not selector

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

:not疑似セレクタは、最後の(または特定の)要素を除いて一つのグループ内の複数要素にスタイルを指定したい時に便利です。

<<説明>>

li:not(:last-child)は:last-childを除いたli要素すべてにスタイルを指定することを意味します。

26.要素を非表示にする – Offscreen

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

これはある要素をドキュメント構造の中で視覚的にもポジション的にも完全に隠し去りつつ、JavaScriptでの操作や画面の音声読み上げソフトからの認識は許可する万全の手順です。この方法は視覚障害を持つユーザーのための説明を付け加えるといったアクセシビリティの向上(参考:ADA法)にとても役立つでしょう。
代わりの方法としてdisplay: noneでは音声読み上げソフトが認識しませんし、visibility: hiddenを使うとドキュメント構造の中で要素の入るスペースを保持してしまいます。

<<説明>>

  1. ボーダーをすべて取り除きます。
  2. clipの指定で要素の一部分も表示されない様にします。
  3. 要素の高さと横幅を1pxにします。
  4. margin: -1pxで要素の高さと横幅を打ち消しましょう。
  5. 要素からはみ出た内容を非表示にしましょう。
  6. パディングを全て取り除きます。
  7. position: absoluteの指定でその要素が要素としての空間を取らないようにします。

(clipは技術的に賛否がありますが、新しくできたclip-pathは現在サポートしているブラウザが非常に限られているのです。)

27.スクロール要素の下端に白いぼかしを入れる – Overflow scroll gradient

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

要素のオーバーフロー部分にスクロールできるコンテンツがあることをより明確に示すため、要素の下にグラデーションを付けてみよう。

<<説明>>

  1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。
  2. ::afterによって疑似要素を定義します。
  3. background-image: linear-gradient(…)で上から下に、透明から白(背景色)へと薄れていくグラデーションを要素に乗せます。
  4. position: absoluteを指定することで、その疑似要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
  5. width: 240pxはスクロールできる要素の幅と同じです。(スクロール要素はグラデーションを付けた疑似要素を持った親要素の子要素に当たります)
  6. height: 25pxは薄れていくグラデーション疑似要素の高さで、それは本体と比較して短くするべきでしょう。
  7. bottom: 0で疑似要素の底部が本体要素の一番下に来るようにします。
  8. pointer-events: noneの指定によって、疑似要素にマウスポインタが当たらないようになり、そのまま背後の文章を選択出来るインタラクティブな状態を保持できます。

28.パッと出て来るメニュー – Popout menu

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

ホバーされた時やフォーカスされた時に現れるインタラクティブなポップアウトメニューを作ろう。

<<説明>>

  1. position: relativeは指定した要素の疑似要素に、直角座標的な位置関係を与えます。
  2. position: absoluteを指定することで、ポップアウト要素はドキュメントの要素配置の一連の流れからは独立し、親要素との位置関係に従うようになります。
  3. left: 100%でポップアウト要素は左端から親要素の幅100%分移動します。
  4. visibility: hiddenで最初はポップアウト要素は非表示にしつつ、トランジションが使用できる状態にします。(display: noneでは使用出来ない)
  5. .reference:hover > .popout-menuで、.reference要素がホバーされたときに、その子要素にあたる.popout-menuクラスの要素にそのプロパティが持つvisibilityの値をvisibleに変えるよう指定し、ポップアウト要素を出現させます。
  6. .reference:focus > .popout-menuで、.reference要素がフォーカスされたときにポップアウト要素が出現するよう指定します。
  7. .reference:focus-within > .popout-menuを指定することで、.reference要素の中にある要素がフォーカスされた時にもポップアウト要素が出て来ることを確かなものにします。

 

 


昨日ずっとやっていたサイトの作成が終わったので、前から行きたかったスパ銭に行ってきたのですが、休憩室で「聲の形」を見つけてしまったが最後、気が付いたら5時半過ぎてて6時には帰らないとだったので岩盤浴が10分くらいしか入れなかった…

聲の形自体も4巻まで読んで理性(というか岩盤浴入りたさ)で止めたんですが、続きが気になります。

今のところ大今先生の人間描写力で特に違和感のない良い感じの話になってるんですが、正直西宮だけこの作品の人の生々しさのリアリティレベルの中で浮いてるんですよね。現状一人だけ萌え漫画からポッとやってきたみたいな性格。(障碍者がどうのの前にファンタジー人間、雑に言うと「天使」)
「自分が一番嫌い」という割には、リスカみたいな能動的なものから、生活リズムをキチンとしないとか「自分を大事にしない」系の受動的な自傷行為も全く見られない(これは妹の方に描写されてますね)、主人公を好きになったらすぐハッキリと告白する自己肯定感の高さなど、凄惨なイジメの描写と『笑っているけど確かに傷付いている』という可能性は作品内で提示されているのに、その歪みの発露がどこに行っているのか、あるいは何か心の支えにしている絶対的な救いがあるのか、の描写が全くない。

ただこれ、知らない漫画家ならまぁ一人ご都合キャラ出しとくと楽だしそうしてるのかな、と思うんですけど、さっきも書いた通り妹の方の歪み描写はキッチリやってるし大今先生ってその辺に本領があると思っているので、この後これに取り組む話しだったら良いなと思っています。

…ちなみに上の自傷行動の話、死ぬほど反省したとはいえイジメの主犯格だった主人公のことを大したキッカケ無くあっさり許して好きになること自体が自傷行為、と見ると一応つじつま合っちゃうところあるんですけど、流石にストーリーの健全さ的にそれは無いですよねw(要するに自己評価の低い女の子がクズ男に引っかかりやすいメソッドなので)てかそれじゃここまでヒットしないと思うし。そこは魂の純愛ということにしておきましょう。

というわけで続きが気になるけど、そこのスパ銭高かったし、ツタヤで借りるか…今なら借りれるかなぁ(前借りようと思った時は夏頃で映画公開してた)

コメントを残す

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