レイアウトサンプル
ここでは、幾つかのレイアウト例を表示してみました。
参考1
参考2
- flex box を使ったレイアウト01flex01
- flex box を使ったレイアウト02flex02
- flex box を使ったレイアウト03flex03
- grid box を使ったレイアウト01grid01
- table を使ったレイアウト01table01
- flex box を使ったレイアウト01
別窓表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>HTML5とCSS3によるページサンプル</title> <style> body { width:400px; margin:10px auto; } header, nav, section, footer, article { display:block; border:1px solid #ccc; margin:5px; padding:5px 10px; background: #eee; } article { background: #efe; } header { text-align:center; padding:5px 0 10px 0; } header ul, header li { list-style-type:none; display:inline; padding: 0 10px; } .flexbox { display:flex; border:1px solid #c99; margin:5px; } nav { flex:1; } section { flex:2; } nav li { list-style-type:none; margin-left: -2em; } footer { text-align: center; } </style> </head> <body> <header> <h1>header</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </header> <div class="flexbox"> <nav> <h1>Navi</h1> <ul> <li><a href="http://www.tagindex.com/html5/basic/basic.html">HTML 5</a></li> <li><a href="http://www.htmq.com/html5/index.shtml">リファレンス</a></li> <li><a href="http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html">flex</a></li> <li><a href="#">example 4 </a></li> <li><a href="#">example 5 </a></li> <li><a href="#">example 6 </a></li> <li><a href="#">example 7 </a></li> </ul> </nav> <section> <h1>section</h1> <article> <h1>section-article1</h1> <p>ここは、article1</p> </article> <article> <h1>section-article2</h1> <p>ここは、article2</p> </article> </section> </div> <footer> footer </footer> </body> </html>
- flex box を使ったレイアウト02
別窓表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" /> <title>Flexbox sample 13</title> <style> body { font: 24px Helvetica; background: #999; } header, footer{ margin:4px; padding:5px; min-height:44px; border-radius:7px; background:#feb; } .top-nav { display:flex; justify-content:center; font-size:14px; background: #eef; margin:4px; border-radius:7px; } .top-nav a { margin:5px 10px; border-radius:5px; background:#6B9; color:#fff; display:block; padding:10px 15px; text-decoration:none; } .top-nav li { list-style-type:none; position:relative; left:-1.5em; } .top-nav li:first-child { margin-right: auto; } .top-nav .logo { background: #99f; padding:0px; width:88px;height:34px; } .top-nav .logo img { position:relative; width:100px; height:36px; } .main { min-height:300px; margin:0px; padding:0px; display:flex; flex-flow:row; } .main > article{ margin:4px; padding:5px; border-radius:7px; background:#dd8; flex:3; order:2; } .main > nav{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px; background: #ccccff; flex:1; order:1; } .main >nav ul{ font-size:14px; list-style-type:none; } .main >nav li { list-style-type:none; position:relative; left:-2em; } .main >nav a { margin:5px 10px; border-radius:5px; background:#6c9; color:#eee; display:block; padding:5px; text-decoration:none; } .main > aside{ margin:4px; padding:5px; border:1px solid #88b; border-radius:7px; background: #ccf; flex:1; order:3; } .main > aside p{ font-size:14px; } .main .contents { display:flex; justify-content:center; align-items:center; } .main .contents .align { width:300px; height:150px; font-size:14px; padding:8pt; border-radius:7px; background:#F5F0CF; } </style> </head> <body> <header>header</header> <ul class="top-nav"> <li><a href="../../../index.html" class="logo"><img src="LOyuki14.gif" ></a></li> <li><a href="http://www.webcreatorbox.com/tech/flexbox/" target="_blank">Menu 1</a></li> <li><a href="http://qiita.com/takanorip/items/a51989312160530d89a1" target="_blank">Menu 2</a></li> <li><a href="https://web-designer.cman.jp/css_ref/abc_list/flexbox/" target="_blank">Menu 3</a></li> <li><a href="http://www.tohoho-web.com/css/prop/flex.htm" target="_blank">Menu 4</a></li> </ul> <div class="main"> <nav>side-nav <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> <article class="contents"> <div class="align"> このアイテムは、中央枠に justify-content:center; align-items:center; によって、左右、上下の中央に配置 </div> </article> <aside>aside <p> この横3枠の並びは<br>flex: と order: で配置 </p> </aside> </div> <footer>footer</footer> </body> </html>
- flex box を使ったレイアウト03
別窓表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" > <title>レスポンシブハンバーガー Web page</title> <style> *{ margin:0; } 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); } .wrap{ max-width:1200px; margin: 0px auto; padding:10px; } #waku01{ max-width: 100%; overflow:hidden; padding:15px 0 0; display:flex; align-items: center; text-align:center; } #topL { width:10%; } #topC { width:70%; color:#900; font-size:36px; font-weight:bold; height: 40px; font-family:Comic Sans MS } #topR { width:20%; } #waku11{ position:relative; max-width: 100%; margin:5px auto; padding:4px 8px; z-index:1; } .gnav-waku{ position:relative; margin:0 ; padding:0; z-index:100; } .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; } /*ボタン枠装飾*/ .gnav-waku input:checked ~ label:before { display:inline-block;color:#fff; content: '\02630'; } /* '三'; '\f078'; */ .gnav-waku label:hover { opacity:0.7; } /*ボタンホバー時*/ .gnav-waku label:before{ color:#44d; font-weight: bold; content:'\02715'; } /* 'X \f00d' */ .gnav-waku input { display:none; } /*チェックは不可視*/ .gnav-waku input:checked ~ .gnav{ transform:translate(0, -300px); transition:0.5s; } /* 中身を表示 クリックで中身非表示 */ .gnav{ transition:0.5s; position:relative; top:0; padding-left:0px; display:flex; margin: 0px auto; } .gnav li { position:relative; width:19vw; margin:0; padding:0; text-align:center; z-index:100; list-style:none; } .gnav img { width:98%; height:100%; } .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; } .gnav li:hover > a{ background:#30b9ba; } .gnav li ul li{ overflow:hidden; width:100%; height:0; margin:0px; color:#ffe; transition:.3s;} .gnav li ul li a{ background:#30b9ba; } .gnav li:hover li:hover > a{ background:#80b9ba; } .gnav li ul{ position:absolute; top:100%; left:0; width:100%; margin:0; padding:0; } .gnav li ul li{ overflow:hidden; width:100%; height:0; color:#ffe; transition:.4s; } .gnav li:hover > ul > li{ overflow: visible; height: 32px;} .gnav li ul li ul{ top: 0; left:100%; } .gnav li ul li ul:before{ /* ul 直前に指定 */ position: absolute; content: ""; top: 9px; left: -12px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #eeeeee; /* 三角マーク色 */ } @media screen and (min-width:960px) { /* pc用 */ .gnav{ width:950px; padding-left:1rem;} .gnav li:last-child ul li ul{ left: -100%; width:100%;} .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;} .gnav li:last-child ul li ul:before{ /* 右端リストの三角マーク ul 直前に指定 */ position:absolute; content:""; top:9px; left: 100%; margin-left: -4px; border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */ } /* 右端前リストの三角マーク */ .gnav li:nth-last-child(2) ul li ul:before { position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px; border: 8px solid transparent; border-right-color:#eee; } } @media (min-width:560px) and ( max-width:959px) { /* タブレット用 */ .wrap{ width:95vw; } #topL, #topR{ width:0; display:none; } #topC{ width:100%;} .gnav{ width:98%; } .gnav li:last-child ul li ul{left: -100%; width:100%;} .gnav li:nth-last-child(2) ul li ul {left:-100%; width:100%;} .gnav li:last-child ul li ul:before{ /* 右端リストの三角マーク ul 直前に指定 */ position:absolute; content:""; top:9px; left: 100%; margin-left: -4px; border:8px solid transparent; border-right-color:#eee; /* 三角マーク色 */ } /* 右端前リストの三角マーク */ .gnav li:nth-last-child(2) ul li ul:before { position: absolute; content: ""; top: 9px; left: 100%; margin-left: -4px; border: 8px solid transparent; border-right-color:#eee; } } @media (max-width:559px) { /* スマホ用 */ .wrap{ width:95%; } #topL, #topR{ width:0; display:none; } #topC{ width:100%;;} .gnav{ position: fixed; width:33vw; margin:5em auto 0 0.5em; display:flex; flex-direction:column; z-index:90; } .gnav-waku label { 1color: #ede; background:#4b8; opacity:1; } /*ボタン濃く*/ .gnav li ul:before{ position: absolute; content: ""; top: 9px; left: -12px; width: 0; height: 0; border: 8px solid transparent; border-left-color: #eee; } /* ul 直前三角マーク色 */ .gnav li{ width: 95%; margin:0 auto; padding: 0; text-align:center; } .gnav li ul{ top:3px; left:100%; } #waku11{ position:relative; max-width: 1100px; margin:5px auto; padding:4px 8px; z-index:1; } } .table10 { display: flex; flex-direction:column;line-height:1.6em; } .cap10, .cap11 { display: flex; flex-direction:row; } .cap10 { text-align: center; } .tr11 { display: flex; flex-direction:row; } .td11 { display: flex; flex-direction:column; } .table10, .cap11, .tr11 { width:100%; margin: 1px auto; } .cap00 { margin-top:12px; font-size:20px; text-align: center; color:#906; } .tr11 section { margin:0 1px; border-radius:5px; padding:3px; flex-grow:1; } .tr11 section:nth-child(2n+1) { width:20%; background-color:#eee; } .tr11 section:nth-child(2n) { width:80%; background-color:#eef; } @media (max-width:559px) { /* スマホ用 560 960 */ #waku11 { position:absolute; top:4.5em; padding:4px 2px; z-index:1; } .tr11 { width:92vw; } /* 表の折返し */ .cap10, .cap11 { display: flex; flex-direction:column; } .cap10 div:nth-child(2n) { display:none; } } </style> </head> <body> <div class="wrap"> <section id="waku01"> <div id="topL"></div> <div id="topC">レスポンシブ Web page</div> <div id="topR"></div> </section> <section class="gnav-waku" id="gnav-waku"> <input type="checkbox" id="label1" > <label for="label1"></label> <ul class='gnav'> <li><a href='.index.html' title='top page'><img src='https://kurage.ready.jp/img/LOyuki14.gif'></a> <ul class='gnav-ul'> <li><a href='#'>Menu 11</a></li> <li><a href='#'>Menu 12</a> <ul> <li><a href='#'>Menu 121</a></li> <li><a href='#'>Menu 122</a></li> </ul> </li> <li><a href='#'>Menu 13</a></li> </ul> </li> <li><a href='#'>Menu 2</a> <ul class='gnav-ul'> <li><a href='#'>Menu 21</a> <ul> <li><a href='#'>Menu 211</a></li> <li><a href='#'>Menu 212</a></li> <li><a href='#'>Menu 213</a></li> </ul> </li> <li><a href='#'>Menu 22</a> <ul> <li><a href='#'>Menu 221</a></li> <li><a href='#'>Menu 222</a></li> <li><a href='#'>Menu 223</a></li> </ul> </li> <li><a href='#'>Menu 23</a></li> </ul> </li> <li><a href='#'>Menu 2</a> <ul class='gnav-ul'> <li><a href='#'>Menu 21</a> <ul> <li><a href='#'>Menu 211</a></li> </ul> </li> <li><a href='#'>Menu 22</a></li> <li><a href='#'>Menu 23</a> <ul> <li><a href='#'>Menu 231</a></li> </ul> </li> </ul> </li> <li><a href='#'>Menu 3</a> <ul class='gnav-ul'> <li><a href='#'>Menu 31</a> <ul> <li><a href='#'>Menu 311</a></li> </ul> </li> <li><a href='#'>Menu 32</a></li> </ul> </li> <li><a href='#'>Menu 4</a> <ul class='gnav-ul'> <li><a href='#'>Menu 41</a></li> <li><a href='#'>Menu 42</a> <ul> <li><a href='#'>Menu 421</a></li> </ul> </li> <li><a href='#'>Menu 43</a></li> </ul> </li> </ul> </section> <section id="waku11" > <div class="table10" > <div class="cap10"> <div class="tr11"> <section class="td11">分 類</section> <section class="td11">項 目</section> </div> <div class="tr11"> <section class="td11">分 類</section> <section class="td11">項 目</section> </div> </div> <div class="cap11"> <div class="tr11"> <section class="td11">HTML 5</section> <section class="td11"> <div class="d12"> <a href="http://www.tohoho-web.com/html5/index.html" target="_blank" title="とほほ">HTML5とは</a> <a href="http://www.tagindex.com/html5/basic/index.html" target="_blank" title="tagindex HTML5の基本">HTML5の基本</a> <a href="http://www.htmq.com/html5/index.shtml" target="_blank" title="htmq.com">HTML5リファレンス</a></div> <div class="d12"> <a href="http://www.html5-memo.com/first-html5/html5-001/" target="_blank" title="はじめてのHTML5">はじめてのHTML5</a> <a href="http://www.html5-memo.com/html5-site/iphone_markup/" target="_blank">HTML5でサイト</a> <a href="https://www.asobou.co.jp/blog/web/html5-3" target="_blank">コンテンツ・モデル</a></div> <div class="d12"> <a href="http://www.webdlab.com/html/html5/" target="_blank">Webデザインラボ</a></div> <div class="d12"> <a href="http://www.pori2.net/html5/index.html" target="_blank">HTML5時代のJavaScript入門</a></div> <div class="d12"> <a href="http://webstajuku.html.xdomain.jp/" target="_blank">HTML/CSSの基礎</a></div> </section> </div> <div class="tr11"> <section class="td11">CSS 3</section> <section class="td11"> <div class="d12"> <a href="http://www.htmq.com/css3/" target="_blank">リファレンス</a> <a href="http://www.tohoho-web.com/css/specs.htm" target="_blank">CSS3関連規約</a> <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction" target="_blank" title="CSS レイアウト入門">レイアウト</a> <a href="http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/background-size_css.php" target="_blank">HTML&CSS3</a></div> <div class="d12"> <a href="http://www.nemuchan.com/css3/able.html" target="_blank">出来ること</a> <a href="http://www.webcreatorbox.com/tech/flexbox/" target="_blank">flexboxで決まり</a> <a href="https://weblan3.com/css/css_property" target="_blank" title="CSSプロパティ一覧">CSSプロパティ</a> <a href="https://blog.universe-web.jp/5517/" target="_blank" title="CSSのルールセット">ルールセット</a></div> <div class="d12"> <a href="http://taghtml.com/css/defaultstylesheet.html" target="_blank">Default CSS3</a> <a href="http://tamachan.tama777.com/Reference/default_css.html" target="_blank">デフォルトCSS</a> <a href="https://web-manabu.com/html-css20/" target="_blank">リセットCSS</a></div> <div class="d12"> <a href="https://www.webprofessional.jp/css-viewport-units-quick-start/" target="_blank">CSSのvh/vw</a> <a href="https://qiita.com/amamamaou/items/bb79bec002a6ff033810" target="_blank" title="window.getComputedStyle() で要素のスタイルを取得する">スタイルを取得</a> <a href="https://ics.media/entry/200212/" target="_blank" title="CSSグラデーション">CSS Gradient</a></div> <div class="d12"> <a href="https://developer.mozilla.org/ja/docs/Web/CSS/animation" target="_blank">CSS animation</a> <a href="https://lopan.jp/css-animation-slideshow/" target="_blank">スライドショー</a></div> <div class="d12"> <a href="https://www.e-sanwa.co.jp/sbs/column/20171020/" target="_blank">重ね表示</a> <a href="https://www.webdesignleaves.com/pr/css/css_clip_path.html" target="_blank">clip-path</a></div> </section> </div> </div> <div class="cap11"> <div class="tr11"> <section class="td11">テンプレート</section> <section class="td11"> <div class="d12"> <a href="http://photoshopvip.net/archives/84488" target="_blank">FreeHTML5.Co</a></div> <div class="d12"> <a href="https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834" target="_blank">ブレイクポイント</a> <a href="https://tree-file.com/web-design/understanding-viewport-for-responsive-webdesign/" target="_blank">viewport</a> <a href="https://deaimobi.com/breakpoint/#i" target="_blank">ブラウザサイズ</a></div> <div class="d12"> <a href="https://www.jqueryscript.net/accordion/Create-An-Accordion-Image-Menu-with-jQuery-jQuery-UI.html" target="_blank"></a></div> <div class="d12"> <a href="https://www.webdesignleaves.com/pr/plugins/swiper_js.html" target="_blank" title="Swiper(v5/v6)の使い方">Swiper</a></div> </section> </div> <div class="tr11"> <section class="td11">Script</section> <section class="td11"> <div class="d12"> <a href="https://www.jqueryscript.net/accordion/Create-An-Accordion-Image-Menu-with-jQuery-jQuery-UI.html" target="_blank">accordionImageMenu</a></div> <div class="d12"> <a href="https://poland-it-blog.com/fourier_series_programming/#toc2" target="_blank">フーリエ級数</a> <a href="http://www.maroon.dti.ne.jp/lance/js/" target="_blank">Sample is best! </a></div> <div class="d12"> <a href="https://www.sejuku.net/blog/47722" target="_blank" title="プロトタイプ(prototype)の使い方">prototype</a> <a href="https://oshiete.goo.ne.jp/qa/8593427.html" target="_blank" title="複数画像のランダム複数表示">複数画像ランダム表示</a></div> </section> </div> </div> </section> </div> </body> </html>
- grid box を使ったレイアウト01
別窓表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>TITLE</title> <style type="text/css"> *{ margin:0; padding:0; box-sizing:border-box; border:0; outline:0; padding-left: 0; vertical-align:baseline; background:transparent; list-style: none; } #container{ padding:5px; display:grid; grid:60px auto 1fr 60px/ 150px 1fr 200px; grid-template-areas: "headCnt headCnt headCnt" "menu menu menu" "leftCnt midCnt rightCnt" "footCnt footCnt footCnt"; height:100vh; } .headCnt{ grid-area:headCnt; background:#ccf; font-size:36px; display:grid; align-content:center; justify-content: center; } #menu{ grid-area: menu; background:#6a6; } #menu{ display:grid; grid:40px/ repeat(5,1fr); font-size:0.8em; } #menu a{ color:#FFF; text-decoration:none; transition:.5s; display:grid; align-content: center; justify-content: center; line-height:1.8; } #menu a:hover{ background:#6d6; } .leftCnt{ grid-area:leftCnt; background:#efe; } .midCnt{ grid-area:midCnt; background:#eef; } .rightCnt{ grid-area:rightCnt; background:#fef; } .footCnt{ grid-area:footCnt; background:#ffe; } @media screen and (max-width:640px){ #container{ grid:60px auto 60px 1fr 60px 60px/ auto; grid-template-areas: "headCnt" "menu" "leftCnt" "midCnt" "rightCnt" "footCnt"; } #menu{ grid:auto/ repeat(auto-fill,100%); } } </style> </head> <body> <div id="container"> <div class="headCnt">タイトル</div> <nav id="menu"> <a href="">HOME</a> <a href="">LINK1</a> <a href="">LINK2</a> <a href="">LINK3</a> <a href="">LINK4</a> </nav> <div class="leftCnt">leftCnt</div> <div class="midCnt">midCnt</div> <div class="rightCnt">rightCnt</div> <div class="footCnt">footCnt</div> </div> </body> </html>
- table を使ったレイアウト01
別窓表示
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>文章型トップページ</title> <!link href="hpb9tm10_1.css" rel="stylesheet" type="text/css" id="hpb9tm10_1"> <link href="table01.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrap"> <table border="0" class="hpb-head"> <tbody> <tr> <td class="hpb-head-cell1"><a href="#SKIP_LINK">タイトル</a></td> </tr> </tbody> </table> <table class="hpb-main"> <tbody> <tr> <td class="hpb-side-cell3"> <table border="0" class="hpb-vmenu1"> <tbody> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 1</a></td> </tr> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 2</a></td> </tr> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 3</a></td> </tr> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 4</a></td> </tr> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 5</a></td> </tr> <tr> <td class="hpb-vmenu1-idle1"><a href="#" class="hpb-vmenu1-link1">リンク 6</a></td> </tr> </tbody> </table> </td> <td class="hpb-cnt-cell3-x"><a id="SKIP_LINK"></a> <table border="0" class="hpb-lb-tb1"> <tbody> <tr> <td class="hpb-lb-tb1-cell1"><span class="hpb-body4">トップページ</span></td> <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> </tr> </tbody> </table> <table border="0" class="hpb-lb-tb1"> <tbody> <tr> <td colspan="2" class="hpb-lb-tb1-cell3"><br> <div class="hpb-lay-photo1"><br> <table width="100%" border="0" class="hpb-subh02"> <tbody> <tr> <td class="hpb-subh02-cell1">ここに最新情報のタイトルを書きます</td> </tr> </tbody> </table> <table width="100%" border="0" class="hpb-dp-tb1"> <tbody> <tr> <td align="left" valign="top" class="hpb-dp-tb1-cell1">最近更新した内容や、新しい話題について記述します。<br> ホームページを訪れる方が、最新情報にスムーズたどり着けるための気配りです。 </td> <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> </tr> </tbody> </table> </div> <div class="hpb-lay-photo1"><br> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="hpb-subh02"> <tbody> <tr> <td class="hpb-subh02-cell1">ここに主なページのタイトルを書きます</td> </tr> </tbody> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="hpb-dp-tb1"> <tbody> <tr> <td align="left" valign="top" class="hpb-dp-tb1-cell1">ホームページの主なページの概要を記述します。<br> トップページでホームページの内容を簡潔に説明すれば、訪れるかたに効果的にアピールすることができます。</td> <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> </tr> </tbody> </table> </div> <br> </td> </tr> </tbody> </table> </td> </tr> <tr> <td height="18" valign="top" class="hpb-side-cell4"> </td> <td valign="top" class="hpb-cnt-cell4"> </td> </tr> </tbody> </table> </div> </body> </html>