FLOAT | ナノ

ABOUT

当サイトは△▽をメインとした創作サイトです。良識の範囲内でお楽しみください。…などなどサイトの説明書きをしてみてはいかがでしょうか。

リンクは同ジャンルに限りフリーとなっています。貼り剥がしご自由にどうぞ。

: PROFILE

瀬名（せな）
〇〇が大好きです。熱しやすくて冷めやすい性格。

: NOTEBOOK

09/11
すっかり秋になりましたね。今年の夏は本当に短かったように思います。今回は〇〇を更新しました…
READ MORE

: CONTENTS

このように要素をどんどん追加してみても面白いと思います。色々試してみてください。

INFORMATION

テーマカラーは#B9DCE4で作成しています。色合いを変更したい場合はCSSよりこちらのカラーコードを変更してください。

REQUEST

璋さん
ごちゃごちゃしていないすっきりお洒落な雰囲気。可能であればスムースクロール仕様のもの
イメージカラー：パステル

: SOURCE CODE

HTML
<article> <header> <h1>FLOAT</h1> <p class="menu"> <a href="#about">ABOUT</a> <a href="#notebook">Notebook</a> <a href="">Mail</a> </p> </header> <main> <dl id="about"> <dt><i class="fa fa-heart-o" aria-hidden="true"></i></dt> <dd> <h2>ABOUT</h2> <p>当サイトは△▽をメインとした創作サイトです。良識の範囲内でお楽しみください。…などなどサイトの説明書きをしてみてはいかがでしょうか。</p> <p>リンクは同ジャンルに限りフリーとなっています。貼り剥がしご自由にどうぞ。</p> </dd> </dl> <dl> <dt><i class="fa fa-address-book" aria-hidden="true"></i></dt> <dd> <h2>PROFILE</h2> <p><strong>瀬名</strong>（せな）<a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a><br> 〇〇が大好きです。熱しやすくて冷めやすい性格。</p> </dd> <hr> </dl> <dl id="notebook"> <dt><i class="fa fa-television" aria-hidden="true"></i></dt> <dd> <h2>NOTEBOOK</h2> <p> 09/11<br /> すっかり秋になりましたね。今年の夏は本当に短かったように思います。今回は〇〇を更新しました… </p> <a href="" class="more">READ MORE</a> </dd> <hr> </dl> <dl> <dt><i class="fa fa-smile-o" aria-hidden="true"></i></dt> <dd> <h2>CONTENTS</h2> <p>このように要素をどんどん追加してみても面白いと思います。色々試してみてください。</p> </dd> <hr> </dl> </main> <footer> <small>ACCESS THANKS 01923.</small> </footer> </article>
CSS
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700|Jacques+Francois'); * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; list-style-type: none; box-sizing: border-box; } input, button, textarea { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { width: 100%; height: 80px; background: rgba(90,90,90,0.1); border: 1px solid #dfdfdf; padding: 10px; font-size: 11px; margin-bottom: 25px; } textarea:last-child { margin-bottom: 0; } strong { font-weight: bold; } a { text-decoration: none; color: #afafaf; } p { margin-bottom: 15px; } body { line-height: 1.6; letter-spacing: 0.5px; font-size: 13px; font-family: 'Open Sans', sans-serif; word-break: break-all; text-align: justify; color: #8C8C8C; margin: 0 auto 20px; } main { max-width: 380px; } footer, header { text-align: center; font-family: 'Open Sans Condensed', sans-serif; } header { width: 100%; background: #fff; padding-top: 15px; } footer small { letter-spacing: 3px; color: #afafaf; font-weight: 700; } footer { margin-bottom: 20px; } h1 { font-size: 25px; margin-bottom: 5px; } h1 span { position: relative; margin: 0 3px; font-weight: 700; } h1 span:nth-child(even) { top: 5px; } h1::after { content: '\f004'; font-family: 'FontAwesome'; font-size: 14px; margin-left: 5px; color: #B9DCE4; } p.menu a { color: #8c8c8c; letter-spacing: 2px; margin: 0 3px; text-transform: uppercase; font-weight: 700; } p.menu a::after { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #cfcfcf; position: relative; top: -2px; margin-left: 8px; } p.menu a:last-child::after { display: none; } main { width: 80%; margin: 35px auto; } main a { color: #B9DCE4; } h2 { font-family: 'Open Sans Condensed', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 3px; margin-top: 5px; } h3 { border-left: 5px solid #b9dce4; font-family: 'Open Sans Condensed', sans-serif; font-size: 15px; font-weight: 300; padding-left: 5px; margin: 20px 0 5px; letter-spacing: 2px; } dl { width: 110%; margin-bottom: 10px; } dl dt { float: left; margin-right: 20px; position: relative; z-index: 10; background: #fff; padding: 0 0 5px; } dl dt .fa { font-size: 28px; color: #B9DCE4; position: relative; top: 3px; } dl:nth-child(even) dt .fa { color: #cfcfcf; } dl dd { overflow: hidden; position: relative; left: -35px; border-left: 1px dashed #dfdfdf; padding-left: 25px; } dl dd p { font-size: 12px; } hr { border: none; margin: 50px 0; } .more { float: right; display: block; width: 100px; text-align: center; background: #B9DCE4; color: #fff; font-family: 'Open Sans Condensed', sans-serif; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ var h1 = document.querySelector('h1'); var title = h1.textContent; h1.innerHTML = ''; title.split('').forEach(function(c){ h1.innerHTML += '<span>' + c + '</span>'; }); $('a[href^=#]').click(function() { var speed = 400; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script>

ABOUT

PROFILE

NOTEBOOK

CONTENTS

INFORMATION

REQUEST

SOURCE CODE

HTML

CSS