MOON

※"改行を＜br＞に変換して表示"の項目を「しない」に設定して作成しています。カスタマイズ無制限・使用報告は任意です。

//色情報
□ 背景　#000000
■ 文字　#ffffff
■ リンク　#6495ED

//HEAD
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css"><style type="text/css"><!-- /* ----- 共通項目 ----- */body { color: #ffffff; font-family: "Comfortaa","メイリオ",sans-serif; font-size: 12px; letter-spacing:1px; line-height: 1.8; width: 100%; padding:0px; margin: 0 auto; background-color: black;}/* リンク */a { color: #6495ED ; text-decoration:none;}a:hover { color: #ffffff ; }/* ページ全体 */#page { width: 100%; max-width: 600px; padding:0px; margin: 0 auto;}/* ----- ページヘッダー(TOP) ----- */#pageHead #siteTitle { margin-top: 50px; font-size: 60px; line-height: 1.0; letter-spacing: 8px; margin-bottom: 0; font-family: "Quicksand", sans-serif; text-align: center;}#pageHead #information{ padding: 5px; color: #D3D3D3 ; font-size: 12px; letter-spacing: 1px; line-height: 1.0; font-family: "Quicksand", sans-serif; text-align: center;}/* メインメニュー */#pageHead .menu{ margin-top: 10px; text-align: center; font-size: 14px; line-height: 1.429; font-family: "Quicksand", sans-serif;}#pageHead .menu a { color: #ffffff; padding: 5px 5px;}#pageHead .menu a:hover { color: #6495ED;}/* ----- メインコンテンツ ----- */#pageBody { margin-top: 30px; zoom:1;}#pageBody h3{ margin-top: 30px; padding: 0.8em; border-top: 3px double #ffffff; border-bottom: 3px double #ffffff; font-family: "Quicksand", sans-serif; text-align: center;}#pageBody #bun{ margin:5% 6% 5% 6%; text-align: justify; }#pageBody #back{ line-height: 3.5; font-family: "Quicksand", sans-serif; text-align: center; }/* ------ フォーム系 ------ */input[type=text], textarea, select, input[type=button]{ color: #fff; font-size:80%; -webkit-appearance: none; background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000)); background-image: -webkit-linear-gradient(left, #000000, #000000); -moz-border-radius: 3px; -webkit-border-radius: 3px; vertical-align:middle; position:relative; margin: 5px 4px 2px 0; margin-right:3px; top:-1px; width: 80%;}input[type=button]{ overflow:visible; padding:5px; color: #ffffff; border:solid 1px #ffffff; background-color: #000000;}/*=============================================== その他===============================================*//* 横線 */hr { padding: 0; border: none; border-top: 1px dashed #bbb; color: inherit; text-align: center;}/*=============================================== 以下、スマホ対応 画面の横幅が480pxまで===============================================*/@media screen and (max-width:480px){ #pageHead #siteTitle { font-size: 52px;} }--></style>

//BODY(TOP)
<div id="page"> <!-- TOP --> <div id="pageHead"> <h1 id="siteTitle">MOON</h1> <div id="information">(0808 main+1) 12345</div> <div class="menu"><a href="">About</a> <a href="">Main</a> <a href="">Other</a></div> </div> <!-- TOP ここまで --></div>
//BODY(ページ)
<div id="page"> <div id="pageBody"> <h3>ABOUT</h3> <div id="bun">こちらは○○が運営する××なサイトです。マナーを守って楽しく閲覧してください。何かあれば<a href="">こちら</a>からご連絡を。的な説明をここに。</div> <h3>MASTER</h3> <div id="bun">○○ ( <a href="">memo</a> | <a href="">mail</a> )<br>ねることとたべることがすきです。</div> <div id="back"><a href="javascript:history.go(-1)">BACK</a></div> </div> </div>