第9話 守りのF12キー
「修正します。……もっと『雑に』扱っても大丈夫なように」
私は権田さんに深く頭を下げ、その場でノートＰＣを開いた。
「雑に、ですか？」
きょとんとする権田さんに「はい」と頷き、ブラウザで『奥多摩・再発見』のサイトを表示させ、キーボードの最上段、『F12』キーを叩く。
画面の右側に、黒い背景の検証ツールがスライドして現れた。緑とオレンジのコードが羅列される――私の領域だ。
今回のF12キーは、洋菓子クラタの時のように、サイトを華やかに飾るためのものではない。「誰がどう触っても絶対に壊れない堅牢性」を証明するための、ディフェンスの魔法だ。
私は躊躇なく、自分が苦労して組み上げた美学の塊であるコードを否定し始める。
まずは、あの忌まわしい縦書きからだ。
私は検証ツール上で、見出しの漢数字を一時的に半角の「10」と「15」に打ち替えた。案の定、数字が横に寝てレイアウトが崩れる。
「縦書きは、Webの運用では難易度が高すぎます。半角や全角を気にせずに入力できるよう、読みやすさを優先して横書きに戻します」
見出しのスタイル指定から writing-mode の記述を削除する。これで横向きに寝ていた「10」や「15」の数字が、正しい方向を向いて横一列に並んだ。
「次に、写真です」
私は権田さんが以前アップロードした――あの巨大な芋畑の写真――のアドレスを拾い、ブラウザ上の画像を差し替えた。
再び枠を突き破り、レイアウトがドミノ倒しになる。権田さんが「あっ」と身を縮めた。
「いちいち『横幅800ピクセル』にトリミングするのは面倒ですよね。だから、システム側に『自動でいい感じに切って』と命令します」
画像のスタイルに、魔法の呪文を打ち込む。
object-fit: cover;
Enterキーを押した瞬間、枠を突き破っていた巨大な縦長写真が、シュッと指定の枠内に収まった。顔や大根が潰れることなく、中央の美味しい部分だけが自動でトリミングされている。
「おおっ！」
権田さんが小さく歓声を上げた。
「まだです」
私はタイピングの手を止めない。
次は、文字の可読性の確保だ。
写真の上に文字を乗せるデザインの場合、背景となる写真の明るさによっては、文字が溶けて読めなくなる。
「どんな写真が来ても文字が絶対に読めるように、文字の下に半透明の『座布団』を敷きます」
テキストエリアに対して、背景色を追加する。
background-color: rgba(255, 255, 255, 0.9);
これで、真っ黒な夜景の写真でも、真っ白な雪景色の写真でも、テキストは確実に読めるようになった。
「最後に、文字数の制限です」
気合いの入った記事ほど、タイトルは長くなりがちだ。長すぎるタイトルはレイアウトを下に押し下げ、デザインを崩壊させる。
「タイトルが長すぎても、はみ出さないようにガードをかけます」
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
この四行を追記する。すると、長文だったタイトルが二行目でピタッと止まり、末尾に自動的に「…」と省略記号がついた。
すべての修正が終わるまで、五分とかからなかった。
私は検証ツールによって一時的に修正された画面を権田さんに見せた。
「……こんな感じで、レイアウトをシンプルにします。これなら、写真を加工しなくても、半角数字を使っても、文字を書きすぎても、絶対に崩れません」
画面上のサイトには、私が最初に提案した「雑誌のような情緒」は消え失せていた。
どこにでもある、標準的で、真面目なブログのレイアウト。皮肉にも佐伯が最初に提案した構成とほぼ同じだった。
「これなら……」
権田さんが、画面を食い入るように見つめ、パァッと顔を輝かせた。
「これなら、私でもできそうです！ ペイントソフトで一時間も悩まなくていいんですね！」
そのホッとした顔を見て、私の胸の中に僅かに残っていた「デザインを妥協した」という悔しさは、フッと霧散した。
「はい。すぐに本番環境のCSSを書き換えます」
私はエディタを立ち上げ、FTPサーバーに接続した。
今度こそ、本当の意味でクライアントを「助ける」ためのコードを書くために。
