ここは××と□□メインの○○サイトです。
△△な内容のコンテンツを多く取り扱っています。そういったものが苦手だという方は閲覧をお控えください。
スマホ向けのテンプレートです。トップページとインフォメーションは同じページにしてもいいと思います。リンクと強調はこんな感じです。
スマホから編集することを考えて、なるべく少ないタグで作成（するよう努力）しました。文章構造などを気にしない方は段落を囲っているsectionも消しちゃってください。※見た目は変わりません。
<meta charset="UTF-8"><!--文字コードの指定--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web"><!--GoogleFonts --> <style type="text/css"> /* フォントのライセンス表記 */ /* 'Titillium Web' is licensed under the Open Font License. https://fonts.google.com/specimen/Rajdhani */ /* リセットCSS */ /* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bolder}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} /* 基本設定 */ html { font-size: 62.5%; } body { margin: 3em auto; width: 90%; max-width: 500px; box-sizing: border-box; font-size: 1.2rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 170%; color: #000000; background-color: #ffffff; } a { text-decoration: none; color: #141f3e; background-color: #dadada; } h1,h2,h3 { font-family: 'Titillium Web', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; } h1 { padding-bottom: 1em; text-align: center; font-size: 3.0rem; } h2 { display: inline-block; padding: 0.2em 1em; margin: 1em 0em; font-size: 1.2em; color: #ffffff; background-color: #141f3e; } h3 { margin: 0.2em 0em 0.5em 0.5em; font-size: 1.1em; font-weight: bolder; } em { font-style: normal; border-bottom: dashed 1px #666666; } ul,ol { list-style: none; } input,textarea,button,select { padding: 0.2em; border: solid 2px #4b4f5c; font-size: 100%; font-family: inherit; } textarea { max-width: 90%; } /* 段落設定 */ p { padding: 0em 1em; } /* ヘッダー（トップページ）設定 */ header { padding: 3em 0em; text-align: center; font-family: 'Titillium Web', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; } header p { font-size: 1rem; } nav { margin: 2em auto; } nav li a { display: inline-block; padding: 0.5em; margin: 0.5em auto; width: 40%; background-color: #141f3e; color: #ffffff; } nav li a:hover { background-color: #4b4f5c; } /* ブログ設定 */ article { margin: 0em auto 2em; width: 95%; padding-bottom: 2em; border: solid 2px #141f3e; } span.time { display: inline-block; margin-left: 1.5em; font-size: 0.8em; } footer.blog { text-align: right; } footer.blog a { margin: 0em 1em; } </style>
<header> <h1>sitename</h1> <p>サイトの説明等</p> <nav> <ul> <li><a href="URL">item1</a></li> <li><a href="URL">item2</a></li> <li><a href="URL">item3</a></li> <li><a href="URL">item4</a></li> </ul> </nav> <p>since 00/00/00</p> <p>00000hit</p> </header>
<h1>sitename</h1> <section> <h2>about</h2> <p>ここは××な○○サイトです。</p> <p>△△な内容のコンテンツを多く取り扱っています。そういったものが苦手だという方は閲覧をお控えください。</p> </section> <section> <h2>heading2</h2> <h3>heading3</h3> <p>説明文と<a href="">リンク</a>と<em>強調</em></p> <p><textarea></textarea><br> <input type="submit" value="送信ボタン"></p> </section>
<h1>update log</h1> <article> <h2>○○+１<span class="time">00/00/00</span></h2> <p>○○を更新しました。</p> </article> <article> <h2>××+１<span class="time">00/00/00</span></h2> <p>××を更新しました。</p> </article> <footer class="blog"> prev<a href="">next</a> </footer>