site name

about

ここはこういうサイトです。

こんなものを取り扱っています。

information

超絶シンプルなセットです。サイト名は英語表記の方がかっこいいかもしれません。

ページが縦長になったので、各セクションにidを指定してメニューのリンクから飛べるようにしました。また、右下にページトップへのジャンプボタンを固定しています。

リンクと強調はこんな感じです。

source

head <meta charset="UTF-8"><!--文字コードの指定--> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"><!--リセットCSS--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald"><!--googleフォント--> <style type="text/css" media="screen and (min-width:750px)"> /* 画面幅750px以上用CSS */ /* 共通設定 */ html { font-size: 62.5%; } body { font-size: 1.3rem; color: #ffffff; background-color: #000000; padding-top: 15rem; } a { text-decoration: none; color: #ffffff; transition: 0.8s; } main a { background-color: #111111; } main a:visited { color: #aaaaaa; } h1 { position: relative; font-size: 15.0rem; text-align: center; padding-bottom: 0.3em; z-index: 0; } h2 { font-family: 'Oswald', sans-serif; font-size: 2.0em; border-bottom: solid 2px #ffffff; padding-top: 2em; margin-bottom: 1em; } h3 { font-family: 'Oswald', sans-serif; font-size: 1.5em; padding: 0.5em 0em; } em { font-style: normal; font-weight: bolder; color: #888888; } input,textarea,button,select { display: block; color: #ffffff; background-color: #000000; font-family: inherit; font-size: 100%; border: solid 1px #ffffff; padding: 0.2em; } /* 段落設定 */ section { padding: 3em 1em; margin: 10rem auto; width: 50%; min-width: 600px; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } article { margin: 1em 2em; } p { padding: 0em 1em; } /* ヘッダー設定 */ header { border-top: solid 3px #ffffff; border-bottom: solid 3px #ffffff; font-family: 'Oswald', sans-serif; margin-bottom: 30%; } header > * { margin: 0% auto; width: 70%; min-width: 700px; } ul,ol { list-style: none; } nav { position: relative; padding-top: 2em; z-index: 1; } nav ul { display: flex; justify-content: center; } nav li { margin: 0.5em 2em; } nav a { font-size: 4.0rem; } nav a:hover { color: #444444; } /* 小説部分（リスト）設定 */ ul[class],ol[class] { margin: 1.3rem; } .long { counter-reset: long; } .long li::before { counter-increment: long; content: counter(long) "話";/* */ margin-right: 1em; } .short { font-size: 0em; } .short li { display: inline; margin-right: 1em; font-size: 1.3rem; } li > span { margin-right: 1em; color: #bbbbbb; } /* フッター（画面上部へのジャンプリンク）設定 */ footer { text-align: right; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; padding-top: 10%; } footer a { display: inline-block; position: fixed; bottom: 1em; right: 3em; z-index: 2; margin-top: 1em; padding: 1em; color: #ffffff; background-color: #000000; border: solid 2px #ffffff; } #top { padding-top: 15rem; } </style> <style type="text/css" media="screen and (max-width:749px)"> /* 画面幅749px以下用CSS */ /* 共通設定 */ html { font-size: 62.5%; } body { font-size: 1.2rem; color: #ffffff; background-color: #000000; } a { text-decoration: none; color: #ffffff; transition: 0.8s; } main a { color: #ffffff; background-color: #555555; } main a:visited { color: #cccccc; } h1 { font-size: 3.0rem; text-align: right; box-sizing: border-box; padding: 0em 1em 0.3em 0em; border-top: solid 3px #ffffff; border-bottom: solid 3px #ffffff; } h2 { font-family: 'Oswald', sans-serif; font-size: 1.5em; border-bottom: solid 2px #ffffff; padding-top: 2em; margin-bottom: 1em; } h3 { font-family: 'Oswald', sans-serif; font-size: 1.2em; padding: 0.5em 0em; } em { font-style: normal; font-weight: bolder; color: #888888; } input,textarea,button,select { display: block; color: #ffffff; background-color: #000000; font-family: inherit; font-size: 100%; border: solid 1px #ffffff; padding: 0.2em; } .right { text-align: right; } /* 段落設定 */ section { padding: 0em 1em; margin: 2rem auto; width: 90%; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } article { margin: 1em 2em; } p { padding: 0em 1em; } /* ヘッダー設定 */ header { font-family: 'Oswald', sans-serif; margin-bottom: 2rem; } header > * { margin: 0% auto; width: 100%; } ul,ol { list-style: none; } nav { position: relative; padding-top: 2em; z-index: 1; } nav ul { display: flex; justify-content: center; margin: 0% auto; width: 80%; } nav li { margin: 0.5em 2em; } nav a { font-size: 2.0rem; } nav a:hover { color: #999999; } /* 小説部分（リスト）設定 */ ul[class],ol[class] { margin: 1.3rem; } .long { counter-reset: long; } .long li::before { counter-increment: long; content: counter(long) "話"; margin-right: 1em; } .short { font-size: 0em; } .short li { display: inline; margin-right: 1em; font-size: 1.2rem; } li > span { margin-right: 1em; color: #bbbbbb; } /* フッター（画面上部へのジャンプリンク）設定 */ footer { text-align: right; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; padding-top: 10%; } footer a { display: inline-block; position: fixed; bottom: 1em; right: 1em; z-index: 2; margin-top: 1em; padding: 0.5em; color: #000000; background-color: rgba(255,255,255,0.7); } </style>

body <!-- ページトップへのリンク用空タグ --> <a id="top"></a> <!-- ここからヘッダー --> <header> <nav> <ul> <li><a href="#info">info</a></li><!-- ※sectionのidを変更する際は#以降も合わせて変更してください。 --> <li><a href="#log">log</a></li> <li><a href="#text">text</a></li> <li><a href="#mail">mail</a></li> </ul> </nav> <h1>site name</h1> </header> <!-- ここまでヘッダー --> <!-- ここからメインコンテンツ --> <main> <!-- ここからインフォメーション --> <section id="info"><!-- 各sectionのid値は変更可※メニューのリンク部分も合わせて変更してください。 --> <h2>about</h2> <p>サイトの説明や注意事項等</p> <h3>information</h3> <p><a href="">リンク</a>と<em>強調</em></p> </section> <!-- ここまでインフォメーション --> <!-- ここから更新履歴 --> <section id="log"> <h2>update log</h2> <article> <h3>00/00</h3> <p>○○の×話を更新しました。</p> </article> <article> <h3>00/00</h3> <p>△△の□話を更新しました。</p> </article> <div class="right"><a href="">more</a></div> </section> <!-- ここまで更新履歴 --> <!-- ここから小説 --> <section id="text"> <h2>novel</h2> <h3>novel</h3> <ul class="novel"><!-- 縦並び --> <li><a href="">色は匂えど</a></li> <li><span>佐藤</span><a href="">散りぬるを</a></li> </ul> <h3>long</h3> <ol class="long"><!-- 話数自動挿入 --> <li><a href="">あいうえお</a></li> <li><a href="">かきくけこ</a></li> <li><a href="">さしすせそ</a></li> <li><a href="">たちつてと</a></li> <li><a href="">なにぬねの</a></li> </ol> <h3>short</h3> <ul class="short"><!-- 横並び --> <li><a href="">はひふへほ</a></li> <li><a href="">まみむめも</a></li> <li><a href="">やいゆえよ</a></li> <li><a href="">らりるれろ</a></li> <li><a href="">わいうえを</a></li> <li><a href="">ん</a></li> </ul> </section> <!-- ここまで小説 --> <!-- ここからメールフォーム --> <section id="mail"> <h2>mailform</h2> <p>ここはこういうサイトです。</p> <p>こんなものを取り扱っています。 <input type="text" placeholder="お名前"> <textarea cols="20" rows="3" placeholder="ご意見、ご感想をどうぞ。"></textarea> <input type="submit" value="送信"></p> </section> <!-- ここまでメールフォーム --> </main> <!-- ここまでメインコンテンツ --> <!-- ここからフッター --> <footer> <a href="#top">↑back to top</a> </footer> <!-- ここまでフッター -->

update log

novel

novel

• 色は匂えど
• 散りぬるを

小説

• 佐藤いろはにほへと
• 鈴木ちりぬるを
• 高橋わかよたれそ
• 田中つねならむ
• 伊藤ういのおくやま

long

1. あいうえお
2. かきくけこ
3. さしすせそ
4. たちつてと
5. なにぬねの

short

• はひふへほ
• まみむめも
• やいゆえよ
• らりるれろ
• わをん

クラス名→novel：縦並び、long：話数自動挿入、short：横並びで設定しています。

li内の文字をspanで囲むと色が変わって右側に一文字分のスペースが空きます。

mailform

ここはこういうサイトです。

こんなものを取り扱っています。