30 Seconds of CSS日本語訳⑨

「30 Seconds of CSS」

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

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

33.OS内蔵のフォント- System font stack

34.トグルスイッチ- Toggle switch

35.トランスフォームで中央配置- Transform centering

36.三角形- Triangle

37.省略されたテキスト- Truncate text

33.OS内蔵のフォント- System font stack

https://30-seconds.github.io/30-seconds-of-css/#system-font-stack

実際のアプリの使用感に近づけるために、各OSに元から入っているフォントを使おう。

<<説明>>

ブラウザーは並んでいるフォントの中で、手前から順番に使用できるフォントを探し、もし(システム上とかCSSに定義された中に)見つからなければその次のフォントをチェックします。

  1. -apple-systemはiOSやmacOS(ただしChromeは別)で使われているSan Franciscoフォントです。
  2. BlinkMacSystemFontはmacOSのChromeで使用されているSan Franciscoフォントです。
  3. Segoe UIは Windows 10で使われています。
  4. RobotoはAndroid固有のフォントです。
  5. Oxygen-SansはGNU+Linux上で使われています。
  6. UbuntuはLinuxで使われるフォントです。
  7. “Helvetica Neue”HelveticaはmacOS 10.10とそれ以前のバージョンで使用されたフォントです。(クォートで囲んでいるのは、名前に空白を含んでいるから)
  8. Arialは全てのOSでサポートされているフォントです。
  9. sans-serifはもし上記のフォント全てが使用できなかった場合のフォールバックとして指定するサンセリフ体のフォントです。

34.トグルスイッチ- Toggle switch

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

CSSだけでトグルスイッチを作ってみよう。

<<説明>>

これは<label>要素にのみトグルスイッチを模したスタイルを付けて、実際の<input>要素のチェックボックスは画面外に飛ばして隠すエフェクトです。<input>要素に紐付けられたlabel要素がクリックされた時に、<input>要素のチェックボックスは:checked状態になります。

  1. for属性はそれを指定した<label>要素を、同じidを持つ<input>要素のチェックボックスに紐付けします。
  2. .switch::afterの指定によって、<label>要素の疑似要素で丸いトグルボタンを作ります。
  3. input[type=’checkbox’]:checked + .switch::afterは、チェックボックスがchecked状態になった時に<label>要素の疑似要素に指定されるスタイルを定義します。
  4. transform: translateX(20px)で疑似要素(トグルボタン)を右方向に20px、チェックボックスがchecked状態になった時に移動させます。
  5. background-color: #7983ff;の指定で、checked状態になった時にスイッチの背景色を変化させます。
  6. .offscreenクラスには、実際トグルスイッチの外装に必要がない<input>要素のチェックボックスをドキュメント構造から独立させて画面外の遠くに移動させるためのプロパティを指定します。しかしそれを完全に隠してしまうわけではないので、キーボードや画面読み上げ機能を通せばアクセスすることは可能です。
  7. transition: all 0.3sでチェックボックスがcheck状態になった時は、<label>要素に適用されている全て、つまりbackground-colorと、その疑似要素のtransformプロパティは0.3秒掛けてトランジションします。

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

35.トランスフォームで中央配置- Transform centering

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

position: absoluteとtransform: translate()を使って親要素の中で子要素を縦・横両方向に中央配置しよう。(flexboxやdisplay: tableを使う方法の代替手段)
flexboxでの方法同じく、親要素と子要素両方の縦幅横幅が分からなくても機能するので、レスポンシブなアプリケーションに適している。

<<説明>>

  1. position: absoluteを子要素に指定することで、子要素をその親要素であるコンテナとの位置関係で配置できるようになります。
  2. left: 50%とtop: 50%で子要素を、コンテナ要素の左端と上端からコンテナ要素の幅50%分それぞれ移動させます。
  3. ransform: translate(-50%, -50%)の指定で、子要素の高さと横幅がコンテナ内で相殺され、縦・横方向に中央配置されます。

注:親要素の高さと横幅を固定しているのはデモだからです。

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

36.三角形- Triangle

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

CSSだけで三角形を作ってみよう。

<<説明>>

詳細な説明はこちらをご覧ください。

ボーダーの色が三角形の色になります。また、三角形の頂角は反対側のborder-*プロパティに対応しています。例えば、border-topにだけ色を付けたら下向きの三角形が出来るでしょう。

pxの値を変えて三角形の大きさや形の変化を試してみましょう。

37.省略されたテキスト- Truncate text

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

テキストが1行より長かった場合に、続きが省略して省略記号「…」を末尾に配置する方法。

<<説明>>

  1. overflow: hiddenでテキストがその表示領域(ブロック要素の横幅100%と高さauto)からオーバーフローしないようにします。
  2. white-space: nowrapでテキストが一行以上の高さになるのを防ぎます。
  3. text-overflow: ellipsisにより、テキストがブロックの寸法を超えた場合、省略記号で終わるようになります。
  4. width: 200px;で要素の幅を決めるのは、どの地点で省略されるかを明らかにするためです。

一行の要素でのみ機能します。

 


うわ~~ついに終わりました!終了!

しかし終わる時って大体もう飽きてるのでそんなにテンション上がらないんですけど…でもやってる間に別のことで英語の説明ページにぶち当たった時、やる前よりずっと気軽に読めるようになったので語学力的にもやって良かったなと思います。

今後もgithub repositoryで有益そうな記事を見つけたら翻訳していきたいと思います!


最近チートラを読んだ流れでLINE漫画とかで見れる韓国の漫画を読んでます。少女漫画で、ノリはそんなに日本と変わりないけど、スカッとする系の話が多い気がします。ホラーも有名なの多いですがスカッとしたいのであまり読みません。

具体的には「女神降臨」とか「わたしは整形美人」とか、前に「外見至上主義」も読んでましたが、とにかく容姿に対する拘りの話が多いのはそういうのが日本でウケるからなのか本国でも人気出るからなのか…(チートラはそれほど外見関係ないですしね、男がイケメン設定なのは日本も同じ)

それはともかく、この手の韓国漫画って訳される時に「日本設定」に置き換えて日本で紹介されるんですが、これホントに必要なのかなと読んでてよく思います。

やっぱ微妙に文化が違うからなんか違和感あるし、スラング的なものが上手く訳せてなくて話の運びが変だったり(韓国設定だったらそのままの単語を使って枠外で補足すれば良い)、今や若い子は韓国に対して文化的にかなり馴染みがあるというのはK-POPアイドルの人気見ても感じるので、そのまま韓国設定でええんやない…っていう。

ただ韓国文化に馴染みのない層には「名前」が結構ネックかなという気がしました。私は韓国人の女性名・男性名すら区別付かないし、名前は家庭環境とか性格とかキャラ付けも表現できるけど、日本人でそれを読み取れる人は少ないでしょうし。
それに作中登場する現実での流行りものや地名のコンテキストも、日本に置き換えないといちいち補足が必要ですしね。

そうなると確かに置き換えた方が合理的なんだけど、なんか日本の作品だと思ってる人も少なくないだろうしなんだかな~という感じ。てか時々日本の有名作品が海外でヒットした時に「自分の国の作品だと思ってた」って海外で言われるののって、他の国でもこんな感じで紹介してるんだなって納得しましたね。

コメントを残す

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