サイト名

about

ここは○○サイトです。
○○が××するあれこれを掲載しています。

information

シンプルなトップページです。リンクと強調はこんな感じです。

画面幅650pxを境にデザインが変わります。
メニューはPC→画面下部、モバイル→画面上部に固定しています。広告が表示されるページでご使用になる場合は位置を調節した方がいいかもしれません。

source

PC

zipファイルをダウンロード

head

<meta charset="UTF-8"><!--文字コードの指定--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo+2"><!--GoogleFonts --> <style type="text/css"> /* フォントのライセンス表記 */ /* 'Exo 2' is licensed under the Open Font License. https://fonts.google.com/specimen/Exo+2 */ /* リセット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} </style> <style type="text/css" media="screen and (min-width:650px)"> /*　画面幅650px以上用CSS　*/ /* 共通設定 */ html { font-size: 62.5%; } body { font-size: 1.3rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } a { text-decoration: none; transition: 0.5s; } h1 { padding-bottom: 1em; transform: rotate(8deg); -webkit-transform: rotate(8deg); font-size: 2.0rem; font-weight: normal; text-align: center; } h2,h3,h4 { font-family: 'Exo 2', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; } h2 { padding: 0.5em 0em; color: #3bacb0; font-size: 1.2em; } h3 { padding: 0.5em 1em; color: #666666; } em { background: linear-gradient(transparent 50%, #a8e3e5 50%); font-style: normal; } input,textarea,button,select { padding: 0.2em; border: solid 1px #999999; font-family: inherit; font-size: 100%; } ol,ul { list-style: none; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } section:last-of-type { padding-bottom: 10vh; } /* メインコンテンツ、ヘッダー設定 */ main,header { margin: 0em auto; width: 50%; min-width: 600px; box-sizing: border-box; height: 90vh; } main { display: block; padding: 10vh 3rem; } main a { color: #666666; } main h1 a { color: #000000; } header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } header h1 { font-size: 5.0rem; } header p { padding: 0em; font-size: 1.2rem; } /* ナビゲーション設定 */ nav { height: 10vh; width: 100%; position: fixed; bottom: 0; background: rgba(0,202,209,0.5); font-family: 'Exo 2', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; line-height: 10vh; z-index: 1; } nav ul { display: flex; justify-content: center; align-items: center; margin: 0em auto; width: 50%; min-width: 600px; } nav li { margin: 0em 1em; color: #ffffff; } nav li a { padding: 0.5em 1em; background: rgba(255,255,255,0.7); color: #555555; } nav li a:hover { color: #999999; } </style> <style type="text/css" media="screen and (max-width:649px)"> /*　画面幅649px以下用CSS　*/ /* 基本設定 */ html { font-size: 62.5%; } body { font-size: 1.2rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } a { text-decoration: none; transition: 0.5s; } h1 { padding-bottom: 1em; transform: rotate(8deg); -webkit-transform: rotate(8deg); font-size: 2.0rem; font-weight: normal; text-align: center; } h2,h3,h4 { font-family: 'Exo 2', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; } h2 { padding: 0.5em 0em; color: #3bacb0; font-size: 1.2em; } h3 { padding: 0.5em 1em; color: #666666; } em { background: linear-gradient(transparent 50%, #a8e3e5 50%); font-style: normal; } input,textarea,button,select { padding: 0.2em; border: solid 1px #999999; font-family: inherit; font-size: 100%; } textarea { width: 90%; } ol,ul { list-style: none; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } section:last-of-type { padding-bottom: 10vh; } /* メインコンテンツ、ヘッダー設定 */ main,header { margin: 0em auto; width: 90%; max-width: 500px; box-sizing: border-box; height: 90vh; } main { display: block; padding: 10rem 0rem; } main a { color: #666666; } main h1 a { color: #000000; } header { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } header h1 { font-size: 3.0rem; } header p { padding: 0em; font-size: 1.2rem; } /* ナビゲーション設定 */ nav { height: 4em; width: 100%; position: fixed; top: 0; background: rgba(0,202,209,0.5); font-family: 'Exo 2', 'メイリオ', 'ヒラギノ角ゴ', sans-serif; line-height: 4em; z-index: 1; } nav ul { display: flex; justify-content: center; align-items: center; margin: 0em auto; width: 100%; max-width: 600px; box-sizing: border-box; } nav li { margin: 0em 0.5em; color: #ffffff; } nav li a { padding: 0.5em; background: rgba(255,255,255,0.7); color: #555555; } nav li a:hover { color: #999999; } </style>

body(enter)

<!-- ここからナビゲーション --> <nav> <ul> <li><a href="URL">enter</a></li> </ul> </nav> <!-- ここまでナビゲーション --> <!-- ここからヘッダー --> <header> <h1>サイト名</h1> <p>説明文</p> </header> <!-- ここまでヘッダー -->

body(info)

<!-- ここからナビゲーション --> <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> <!-- ここまでナビゲーション --> <!-- ここからメインコンテンツ --> <main> <h1><a href="エンターページURL">サイト名</a></h1> <section> <h2>about</h2> <p>ここは○○サイトです。<br> ○○が××するあれこれを掲載しています。</p> </section> <section> <h2>source</h2> <h3>head</h3> <textarea cols="30" rows="4"></textarea> </section> </main> <!-- ここまでメインコンテンツ -->