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