レイアウトサンプル

　ここでは、幾つかのレイアウト例を表示してみました。 　参考１ 　参考２
  1. flex box を使ったレイアウト01flex01
  2. flex box を使ったレイアウト02flex02
  3. flex box を使ったレイアウト03flex03
  4. grid box を使ったレイアウト01grid01
  5. table を使ったレイアウト01table01

  1. flex box を使ったレイアウト01 　別窓表示
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.   <title>HTML5とCSS3によるページサンプル</title>
    7.   <style>
    8.       body { width:400px; margin:10px auto; }
    9.       header, nav, section, footer, article {
    10.         display:block; border:1px solid #ccc; margin:5px; padding:5px 10px; background: #eee;
    11.       }
    12.       article { background: #efe; }
    13.       header { text-align:center; padding:5px 0 10px 0; }
    14.       header ul, header li { list-style-type:none; display:inline; padding: 0 10px; }
    15.       .flexbox { display:flex; border:1px solid #c99; margin:5px; }
    16.       nav { flex:1; }
    17.       section { flex:2; }
    18.       nav li { list-style-type:none; margin-left: -2em; }
    19.       footer { text-align: center; }
    20.   </style>
    21. </head>
    22. <body>
    23.   <header>
    24.       <h1>header</h1>
    25.       <ul>
    26.         <li><a href="#">Home</a></li>
    27.         <li><a href="#">Menu 1</a></li>
    28.         <li><a href="#">Menu 2</a></li>
    29.         <li><a href="#">Menu 3</a></li>
    30.       </ul>
    31.   </header>
    32.   <div class="flexbox">
    33.     <nav>
    34.       <h1>Navi</h1>
    35.       <ul>
    36.         <li><a href="http://www.tagindex.com/html5/basic/basic.html">HTML 5</a></li>
    37.         <li><a href="http://www.htmq.com/html5/index.shtml">リファレンス</a></li>
    38.         <li><a href="http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html">flex</a></li>
    39.         <li><a href="#">example 4 </a></li>
    40.         <li><a href="#">example 5 </a></li>
    41.         <li><a href="#">example 6 </a></li>
    42.         <li><a href="#">example 7 </a></li>
    43.       </ul>
    44.     </nav>
    45.     <section>
    46.       <h1>section</h1>
    47.       <article>
    48.         <h1>section-article1</h1>
    49.         <p>ここは、article１</p>
    50.       </article>
    51.       <article>
    52.         <h1>section-article2</h1>
    53.         <p>ここは、article２</p>
    54.       </article>
    55.     </section>
    56.   </div>
    57.   <footer>
    58.       footer
    59.   </footer>
    60. </body>
    61. </html>

  2. flex box を使ったレイアウト02 　別窓表示
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" />
    6.   <title>Flexbox sample 13</title>
    7.   <style>
    8.     body { font: 24px Helvetica; background: #999; }
    9.     header, footer{ margin:4px; padding:5px; min-height:44px; border-radius:7px; background:#feb; }
    10.     .top-nav { display:flex; justify-content:center; font-size:14px; background: #eef; margin:4px; border-radius:7px; }
    11.     .top-nav a { margin:5px 10px; border-radius:5px; background:#6B9;
    12.             color:#fff; display:block; padding:10px 15px; text-decoration:none; }
    13.     .top-nav li { list-style-type:none; position:relative; left:-1.5em; }
    14.     .top-nav li:first-child { margin-right: auto; }
    15.     .top-nav .logo { background: #99f; padding:0px; width:88px;height:34px; }
    16.     .top-nav .logo img { position:relative; width:100px; height:36px; }
    17.     .main { min-height:300px; margin:0px; padding:0px; display:flex; flex-flow:row; }
    18.     .main > article{ margin:4px; padding:5px;
    19.                     border-radius:7px; background:#dd8; flex:3; order:2; }
    20.     .main > nav{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px;
    21.                 background: #ccccff; flex:1; order:1; }
    22.     .main >nav ul{ font-size:14px; list-style-type:none; }
    23.     .main >nav li { list-style-type:none; position:relative; left:-2em; }
    24.     .main >nav a { margin:5px 10px; border-radius:5px; background:#6c9;
    25.             color:#eee; display:block; padding:5px; text-decoration:none; }
    26.     .main > aside{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px;
    27.                   background: #ccf; flex:1; order:3; }
    28.     .main > aside p{ font-size:14px; }              
    29.     .main .contents { display:flex; justify-content:center; align-items:center; }
    30.     .main .contents .align { width:300px; height:150px; font-size:14px; padding:8pt; border-radius:7px; background:#F5F0CF; }
    31.   </style>
    32. </head>
    33. <body>
    34.   <header>header</header>
    35.   <ul class="top-nav">
    36.       <li><a href="../../../index.html" class="logo"><img src="LOyuki14.gif" ></a></li>
    37.       <li><a href="http://www.webcreatorbox.com/tech/flexbox/" target="_blank">Menu 1</a></li>
    38.       <li><a href="http://qiita.com/takanorip/items/a51989312160530d89a1" target="_blank">Menu 2</a></li>
    39.       <li><a href="https://web-designer.cman.jp/css_ref/abc_list/flexbox/" target="_blank">Menu 3</a></li>
    40.       <li><a href="http://www.tohoho-web.com/css/prop/flex.htm" target="_blank">Menu 4</a></li>
    41.   </ul>
    42.   <div class="main">
    43.     <nav>side-nav
    44.       <ul>
    45.         <li><a href="#">Link 1</a></li>
    46.         <li><a href="#">Link 2</a></li>
    47.         <li><a href="#">Link 3</a></li>
    48.       </ul>
    49.     </nav>
    50.     <article class="contents">
    51.       <div class="align">
    52.         このアイテムは、中央枠に justify-content:center; align-items:center; によって、左右、上下の中央に配置
    53.       </div>
    54.     </article>
    55.     <aside>aside
    56.       <p>
    57.         この横３枠の並びは<br>flex: と order: で配置
    58.       </p>
    59.     </aside>
    60.   </div>
    61.   <footer>footer</footer>
    62. </body>
    63. </html>

  3. flex box を使ったレイアウト03 　別窓表示
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" >
    6.   <title>レスポンシブハンバーガー Web page</title>
    7.   <style>
    8.     *{ margin:0; }
    9.     body { width:100%; height:100vh; margin: 0 auto; font-size:13px; line-height:150%; background:#eff; background: url(https://kurage.ready.jp/img/w8b.gif); }
    10.     .wrap{ max-width:1200px; margin: 0px auto; padding:10px; }
    11.     
    12.       #waku01{ max-width: 100%; overflow:hidden; padding:15px 0 0; display:flex; align-items: center; text-align:center; }
    13.           #topL { width:10%; }
    14.           #topC { width:70%; color:#900; font-size:36px; font-weight:bold; height: 40px; font-family:Comic Sans MS }
    15.           #topR { width:20%; } 
    16.       #waku11{ position:relative; max-width: 100%; margin:5px auto; padding:4px 8px; z-index:1;  }
    17.       
    18.     .gnav-waku{ position:relative; margin:0 ; padding:0; z-index:100; }
    19.       .gnav-waku label { padding: 11px 4px 9px; font-size:30px; background:#ada; opacity:0.2; border-radius:6px; cursor:pointer; position:fixed; top:10px; left:10px; }  /*ボタン枠装飾*/ 
    20.         
    21.       .gnav-waku input:checked ~ label:before { display:inline-block;color:#fff; content: '\02630'; } /* '三';  '\f078'; */ 
    22.       .gnav-waku label:hover { opacity:0.7; } /*ボタンホバー時*/ 
    23.       .gnav-waku label:before{ color:#44d;  font-weight: bold; content:'\02715'; } /* 'Ｘ \f00d' */
    24.       .gnav-waku input { display:none; } /*チェックは不可視*/
    25.       .gnav-waku input:checked ~ .gnav{ transform:translate(0, -300px); transition:0.5s; } /* 中身を表示 クリックで中身非表示 */  
    26.  
    27.       .gnav{ transition:0.5s; position:relative; top:0; padding-left:0px; display:flex; margin: 0px auto; }
    28.           .gnav li { position:relative; width:19vw; margin:0; padding:0; text-align:center; z-index:100; list-style:none; } 
    29.           .gnav img { width:98%; height:100%; }
    30.           .gnav li a{ border-radius:5px; background:#4b8; color:#ffe; display:block; margin:1px; padding: 3px 0 1px; text-decoration:none; height: 28px; line-height: 2; font-size: 14px; font-weight: bold; }
    31.           .gnav li:hover > a{ background:#30b9ba; }
    32.           .gnav li ul li{ overflow:hidden; width:100%; height:0; margin:0px; color:#ffe; transition:.3s;}
    33.           .gnav li ul li a{ background:#30b9ba; }
    34.           .gnav li:hover li:hover > a{ background:#80b9ba; }
    35.           .gnav li ul{ position:absolute; top:100%; left:0; width:100%; margin:0; padding:0; }
    36.           .gnav li ul li{ overflow:hidden; width:100%; height:0; color:#ffe; transition:.4s; }
    37.           .gnav li:hover > ul > li{ overflow: visible; height: 32px;}
    38.           .gnav li ul li ul{ top: 0; left:100%; }
    39.           .gnav li ul li ul:before{                   /* ul 直前に指定 */
    40.               position: absolute; content: ""; top: 9px; left: -12px;
    41.               width: 0; height: 0; border: 8px solid transparent;
    42.               border-left-color: #eeeeee;           /* 三角マーク色 */
    43.           } 
    44.  
    45.       @media screen and (min-width:960px) {   /* pc用  */ 
    46.         .gnav{ width:950px;  padding-left:1rem;} 
    47.       
    48.         .gnav li:last-child ul li ul{ left: -100%; width:100%;}
    49.         .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
    50.         .gnav li:last-child ul li ul:before{        /* 右端リストの三角マーク  ul 直前に指定 */
    51.           position:absolute; content:""; top:9px; left: 100%; margin-left: -4px;
    52.           border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
    53.         }
    54.         /* 右端前リストの三角マーク  */ 
    55.         .gnav li:nth-last-child(2) ul li ul:before {
    56.           position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px;
    57.           border: 8px solid transparent; border-right-color:#eee;
    58.         }
    59.       }
    60.       
    61.       @media (min-width:560px) and ( max-width:959px) {    /* タブレット用 */
    62.       
    63.         .wrap{ width:95vw; }
    64.           #topL, #topR{ width:0; display:none; }
    65.           #topC{ width:100%;}
    66.         .gnav{ width:98%;  } 
    67.       
    68.         .gnav li:last-child ul li ul{left: -100%; width:100%;}
    69.         .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;}
    70.         .gnav li:last-child ul li ul:before{        /* 右端リストの三角マーク  ul 直前に指定 */
    71.           position:absolute; content:""; top:9px; left: 100%; margin-left: -4px;
    72.           border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */
    73.         }
    74.         /* 右端前リストの三角マーク  */ 
    75.         .gnav li:nth-last-child(2) ul li ul:before {
    76.           position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px;
    77.           border: 8px solid transparent; border-right-color:#eee;
    78.         }
    79.       }      
    80.       
    81.       @media (max-width:559px) {   /* スマホ用 */ 
    82.         .wrap{ width:95%; }
    83.           #topL, #topR{ width:0; display:none; }
    84.           #topC{ width:100%;;}
    85.         .gnav{ position: fixed; width:33vw; margin:5em auto 0 0.5em; display:flex; flex-direction:column; z-index:90; } 
    86.         .gnav-waku label { 1color: #ede; background:#4b8; opacity:1; } /*ボタン濃く*/ 
    87.         .gnav li ul:before{ position: absolute; content: ""; top: 9px; left: -12px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #eee; }  /*  ul 直前三角マーク色 */ 
    88.         .gnav li{ width: 95%; margin:0 auto; padding: 0; text-align:center; } 
    89.         .gnav li ul{ top:3px; left:100%; }
    90.         
    91.         #waku11{ position:relative; max-width: 1100px; margin:5px auto; padding:4px 8px; z-index:1;  }
    92.       }
    93.  
    94.         .table10 { display: flex; flex-direction:column;line-height:1.6em; }
    95.           .cap10, .cap11 { display: flex; flex-direction:row; }
    96.           .cap10 { text-align: center; }
    97.           .tr11 { display: flex; flex-direction:row; }
    98.           .td11 { display: flex; flex-direction:column; }
    99.           .table10, .cap11, .tr11 { width:100%; margin: 1px auto; }
    100.           .cap00 { margin-top:12px; font-size:20px; text-align: center; color:#906; }
    101.           .tr11 section { margin:0 1px; border-radius:5px; padding:3px; flex-grow:1; }
    102.           .tr11 section:nth-child(2n+1) { width:20%; background-color:#eee; }
    103.           .tr11 section:nth-child(2n) { width:80%; background-color:#eef; }
    104.       
    105.       @media (max-width:559px) {   /* スマホ用    560  960  */ 
    106.             #waku11 { position:absolute; top:4.5em; padding:4px 2px; z-index:1;  }
    107.           .tr11 { width:92vw; }  
    108.           /* 表の折返し */
    109.           .cap10, .cap11 { display: flex; flex-direction:column; }      
    110.           .cap10 div:nth-child(2n) { display:none; }
    111.       }
    112.   </style>
    113. </head>
    114. <body>
    115.   <div class="wrap">
    116.     <section id="waku01">
    117.       <div id="topL"></div>
    118.       <div id="topC">レスポンシブ Web page</div>
    119.       <div id="topR"></div>
    120.     </section>
    121.     
    122.     <section class="gnav-waku" id="gnav-waku">
    123.         <input type="checkbox" id="label1" >
    124.         <label for="label1"></label>
    125.         <ul class='gnav'>
    126.           <li><a href='.index.html' title='top page'><img src='https://kurage.ready.jp/img/LOyuki14.gif'></a>                 <ul class='gnav-ul'>
    127.               <li><a href='#'>Menu 11</a></li>
    128.               <li><a href='#'>Menu 12</a>
    129.                 <ul>
    130.                   <li><a href='#'>Menu 121</a></li>
    131.                   <li><a href='#'>Menu 122</a></li>
    132.                 </ul>
    133.               </li>
    134.               <li><a href='#'>Menu 13</a></li>
    135.             </ul>
    136.           </li>
    137.           <li><a href='#'>Menu 2</a>
    138.             <ul class='gnav-ul'>
    139.               <li><a href='#'>Menu 21</a>
    140.                 <ul>
    141.                   <li><a href='#'>Menu 211</a></li>
    142.                   <li><a href='#'>Menu 212</a></li>
    143.                   <li><a href='#'>Menu 213</a></li>
    144.                 </ul>
    145.               </li>
    146.               <li><a href='#'>Menu 22</a>
    147.                 <ul>
    148.                   <li><a href='#'>Menu 221</a></li>
    149.                   <li><a href='#'>Menu 222</a></li>
    150.                   <li><a href='#'>Menu 223</a></li>
    151.                 </ul>
    152.               </li>
    153.               <li><a href='#'>Menu 23</a></li>
    154.             </ul>
    155.           </li>
    156.           <li><a href='#'>Menu 2</a>
    157.             <ul class='gnav-ul'>
    158.               <li><a href='#'>Menu 21</a>
    159.                 <ul>
    160.                   <li><a href='#'>Menu 211</a></li>
    161.                 </ul>
    162.               </li>
    163.               <li><a href='#'>Menu 22</a></li>
    164.               <li><a href='#'>Menu 23</a>
    165.                 <ul>
    166.                   <li><a href='#'>Menu 231</a></li>
    167.                 </ul>
    168.               </li>
    169.             </ul>
    170.           </li>
    171.           <li><a href='#'>Menu 3</a>
    172.             <ul class='gnav-ul'>
    173.               <li><a href='#'>Menu 31</a>
    174.                 <ul>
    175.                   <li><a href='#'>Menu 311</a></li>
    176.                 </ul>
    177.               </li>
    178.               <li><a href='#'>Menu 32</a></li>
    179.             </ul>
    180.           </li>
    181.           <li><a href='#'>Menu 4</a>
    182.             <ul class='gnav-ul'>
    183.               <li><a href='#'>Menu 41</a></li>
    184.               <li><a href='#'>Menu 42</a>
    185.                 <ul>
    186.                   <li><a href='#'>Menu 421</a></li>
    187.                 </ul>
    188.               </li>
    189.               <li><a href='#'>Menu 43</a></li>
    190.             </ul>
    191.           </li>
    192.         </ul>
    193.     </section>
    194.   
    195.     <section id="waku11" >
    196.       <div class="table10" >
    197.         <div class="cap10">
    198.           <div class="tr11">
    199.             <section class="td11">分　類</section>
    200.             <section class="td11">項　目</section>
    201.           </div>
    202.           <div class="tr11">
    203.             <section class="td11">分　類</section>
    204.             <section class="td11">項　目</section>
    205.           </div>
    206.         </div>
    207.       
    208.         <div class="cap11">
    209.           <div class="tr11">
    210.             <section class="td11">HTML 5</section>
    211.             <section class="td11">
    212.               <div class="d12">
    213.                 <a href="http://www.tohoho-web.com/html5/index.html" target="_blank" title="とほほ">HTML5とは</a>
    214.                 　<a href="http://www.tagindex.com/html5/basic/index.html" target="_blank" title="tagindex HTML5の基本">HTML5の基本</a>
    215.                 　<a href="http://www.htmq.com/html5/index.shtml" target="_blank" title="htmq.com">HTML5リファレンス</a></div>
    216.               <div class="d12">
    217.                 <a href="http://www.html5-memo.com/first-html5/html5-001/" target="_blank" title="はじめてのHTML5">はじめてのHTML5</a>
    218.                 　<a href="http://www.html5-memo.com/html5-site/iphone_markup/" target="_blank">HTML5でサイト</a>
    219.                 　<a href="https://www.asobou.co.jp/blog/web/html5-3" target="_blank">コンテンツ・モデル</a></div>
    220.               <div class="d12">
    221.                 <a href="http://www.webdlab.com/html/html5/" target="_blank">Webデザインラボ</a></div>
    222.               <div class="d12">
    223.                 <a href="http://www.pori2.net/html5/index.html" target="_blank">HTML5時代のJavaScript入門</a></div>
    224.               <div class="d12">
    225.                 <a href="http://webstajuku.html.xdomain.jp/" target="_blank">HTML/CSSの基礎</a></div>
    226.             </section>
    227.           </div>
    228.           <div class="tr11">
    229.             <section class="td11">CSS 3</section>
    230.             <section class="td11">
    231.               <div class="d12">
    232.                 <a href="http://www.htmq.com/css3/" target="_blank">リファレンス</a>
    233.                 　<a href="http://www.tohoho-web.com/css/specs.htm" target="_blank">CSS3関連規約</a>
    234.                 　<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction" target="_blank" title="CSS レイアウト入門">レイアウト</a>
    235.                 　<a href="http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/background-size_css.php" target="_blank">HTML&CSS3</a></div>
    236.               <div class="d12">
    237.                 <a href="http://www.nemuchan.com/css3/able.html" target="_blank">出来ること</a>
    238.                 　<a href="http://www.webcreatorbox.com/tech/flexbox/" target="_blank">flexboxで決まり</a>
    239.                 　<a href="https://weblan3.com/css/css_property" target="_blank" title="CSSプロパティ一覧">CSSプロパティ</a>
    240.                 　<a href="https://blog.universe-web.jp/5517/" target="_blank" title="CSSのルールセット">ルールセット</a></div>
    241.               <div class="d12">
    242.                 <a href="http://taghtml.com/css/defaultstylesheet.html" target="_blank">Default CSS3</a>
    243.                 　<a href="http://tamachan.tama777.com/Reference/default_css.html" target="_blank">デフォルトCSS</a>
    244.                 　<a href="https://web-manabu.com/html-css20/" target="_blank">リセットCSS</a></div>
    245.               <div class="d12">
    246.                 <a href="https://www.webprofessional.jp/css-viewport-units-quick-start/" target="_blank">CSSのvh/vw</a>
    247.                 　<a href="https://qiita.com/amamamaou/items/bb79bec002a6ff033810" target="_blank" title="window.getComputedStyle() で要素のスタイルを取得する">スタイルを取得</a>
    248.                 　<a href="https://ics.media/entry/200212/" target="_blank" title="CSSグラデーション">CSS Gradient</a></div>
    249.               <div class="d12">
    250.                 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/animation" target="_blank">CSS animation</a>
    251.                 　<a href="https://lopan.jp/css-animation-slideshow/" target="_blank">スライドショー</a></div>
    252.               <div class="d12">
    253.                 <a href="https://www.e-sanwa.co.jp/sbs/column/20171020/" target="_blank">重ね表示</a>
    254.                 　<a href="https://www.webdesignleaves.com/pr/css/css_clip_path.html" target="_blank">clip-path</a></div>
    255.             </section>
    256.           </div>
    257.         </div>
    258.       
    259.         <div class="cap11">
    260.           <div class="tr11">
    261.             <section class="td11">テンプレート</section>
    262.             <section class="td11">
    263.               <div class="d12">
    264.                 <a href="http://photoshopvip.net/archives/84488" target="_blank">FreeHTML5.Co</a></div>
    265.               <div class="d12">
    266.                 <a href="https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834" target="_blank">ブレイクポイント</a>
    267.                 　<a href="https://tree-file.com/web-design/understanding-viewport-for-responsive-webdesign/" target="_blank">viewport</a>
    268.                 　<a href="https://deaimobi.com/breakpoint/#i" target="_blank">ブラウザサイズ</a></div>
    269.               <div class="d12">
    270.                 <a href="https://www.jqueryscript.net/accordion/Create-An-Accordion-Image-Menu-with-jQuery-jQuery-UI.html" target="_blank"></a></div>
    271.               <div class="d12">
    272.                 <a href="https://www.webdesignleaves.com/pr/plugins/swiper_js.html" target="_blank" title="Swiper（v5/v6）の使い方">Swiper</a></div>
    273.             </section>
    274.           </div>
    275.           <div class="tr11">
    276.             <section class="td11">Script</section>
    277.             <section class="td11">
    278.               <div class="d12">
    279.                 <a href="https://www.jqueryscript.net/accordion/Create-An-Accordion-Image-Menu-with-jQuery-jQuery-UI.html" target="_blank">accordionImageMenu</a></div>
    280.               <div class="d12">
    281.                 <a href="https://poland-it-blog.com/fourier_series_programming/#toc2" target="_blank">フーリエ級数</a>
    282.                 　<a href="http://www.maroon.dti.ne.jp/lance/js/" target="_blank">Sample is best! </a></div>
    283.               <div class="d12">
    284.                 <a href="https://www.sejuku.net/blog/47722" target="_blank" title="プロトタイプ(prototype)の使い方">prototype</a>
    285.                 　<a href="https://oshiete.goo.ne.jp/qa/8593427.html" target="_blank" title="複数画像のランダム複数表示">複数画像ランダム表示</a></div>
    286.             </section>
    287.           </div>
    288.         </div>
    289.  
    290.     </section>
    291.   </div>
    292. </body>
    293. </html>

  4. grid box を使ったレイアウト01 　別窓表示
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="utf-8">
    5.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    6.   <title>TITLE</title>
    7.   <style type="text/css">
    8.       *{ margin:0; padding:0; box-sizing:border-box; border:0; outline:0; padding-left: 0;
    9.         vertical-align:baseline; background:transparent; list-style: none; }
    10.       #container{ padding:5px; 
    11.         display:grid;
    12.         grid:60px auto 1fr 60px/ 150px 1fr 200px;
    13.         grid-template-areas:
    14.           "headCnt headCnt headCnt"
    15.           "menu menu menu"
    16.           "leftCnt midCnt rightCnt"
    17.           "footCnt footCnt footCnt";
    18.         height:100vh;
    19.       }
    20.       .headCnt{ grid-area:headCnt; background:#ccf; font-size:36px; display:grid; align-content:center; justify-content: center; }
    21.       #menu{ grid-area: menu; background:#6a6; }
    22.       #menu{ display:grid; grid:40px/ repeat(5,1fr); font-size:0.8em; }
    23.       #menu a{ color:#FFF; text-decoration:none; transition:.5s; 
    24.         display:grid; align-content: center; justify-content: center; line-height:1.8; 
    25.       }
    26.       #menu a:hover{ background:#6d6; }
    27.       .leftCnt{ grid-area:leftCnt; background:#efe; }
    28.       .midCnt{ grid-area:midCnt; background:#eef; }
    29.       .rightCnt{ grid-area:rightCnt; background:#fef; }
    30.       .footCnt{ grid-area:footCnt; background:#ffe; }
    31.     @media screen and (max-width:640px){
    32.       #container{
    33.         grid:60px auto 60px 1fr 60px 60px/ auto;
    34.         grid-template-areas:
    35.         "headCnt"
    36.         "menu"
    37.         "leftCnt"
    38.         "midCnt"
    39.         "rightCnt"
    40.         "footCnt";
    41.       } 
    42.       #menu{ grid:auto/ repeat(auto-fill,100%); }
    43.     }
    44.   </style>
    45. </head>
    46. <body>
    47.   <div id="container">
    48.     <div class="headCnt">タイトル</div>
    49.     <nav id="menu">
    50.         <a href="">HOME</a>
    51.         <a href="">LINK1</a>
    52.         <a href="">LINK2</a>
    53.         <a href="">LINK3</a>
    54.         <a href="">LINK4</a>
    55.     </nav>
    56.     <div class="leftCnt">leftCnt</div>
    57.     <div class="midCnt">midCnt</div>
    58.     <div class="rightCnt">rightCnt</div>
    59.     <div class="footCnt">footCnt</div>
    60.   </div>
    61. </body>
    62. </html>

  5. table を使ったレイアウト01 　別窓表示
    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>文章型トップページ</title>
    6.   <!link href="hpb9tm10_1.css" rel="stylesheet" type="text/css" id="hpb9tm10_1">
    7.   <link href="table01.css" rel="stylesheet" type="text/css">
    8.   
    9. </head>
    10. <body>  
    11.   <div class="wrap">
    12.     <table border="0" class="hpb-head">
    13.       <tbody>
    14.         <tr>
    15.           <td class="hpb-head-cell1"><a href="#SKIP_LINK">タイトル</a></td>
    16.         </tr>
    17.       </tbody>
    18.     </table>
    19.  
    20.     <table  class="hpb-main">
    21.       <tbody>
    22.         <tr>
    23.           <td class="hpb-side-cell3">
    24.             <table border="0" class="hpb-vmenu1">
    25.             <tbody>
    26.               <tr>
    27.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 1</a></td>
    28.               </tr>
    29.               <tr>
    30.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 2</a></td>
    31.               </tr>
    32.               <tr>
    33.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 3</a></td>
    34.               </tr>
    35.               <tr>
    36.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 4</a></td>
    37.               </tr>
    38.               <tr>
    39.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 5</a></td>
    40.               </tr>
    41.               <tr>
    42.                 <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 6</a></td>
    43.               </tr>
    44.             </tbody>
    45.             </table>
    46.           </td>
    47.  
    48.           <td class="hpb-cnt-cell3-x"><a id="SKIP_LINK"></a>
    49.             <table border="0" class="hpb-lb-tb1">
    50.             <tbody>
    51.               <tr>
    52.                 <td class="hpb-lb-tb1-cell1"><span class="hpb-body4">トップページ</span></td>
    53.                 <td class="hpb-lb-tb1-cell2"><img src="https://kurage.ready.jp/jtaisetu/jnenkan/150916b.jpg" alt="イメージ" width="406" height="305" style="vertical-align: bottom;"></td>
    54.               </tr>
    55.             </tbody>
    56.             </table>
    57.             <table border="0" class="hpb-lb-tb1">
    58.             <tbody>
    59.               <tr>
    60.                 <td colspan="2" class="hpb-lb-tb1-cell3"><br>
    61.                   <div class="hpb-lay-photo1"><br>
    62.                     <table width="100%" border="0" class="hpb-subh02">
    63.                     <tbody>
    64.                       <tr>
    65.                         <td class="hpb-subh02-cell1">ここに最新情報のタイトルを書きます</td>
    66.                       </tr>
    67.                     </tbody>
    68.                     </table>
    69.                     <table width="100%" border="0" class="hpb-dp-tb1">
    70.                     <tbody>
    71.                       <tr>
    72.                         <td align="left" valign="top" class="hpb-dp-tb1-cell1">最近更新した内容や、新しい話題について記述します。<br>
    73.                         ホームページを訪れる方が、最新情報にスムーズたどり着けるための気配りです。 </td>
    74.                         <td width="186" align="right" valign="top" class="hpb-dp-tb1-cell2"><img src="https://kurage.ready.jp/img/panda15.gif" alt="" width="186" border="0"></td>
    75.                       </tr>
    76.                     </tbody>
    77.                     </table>
    78.                   </div>
    79.                   <div class="hpb-lay-photo1"><br>
    80.                     <table width="100%" border="0" cellpadding="0" cellspacing="0" class="hpb-subh02">
    81.                     <tbody>
    82.                       <tr>
    83.                         <td class="hpb-subh02-cell1">ここに主なページのタイトルを書きます</td>
    84.                       </tr>
    85.                     </tbody>
    86.                     </table>
    87.                     <table width="100%" border="0" cellpadding="0" cellspacing="0" class="hpb-dp-tb1">
    88.                     <tbody>
    89.                       <tr>
    90.                         <td align="left" valign="top" class="hpb-dp-tb1-cell1">ホームページの主なページの概要を記述します。<br>
    91.                         トップページでホームページの内容を簡潔に説明すれば、訪れるかたに効果的にアピールすることができます。</td>
    92.                         <td width="186" align="right" valign="top" class="hpb-dp-tb1-cell2"><img src="https://kurage.ready.jp/img/mi12.gif" alt="" width="186" height="146" border="0"></td>
    93.                       </tr>
    94.                     </tbody>
    95.                     </table>
    96.                   </div>
    97.                   <br>
    98.                 </td>
    99.               </tr>
    100.             </tbody>
    101.           </table>
    102.           </td>
    103.         </tr>
    104.         <tr>
    105.           <td height="18" valign="top" class="hpb-side-cell4"> </td>
    106.           <td valign="top" class="hpb-cnt-cell4"> </td>
    107.         </tr>
    108.       </tbody>
    109.     </table>
    110.   </div>
    111. </body>
    112. </html>

■ 参考サイト

フリーテンプレート 　align-items 　align-content