| title | emoji | type | topics | published | |
|---|---|---|---|---|---|
「CSS完全に理解した」を真面目に実装する ～Webコーダーの頭の中～ |
🧠 |
tech |
|
true |
「CSS完全に理解した」というネタをご存知でしょうか。 https://togetter.com/li/1406686
CSS完全に理解したと言いながら、文字が枠をはみ出した不自然なレイアウトになっているというTシャツです。 （これに限らず、技術界隈においては「完全に理解した」という言葉が文字通りの意味で使われることは少なく、ネタの文脈で使われることがほとんどです。）
さて、この「CSS完全に理解した」が、仮に デザイナーが真面目にデザインしたWebデザインだったとしたら どう実装すべきでしょうか？ （もちろん、担当デザイナーのセンスがない、ということでもないとします）
「CSS完全に理解した」を実際にCSSで表現している記事はすでにいくつかありましたが、 あくまでこの見た目を再現するまでで、Web制作の観点で取り組んでいるものは見当たりませんでした。 （もし見つけられなかっただけでネタかぶりだったらごめんなさい）
というわけで今回は「CSS完全に理解した」を題材として、 デザインデータを元にHTML/CSSのコーディングを行う際、どんなことを考慮すべきか を整理します。
:::message あくまで「私は普段こう考えながら実装している」という個人の考え方の紹介です。 必ずしもみんながみんな同じ考え方とは限らないし、状況（制作物の性質）にもよると思います。 :::
:::message 実際ならデザイナーとコミュニケーションをとりながら進めるのがよいと思いますが、 今回はあくまで与えられたデザインのみで話を進めます。 :::
この見た目を再現するだけなら、CSSをある程度理解すれば簡単にできます。
ですが、実際にWeb制作を行うときには、 「デザインデータで表現されている以外の状況」 も考える必要があります。 具体的には以下の2つです。
- 画面幅が変わったときにどうなるのか
- 文字量が変わったときどうなるのか
それぞれどのように変化すべきかを、デザイン意図を推し量りながら考えます。
Webコーディングにおいては、 レスポンシブ対応 はほぼ必須です。 パソコンから閲覧される場合もあれば、スマホから閲覧される場合もあります。 また、パソコンならウィンドウ幅を変えたり、スマホやタブレットなら回転させて横向きにしたりなど、同じ端末でも画面幅が変わることもあります。 どんな状況でもできるだけ意図したデザインで見えるよう、調整します。
元となるTシャツのデザインがスマホ用のデザインだったとしましょう。 画面幅がより広くなったときに、このデザインがどう変化するべきなのかいくつかのポイントで考えます。
- 画面が広がっても幅は固定
- 全体の割合を一定にして広がる
- 画面端からの余白の幅を固定して広がる
- 左揃え
- 中央揃え
- 右揃え
- 左端を基準に設定する
- 中心を基準に設定する
- 右端を基準に設定する
- 改行位置は固定（「CSS/完全に理解した」で改行する）
- 画面幅が広がって1行に入りきるなら1行にする
Web制作、ことクライアントワークにおいては、実装後に テキスト変更 が発生することもあります。 文字量が多少長くなったり短くなったりした場合でも、おかしくない見た目になるように実装できるとよいでしょう。
- 箱の幅は固定したまま、文字がはみ出し続ける
- 文字の長さに合わせて、箱も幅が広がる
- 文字の領域の幅を固定して、それを超えると折り返す
- 文字に合わせて箱の高さが小さくなる
- 箱の高さは変えない
- 文字の領域の高さを2行のときと同じにして、その中で上下中央揃えにする
私はこのデザインを、 「文字に合わせた枠を作り、その後文字のみを右ずらしたデザイン」だと理解しました。 よって、テキストが長くなればそれに合わせて箱も広がるし、1行になれば高さも小さくなることとします。
また、全体の配置は左右中央揃えとします （これについては、Tシャツをイメージしたら真ん中がいいよね、程度で適当に決めました）。
ただし、文字が枠からはみ出たデザインとはいえ、画面の外にまで出てしまうことは想定していないと判断し、 文字量が長くなった場合には画面に収まる範囲で改行するようにします。
その解釈の元に実装した「CSS完全に理解した」がこちらです。 ぜひ画面幅も変えてみてください。テキストが画面の外には出ないようになっていると思います。 （HTMLかCSSのタブをクリックして開くと狭くなると思います）
- デザインを再現するだけと言っても、実装の上で考えるべきことはたくさんある。
- 具体的には以下を考える。
- 画面幅が変わったときどうなるのか
- 文字量が変わったときどうなるのか
- 「CSS」だけでなく、「デザインの意図」を完全に理解しよう。
今回の図は、Draw.io VS Code Integration を使用して VSCode 上で編集した図に、 アイビスペイント （お絵かきソフト）で手書きして作りました。 （全部Draw.ioで書いても良かったんですが、面倒になった）
アイビスペイントは、Windows版をSurfaceのタッチディスプレイで使用しています。 もともとスマホで使っていて使い勝手に慣れていたので、待望のWindows版がリリースされて大変嬉しいです。