sitename

about

ここは○○を取り扱う期間限定の××サイトです。

information

夏っぽい雰囲気のトップページです。海をモチーフにした簡易メモページのリクエストを元に作成しました。リンクと強調はこんな感じです。

上部のメニューは途中で止まります。
画面幅700pxを境にデザインが変わります。※PC版とモバイル版で雰囲気が違うので、両方をご覧になってからの使用をお勧めします。

source&image

PC

zipファイルをダウロード

head

<meta charset="UTF-8"><!-- 文字コードの指定 --> <style type="text/css"> /* リセット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} /* PC、モバイル共通設定 */ @import url('https://fonts.googleapis.com/css?family=Teko:400,700'); /* フォントのライセンス表記 */ /* 'Teko' is licensed under the Open Font License. https://fonts.google.com/specimen/Teko */ html { background: transparent; font-size: 62.5%; } </style> <style type="text/css" media="screen and (min-width:700px)"> /* 共通設定 */ body { background: url('画像URL') center / cover no-repeat fixed #82e4e1; font-size: 1.3rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } a { text-decoration: none; } h1,h2,h3,h4 { font-family: 'Teko', sans-serif; } h1 { margin: 0em 0.5em; color: rgba(0,0,0,0.9); font-size: 7rem; font-weight: bolder; } h2 { margin: 0.5em 0em; color: #000000; font-size: 2rem; font-weight: bolder; } h3 { margin: 0.5em; color: #111101; font-weight: bolder; } em { color: #08a299; font-style: normal; font-weight: bolder; } input,textarea,button,select { background: #ffffff; border: none; font-family: inherit; font-size: 100%; } textarea { padding: 0.5em; width: 80%; min-width: 400px; border-radius: 0.5rem; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* ヘッダー、ナビゲーション設定 */ header { display: flex; justify-content: center; align-items: center; padding: 5em 0em 2em 0em;; margin: 0em auto; width: 80%; min-width: 600px; } header .info { position: relative; padding: 2em; margin-left: 2em; background: rgba(0,0,0,0.4); border-radius: 0.5rem; color: #ffffff; } .info::before { content: ''; display: inline-block; position:absolute; left: -2em; height: 0em; width: 0em; border: solid 1em transparent; border-right: solid 1em rgba(0,0,0,0.4); } .info span { display: inline-block; margin: 1em 0em; } nav { position: sticky; top: 0; min-width: 600px; box-sizing: border-box; font-family: 'Teko', sans-serif; z-index: 2; } nav ul { display: flex; justify-content: center; } nav li { margin: 1em; } nav li a { padding: 0em 1em; border-bottom: solid 2px transparent; color: #000000; font-size: 2rem; font-weight: bolder; transition: 0.5s; } nav li a:hover { background: rgba(255,255,255,0.5); border-radius: 0.5rem; } /* メインコンテンツ設定 */ main { display: block; padding: 4em; margin: 2rem auto 10vh; width: 60%; min-width: 600px; color: #ffffff; } main a { color: #635a3f; } /* ブログ設定 */ article { padding: 2em 3em 3em; margin: 0em 3em 3em; } article p { padding: 0em 3em; } .time { padding: 0.5em 0em; color: #999999; font-family: 'Teko', sans-serif; font-size: 3rem; font-weight: bolder; text-align: center; } /* その他の設定 */ .bg { background: rgba(255,255,255,0.5); border-radius: 0.5rem; box-sizing: border-box; color: #000000; } </style> <style type="text/css" media="screen and (max-width:699px)"> /* 共通設定 */ body { color: #0c1717; font-size: 1.2rem; font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif; letter-spacing: 0.2em; line-height: 180%; } a { text-decoration: none; } h1,h2,h3,h4 { font-family: 'Teko', sans-serif; } h1 { color: #072524; font-size: 4rem; font-weight: normal; text-align: center; } h2 { padding-bottom: 0.2em; margin: 0.5em 0em 1em; border-bottom: solid 2px #e5f8f7; color: #000000; font-size: 1.5rem; font-weight: normal; } h3 { margin: 0.5em; } em { background: linear-gradient(transparent 80%, #d6d6bf 20%); color: #000000; font-style: normal; } input,textarea,button,select { background: rgba(255,255,255,0.8); border: solid 1px #cccccc; font-family: inherit; font-size: 100%; } textarea { padding: 0.5em; width: 90%; max-width: 400px; border-radius: 0.5rem; } /* 段落設定 */ p { padding: 0em 1em; } section { margin: 2em 0em; } /* ヘッダー、ナビゲーション設定 */ header { margin: 4em auto 0em; width: 90%; max-width: 500px; } header .info { display: flex; justify-content: center; align-items: center; position: relative; padding: 1em 2em 2em; border-radius: 0.5rem; color: #bbbbbb; text-align: center; } nav { position: sticky; top: 0; width: 100%; max-width: 699px; background: rgba(255,255,255,0.7); background: url('画像URL') center 10% / 100% no-repeat #82e4e1; box-sizing: border-box; font-family: 'Teko', sans-serif; z-index: 2; } nav ul { display: flex; justify-content: center; } nav li { margin: 0.5em 1em; } nav li a { padding: 0em 0.5em; border-bottom: solid 2px transparent; color: #000000; font-size: 1.5rem; transition: 0.5s; } nav li a:hover { background: rgba(255,255,255,0.5); border-radius: 0.5rem; } /* メインコンテンツ設定 */ main { display: block; padding: 1em 0em; margin: 2rem auto 10vh; width: 90%; max-width: 500px; border-radius: 0.5rem; box-sizing: border-box; } main a { background: rgba(255,255,255,0.5); color: #555555; } /* ブログ設定 */ article { padding: 1em 2em; margin: 2em 0em; background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url('../img/design38.jpg'); background-position: center bottom; background-size: cover; border-radius: 0.2em; } article:nth-of-type(odd) { background-position: center bottom; } article:nth-of-type(even) { background-position: center top; } </style>

body(index)

<header> <h1>sitename</h1> <div class="info"> <span>期間限定の××サイト。<br> はじめにinfoをお読みください。</span> </div> </header> <nav> <ul> <li><a href="#top">info</a></li> <li><a href="">main</a></li> <li><a href="">blog</a></li> <li><a href="">mail</a></li> </ul> </nav> <main id="top" class="bg"> <section> <h2>about</h2> <p>ここは○○を取り扱う期間限定の××サイトです。</p> </section> <section> <h2>heading2</h2> <p><a href="">リンク</a>と<em>強調</em></p> <h3>heading3</h3> <p><textarea>テキストエリア</textarea><br> <input type="submit" value="送信ボタン"></p> </section> </main>

body(blog)

<header> <h1>blog</h1> <div class="info"> <span>更新履歴と日記<br> ○○や××のネタバレを含むので注意。</span> </div> </header> <nav> <ul> <li><a href="design38.html">info</a></li> <li><a href="">main</a></li> <li><a href="">blog</a></li> <li><a href="">mail</a></li> </ul> </nav> <main class="blog"> <article class="bg"> <div class="time">00/00/00</div> <div> <p>今日は海に行きました。潮風が気持ちよかったです。</p> </div> </article> <article class="bg"> <div class="time">00/00/00</div> <p>日焼け跡がヒリヒリして大変な目に遭いました。</p> </article> <article class="bg"> <div class="time">00/00/00</div> <p>ブルーハワイ味のかき氷を食べました。真っ青な舌も夏っぽくて好きです。</p> </article> </main>

image

パブリックドメインの画像です。こちらからお持ち帰りください。

元画像をダウンロード（Pixabay）