レスポンシブデザイン

レスポンシブデザインとは

レスポンシブデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」を指します。

メニュー修正

tableタグで横並びのデザインをしていたが、divタグにて横並びにした。

• display:flex;を使ってdiv要素を横並びにする。
  • divはブロック要素であり、ブロック要素は縦に並びます。div要素を横並びにする為にdisplay:flexをしようする。
• flex-wrap: wrapで改行を可能にする。
  • flexはデフォルトではnowrapで改行を禁止しています。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) = @_;