スマホメニューのパターン

サブメニューとして、smit.cssを使うパターンとpcsm.cssを使うパターンを作ってみた。
これはパソコンでもスマホでも使えるが、どちらかといえばスマホを意識したものである。

smit.css型

こういう形のメニューに特化したスタイルを集めたものである。


smit.cssではtdは次のようになっている。
td {padding:0;}

vertical-alignの指定はしていないからデフォルトでmiddleになる。
それで画像の横で垂直位置がtdタグの中央になるところに検索ボックスが出る。
左側のコアラの画像は80×80pxである。


pcsm.css型

通常のpcsm用のスタイルを流用したものである。


pcsm.cssではtdは次のようになっている。
td {padding:5px; vertical-align:top;}

vertical-alignの指定をtopにしている。
それで画像の横で垂直位置がtdタグの上部に検索ボックスが出る。
したがって、このパターンでsmit.css型と同じ位置に検索ボックスを出そうとするとbrタグを数個追加する必要がある。しかし、これは煩瑣である。


解決策1
そこで、左側に表示する画像を、右側の検索ボックス(ボタン)と同じような高さのものに変更すると、一応はどちらのパターンにでも使えることになる。
左側の魚の画像は20×20pxである。これを使うと検索用テキストボックスは150pxにしてもスマホの1行におさまる。


解決策2
このパターンを使う個別のファイル内で次のような「修正」タグ指定を組み込む。
ちなみに、このタイプの検索エリアは全体としてsectionタグで囲まれた内部にある。

スクリプト <style> section td {padding:2px;vertical-align:middle;} </style>

こうすれば80×80pxの大きめの画像でも検索ボックスは縦中央に表示される。この場合検索用テキストボックスは120pxぐらいがスマホの1行の限度であろう。
なお、{padding:2px;}だけではいけない(修正したことにならない)。pcsm.cssで設定した「vertical-align:top;」の設定が生きているからである。

- 2021/09/05 -