Dead Simple Sitesで紹介されているウェブサイトを見ていると、このウェブサイトがすっきりしすぎていると感じる。もうちょっと何かがあったりしても「シンプル」と感じられるウェブサイトにしたい。戻る矢印からロゴに戻したことも含め、標準的な構成に戻しつつある。その過程でOpenType機能のhaltを試したり、書影をタイトルなどでページ内検索できるようにしたり、先送りしていたことをこなしていく。
大きな変更点は、ホームに最近の投稿を復活させたこと、あまり更新していないページもサイト・メニューに残したこと、書影ギャラリーを復活させたことだ。概要を短くして追加したり、💤を使ったり、画像をページ内検索できるようにしたりし、以前とはほんの少し違う形になっている。
haltやpalt
一時的にfont-feature-settingsプロパティーを使ってOpenType機能のhaltを有効にしていた。見ればわかるように、今は使っていない。いくつかのパターンを試し、paltとletter-spacingプロパティーの組み合わせが気に入ったが、やりすぎな感がある。
haltやpaltを採用するウェブサイトが増えてきたような気がしないでもない。文字間を調節しないならhaltの方が良い。paltを単独ではかなり詰まっている印象になるので、やめた方がいいだろう。
検索できるギャラリー
上述のように書棚ページを書影のギャラリーに戻したが、そのままではページ内検索ができない。それはそれで困ることもあるので、無理やり検索できるようにする。よくあるパターンの幅と高さがゼロで文字を仕込むだけの実装に落ち着いた。ブラウザー側で、alt属性や、placeholder属性、title属性の値も含めてなんとなくページ内検索ができるようになって欲しい。
最初は簡単なCSSでタイトル一覧とギャラリーを切り替えられるようにしたが、ひと手間多いと使いづらい。縦に長いページでもあるので、中ほどまでスクロールしている時にページ内検索をしようとすると、さらにひと手間増える。やはり、そのまま検索できると良いだろう
次に幅ゼロのFlexboxでキャプションを隠そうとしたところ、ランダムな位置に画像が並ぶようになってしまった。なかなかかっこいい。隠された文字列によって高さが決定する関係上、縦位置のずれは必ず行ボックスの高さの整数倍になるので、縦方向のリズムも制御できるような気がする。これといって使い道を思いつかないあたりが、唯一にして最大かつ根本的な欠陥だ。グリッドにぴったり並べてしまうと不格好になりがちな、画像の縦横サイズやアスペクト比がまちまちなギャラリーには使えるかもしれない。
幅と高さを0にしても、ただ隠すと折り返しの関係からページ内検索でジャンプする位置とずれることが多い。キャプションが一文字ずつ折り返されて、縦に長い状態で隠されるからだ。折り返さないようにする必要があることを学んだ。
他、画像の角が丸くするなど細かい変更点もある。ic単位を使ってみたが、ric単位じゃないとうまくスケールしない書き方をしているのでダメだった(Firefox 124.0ではまだric単位は実装されていない)。一番外側の余白も少し変わり、vw単位を基準にするようになったので、特に狭い画面で違いが出てくる。共通メニューも復活させたい気持ちもあるが、そのあたりは個性として維持したい気持ちの方がまだ強い。内部的にはMustacheにでかいテンプレートを食わせないようにしたりして、HTMLの生成を6秒(再構築時は12秒)から1秒(同じく5秒)くらいに速くしたりした。