レスポンシブデザイン
レスポンシブデザインとは
レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。
メニュー修正
tableタグで横並びのデザインをしていたが、divタグにて横並びにした。
- display:flex;を使ってdiv要素を横並びにする。
- divはブロック要素であり、ブロック要素は縦に並びます。div要素を横並びにする為にdisplay:flexをしようする。
- flex-wrap: wrapで改行を可能にする。
diff
- https://github.com/john-smith-7701/mmt/commit/2696c54e1b53167d58b5c0d70ae99275a9a8c389
- https://qweer.info/menu/menu?menu=content01
Index: public/css/default.css =================================================================== --- public/css/default.css (revision 516) +++ public/css/default.css (working copy) @@ -271,3 +271,10 @@ .fixed02{ z-index: 1; } +.flex{ + display: flex; + flex-wrap: wrap; +} +.menucel{ + width: 20em; +} Index: templates/menu/menu.html.ep =================================================================== --- templates/menu/menu.html.ep (revision 509) +++ templates/menu/menu.html.ep (working copy) @@ -1,7 +1,8 @@ % layout 'default'; % title 'menu' ; %== $self->make_panel(); -<table><tr><td style="vertical-align: top;"> +<div class="flex"> + <div class="menucel"> % for my $r (@$_data){ % if ($r->{menukbn} =~ /^(H\d)/i){ %== tag($1,$r->{meisyo}); @@ -14,7 +15,8 @@ %== "<a href=$r->{URL}$r->{PARAM}>$r->{meisyo}</a><br>" % } % } -</td></tr></table> + </div> +</div> <% sub tag{ my ($tag,$name) = @_;