このところの作業が進んで、HTMLファイルのひな型が4つ完成した。あとは、バウムクーヘンを扱うお店に「掲載しませんか」と、ご招待のメールを送るだけなのだが、最後の最後で、意外な落とし穴が。
パソコン、スマホ、タブレット、いずれで見てもきちんと表示されるように工夫したつもりだが、パソコンなどの広い画面で見たときに、テキストのはいった枠が、見る人のディスプレイの広さによって大きさがころころ変わってしまい、見た目が美しくない。
そこで、単純な話だと気づくまでのあいだ、慣れないJavaScriptなどを含めて、あれこれ検討してみたが、やはりうまくいかない。底部の高さが揃ってしまうのだ。揃えたいのは上部。
不必要なほどにJavaScriptを学んでしまったがうまくいかず、歯ぎしりをしていたところ…。
家族がぼそっと「テキスト位置を上部に固定できたら、それでいいんじゃね?」と言う。そこで、なんと、textの位置を指定するプロパティを使ったら、JavaScriptがまるで不必要のまま、望みが叶った。
MDN Web Docs: vertical-align
これでtext-topを指定しただけで、枠の上部で高さが一定になった!!
遠回りになったが、思いがけずJavaScriptの勉強にもなって、結果としてはよかった。