temp freepage 02

freepage 02

demo

ver1.0.4 公開 (レンダリング遅延改善)
配色等簡易変更ツール公開
ver1.0.3 公開 (ラジオボタン,チェックボックスのjQuery処理内容変更,ソースコード内の記述位置,インデント,空行,コメントアウト等微調整)
ver1.0.2 公開 (ラジオボタン,チェックボックスの記述を変更、他微調整)
ver1.0.1 公開 (head記述量削減)
ver1.0.0 公開

download

code

body


        
	<div id="layout" class="top_page">
	
	
	
	<header>
	
	
	  <h1>free page 02</h1>
	
	  <p class="sub">sub text</p>
	
	
	</header>
	
	<nav>
	
	
	  <ul>
	
	    <li><a href="#info">info</a></li>
	    <li><a href="#main">main</a></li>
	    <li><a href="#mail">mail</a></li>
	    <li><a href="#sample">sample</a></li>
	
	  </ul>
	
	
	</nav>
	
	
	
	<main>
	
	
	
	<section id="info" name="info">
	
	
	  <h2 class="iconicfill-map-pin-fill">infomation</h2>
	
	
	  <div class="tip">
	
	    <h3>about this site</h3>
	
	    <p>xxサイト</p>
	    <p>当サイトの作品は完全なフィクションであり、実在する人物,団体とは一切の関係はありません。</p>
	    <p>他所への転載はお控えください。等</p>
	
	  </div>
	
	
	  <div class="tip">
	
	    <h3>master</h3>
	
	    <p>name ( <a href="">twi</a> )</p>
	    <p>xxにはまっている</p>
	
	  </div>
	
	
	  <div class="tip">
	
	    <h3>link</h3>
	
	    <p>un link free / <a href="">banner</a></p>
	    <p><input type="text" class="size1" value="&lt;a href=&quot;url&quot;&gt;site name&lt;/a&gt;" /></p>
	
	    <h4>love</h4>
	    <ul class="list2_mark1">
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	    </ul>
	
	    <h4>thanks</h4>
	    <ul class="list2_mark1">
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	    </ul>
	
	    <h4>rank</h4>
	    <ul class="list2_mark1">
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	      <li><a href="">xxx</a></li>
	    </ul>
	
	  </div>
	
	
	</section>
	
	
	
	<section id="main" name="main">
	
	
	  <h2 class="iconicfill-book-alt2">main</h2>
	
	
	  <div class="tip">
	
	    <h3>long</h3>
	
	    <ul class="banner">
	      <li>
	        <a href="">
	          <img src="bnr" />
	          title
	        </a>
	        <div>caption</div>
	      </li>
	      <li>
	        <a href="">
	          <img src="bnr" />
	          title
	        </a>
	        <div>caption</div>
	      </li>
	      <li>
	        <span>
	          <img src="bnr" />
	          title
	        </span>
	        <div>
	          <p>ここに直接リンクを並べてもいいかもしれません。</p><hr />
	          <ul class="list2_mark2">
	            <li><a href="">01</a></li>
	            <li><a href="">02</a></li>
	            <li><a href="">03</a></li>
	          </ul>
	        </div>
	      </li>
	    </ul>
	
	  </div>
	
	
	  <div class="tip">
	
	    <h3>short</h3>
	
	    <ul class="list1_label">
	      <li data-be="名称"><a href="">title</a></li>
	      <li data-be="名称"><a href="">title</a></li>
	      <li data-be="名称"><a href="">title</a></li>
	    </ul>
	
	    <p class="right"><a href="">log</a></p>
	
	  </div>
	
	
	  <div class="tip">
	
	    <h3>plan</h3>
	
	    <ul class="list2_mark2">
	      <li><a href="">title</a></li>
	      <li><a href="">title</a></li>
	      <li><a href="">title</a></li>
	    </ul>
	
	  </div>
	
	
	</section>
	
	
	
	<section id="mail" name="mail">
	
	  <h2 class="iconicfill-mail">mail</h2>
	
	  <form>
	    <p><label>name<input type="text" /></label></p>
	    <p><label>message<textarea></textarea></label></p>
	    <p><label><input type="submit" value="send" /></label></p>
	  </form>
	
	</section>
	
	
	
	</main>
	
	
	
	<footer>
	
	
	  <p>copyright</p>
	
	
	</footer>
	
	
	
	</div>

head


        
	<link rel="stylesheet" href="//weloveiconfonts.com/api/?family=iconicfill" media="print" onload="this.media='all'" />
	<style type="text/css">
	
	/* === import === */
	
	
	@import url(https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Slab);
	
	
	
	/* === reset & base === */
	
	
	* ,*:before ,*:after {
		box-sizing: border-box;
		position: relative;
		margin: 0;
		padding: 0;
		outline: 0;
		border: none;
		word-break: break-all;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		font-style: normal;
		font-weight: normal;
		letter-spacing: 0.1em;
		-webkit-appearance: none;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	ul ,ol { list-style-type: none;}
	
	
	
	/* === font === */
	
	
	/* 装飾字体 */
	
	header ,footer ,nav ,
	h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
	input[type="submit"] ,.i_submit ,
	.banner > li > *:first-child ,
	.family  {
		font-family: 'Ubuntu','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
	}
	
	
	/* アイコンフォント */
	
	[class*="iconicfill-"]::before ,.icon::before {
		font-family: 'IconicFill', sans-serif;
		letter-spacing: normal;
	}
	
	
	
	/* === layout === */
	
	
	/* 全体 */
	
	body {
		background-color: #333333;
		background-image: url(bg.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: 50% 0;
		background-size: 1px 1px;
		color: #000000;
		font-family: 'Roboto Slab','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-size: 10px;
		line-height: 2.4em;
	}
	
	body:before {
		content: '';
		position: fixed;
		bottom: 0;
		left: 0; right: 0;
		z-index: -1;
		display: block;
		height: 100vh;
		background-image: inherit;
		background-size: cover;
	}
	
	::-webkit-scrollbar {
		width: 6px;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: #000000;
	}
	
	
	a {
		text-decoration : none;
		color: #000000;
		border-bottom: solid 2px #cccccc;
	}
	a:hover {
		border-bottom-color: #000000;
	}
	
	
	/*　コンテンツ部分　*/
	
	#layout {
		margin: 0 auto;
	}
	
	#layout.top_page {
		padding-top: calc( 100vh - 36px );
	}
	
	
	header {
		padding: 10px 20px;
		background-color: rgba(0,0,0,0.2);
		color: #ffffff;
		font-size: 1.6em;
	}
	
	.top_page header {
		position: absolute;
		top: 30vh;
		left: 0;
		padding: 0;
		background-color: transparent;
	}
	
	.top_page header > * {
		padding: 5px;
		padding-left: 40px !important;
	}
	
	.top_page header h1 {
		display: inline-block;
		padding: 10px;
		background-color: rgba(0,0,0,0.8);
		font-size: 1.5em;
	}
	
	nav ,main {
		background-color: rgba(255,255,255,0.9);
	}
	
	nav {
		padding: 6px 10px;
		font-size: 1.2em;
		text-align: right;
	}
	
	nav.fixed {
		position: fixed;
		top: 0;
		left: 0; right: 0;
		z-index: 999;
	}
	
	nav ul li {
		display: inline;
		padding: 0 10px;
	}
	nav ul li + li {
		border-left: solid 2px #cccccc;
	}
	
	nav a {
		border-bottom: none;
	}
	
	
	footer {
		padding: 10px 0;
		text-align: center;
	}
	
	footer {
		background-color: #000000;
		color: #ffffff;
	}
	
	footer * {
		color: inherit;
	}
	
	
	main {
		padding: 0 30px 10px;
		text-align: left;
	}
	
	section {
		padding-top: 52px ;
	}
	
	.tip ~ .tip {
		padding-top: 36px;
	}
	
	
	/*　見出し　*/
	
	h1 ,h2 ,h3 ,h4 ,h5 ,h6 {
		line-height: 1em;
		font-weight: bold;
	}
	
	h2 {
		z-index: 1;
		min-height: 5em;
		padding-top: 3em;
		font-size: 2em;
		text-align: center;
	}
	h2:before {
		position: absolute;
		top: 0;
		left: 0; right: 0;
		z-index: -1;
		display: block;
		color: rgba(0,0,0,0.2);
		font-size: 5em;
		line-height: 1em;
		letter-spacing: normal;
	}
	
	h3 {
		display: inline-block;
		font-size: 1.2em;
		margin-bottom: 0.7em;
		padding: 0.3em 0.5em;
		background-image: -webkit-linear-gradient( -45deg , transparent 25% , rgba(100,100,100,0.2) 25% , rgba(100,100,100,0.2) 50% , transparent 50% , transparent 75% , rgba(100,100,100,0.2) 75% , rgba(100,100,100,0.2) );
		background-image:         linear-gradient( -45deg , transparent 25% , rgba(100,100,100,0.2) 25% , rgba(100,100,100,0.2) 50% , transparent 50% , transparent 75% , rgba(100,100,100,0.2) 75% , rgba(100,100,100,0.2) );
		background-size: 0.8em 0.8em;
		background-repeat: repeat-x;
		background-position: left bottom;
	}
	
	h4 {
		display: inline-block;
		margin: 2.4em 0 0.4em;
		padding: 0.4em;
		border-radius: 0.4em;
		background-color: rgba(0,0,0,0.1);
	}
	
	
	/*　文字装飾等　*/
	
	mark {
		background-color: transparent;
		box-shadow: 0 -0.5em rgba(255,204,49,0.7) inset;
	}
	
	em {
		box-shadow: 0 -0.5em rgba(241,93,53,0.4) inset;
	}
	
	
	.c1 { color: #f15d35;}
	.c2 { color: #999999;}
	
	.left   { text-align: left  ; }
	.right  { text-align: right ; }
	.center { text-align: center; }
	
	[data-be]:before { content: attr(data-be) !important;}
	[data-af]:after  { content: attr(data-af) !important;}
	
	hr {
		height: 0;
		margin: 0.6em 0;
		border-bottom: dotted 2px rgba(0,0,0,0.2);
	}
	
	.box1 , .box1_s ,.box2 , .box2_s {
		margin: 0.6em 0;
		padding: 0.5em 1em;
		border-radius: 1em;
	}
	
	.box1_s ,.box2_s {
		max-height: 8.2em;
		overflow: auto;
	}
	
	.box1 , .box1_s { background-color: #ffffff;}
	.box2 , .box2_s { background-color: rgba(0,0,0,0.1);}
	
	
	/*　リスト　*/
	
	[class*="list1"] > li ~ li {
		margin-top: 0.6em;
	}
	
	
	[class*="list1_"] > li {
		padding-left: 1.2em;
	}
	
	[class*="list1_"] > li:before {
		position: absolute;
		top: 0; left: 0;
		display: block;
		width: 1.2em;
		text-align: center;
	}
	
	.list1_mark1 > li:before { content: '・';}
	.list1_mark2 > li:before { content: '>';}
	
	.list1_label > li[data-be] {
		padding-left: 5em;
	}
	.list1_label > li:before {
		top: 0.5em;
		min-width: 5em;
		padding: 0.5em;
		border-radius: 0.4em;
		background-color: #ffffff;
		font-size: 0.9em;
		line-height: 1em;
		-moz-text-align-last: justify;
		     text-align-last: justify;
		text-justify: inter-ideograph;
		white-space: nowrap;
	}
	
	
	[class*="list2"] > li {
		display: inline;
	}
	[class*="list2_mark"] > li ~ li:before {
		padding: 0 0.5em;
	}
	.list2_mark1 > li ~ li:before {
		content: '/';
	}
	.list2_mark2 > li ~ li:before {
		content: '|';
	}
	
	
	.banner > li ~ li {
		margin-top: 1.8em;
	}
	
	.banner > li > *:first-child {
		z-index: 1;
		display: inline-block;
		width: 200px;
		height: 40px;
		text-align: center;
		color: #ffffff;
		text-shadow: 0 0 3px rgba(0,0,0,0.6);
		font-weight: bold;
		font-size: 18px;
		line-height: 40px;
		letter-spacing: 3px;
		white-space: nowrap;
	}
	.banner > li > *:first-child img {
		position: absolute;
		top: 0; left: 0;
		z-index: -1;
	}
	
	.banner > li > div {
		margin-top: 4px;
		padding: 0.8em 1em;
		border-radius: 0.8em;
		background-color: #ffffff;
		font-size: 0.9em;
		line-height: 1.4em;
	}
	.banner > li > div:before {
		content: '';
		position: absolute;
		top: -10px; left: 20px;
		z-index: 2;
		display: block;
		border-width: 0 5px 10px;
		border-color: #ffffff transparent;
		border-style: none solid solid;
	}
	
	
	/*　フォーム　*/
	
	[type="text"] ,.i_text ,
	[type="submit"] ,.i_submit ,
	textarea ,select ,
	[type="radio"]+i ,[type="checkbox"]+i {
		padding: 0 1em;
		border-radius: 0.4em;
		background-color: #ffffff;
		background-image: none;
		color: #000000;
		box-shadow: none;
	}
	
	input ,select {
		height: auto !important;
	}
	
	textarea {
		height: 8em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		line-height: 1.2em;
		overflow-y: auto;
	}
	
	[type="text"] ,.i_text ,
	textarea ,select {
		width: 100%;
		min-height: 2.4em;
	}
	
	.size1 { width: 50% !important;}
	.size2 { width: 30% !important;}
	
	input[type="submit"] ,.i_submit {
		width: auto !important;
		background-color: #000000;
		color: #ffffff;
		font-weight: bold;
		cursor: pointer;
	}
	
	label {
		cursor: pointer;
	}
	
	label [type="radio"] ,label [type="checkbox"] {
		display: none;
	}
	
	[type="radio"]+i ,[type="checkbox"]+i {
		display: inline-block;
		width: 1.2em;
		margin-right: 0.3em;
		padding: 0.1em;
		line-height: 1em;
		color: transparent;
		overflow: hidden;
		text-align: center;
	}
	[type="radio"]+i {
		border-radius: 50%;
	}
	
	[type="radio"]+i::before {
		content: '\e064';
		border-radius: 0.6em;
	}
	[type="checkbox"]+i::before {
		content: '\e047';
	}
	
	input:checked+i::before{
		color: #f15d35;
	}
	
	
	@media screen and (min-width: 501px) and (min-height: 501px)  {
		body { font-size: 14px;}
	}
	
	@media screen and (min-width: 501px) and (orientation:landscape) {
	
		#layout { width: 500px;}
	
		body:before ,nav.fixed {
			left: 50%; right: auto;
			width: 500px;
			margin-left: -250px;
		}
	}
	
	@media all and (-ms-high-contrast: none){
	
		body {	background-size: 500px auto !important; }
		body:before { display: none !important; }
		header ,footer ,nav ,main { display: block; }
	}
	
	/*
	freepage 02 ver(1.0.4)
	Template by http://nanos.jp/sikaku0/ */
	</style>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
	$(function(){
	
	var nav = { h:$('nav').outerHeight() , p:$('nav').offset().top};
	$(window).on('load scroll', function() {
		if ( $(this).scrollTop() > nav.p ) {
			$('nav').addClass('fixed');
			$('main').css('padding-top', nav.h );
		} else {
			$('nav').removeClass('fixed');
			$('main').css('padding-top', '0');
		}
	});
	
	$('a[href^="#"]').on('click',function(){
		var $tgt = $( $(this).attr('href') );
		var p    = $tgt.length? ($tgt.offset().top-nav.h+10) : 0;
		$('html').animate({scrollTop: p }, 500, 'swing');
	});
	
	$('label [type="radio"],label [type="checkbox"]').after('<i class="icon"></i>');
	
	});
	</script>

配色等簡易変更ツール

簡易demo

入力で上記ソースも書き換わります。

背景画像

※demoには反映されません。

全体

リンク

ヘッダー

▽フリーページ時

▽トップページ時タイトル部分

メニュー

メイン

フッター

見出し

▽h2アイコン

▽h3ストライプ

▽h4

マーカー

文字色変更

ボックス背景

フォームパーツ

▽全般

▽送信ボタン

▽チェックボックス、ラジオボタン

img

480*720px/サイズ大きめの縦長推奨

使用フリーの写真をお借りしています。　お好きなものをご使用ください。

バナー台も差し替え推奨。　そのまま使いたい方はサンプルページから直接保存を。

sikakuで配布中のバナーを見る

setting

body内基本編集

サンプル用の記述

DL用ソースコードからはサンプル用の記述を削っています。(長い上使用する人もいなそうなので)

demoページはあたりに下記を足したものになります。

sample用の記述


        
	<section id="sample" name="sample">
	
	
	  <h2 class="iconicfill-paperclip">tag sample</h2>
	
	
	  <div class="tip">
	    <h3>midashi</h3>
	
	    <table>
	      <tr><td>&lt;h2&gt;</td><td>：</td><td>上の [ tag sample ] 等</td></tr>
	      <tr><td>&lt;h3&gt;</td><td>：</td><td><h3 style="margin:0;">aaa</h3></td></tr>
	      <tr><td>&lt;h4&gt;</td><td>：</td><td><h4 style="margin:0;">aaa</h4></td></tr>
	    </table>
	
	  </div>
	
	
	  <div class="tip">
	    <h3>decoration</h3>
	
	    <ul class="list1">
	      <li><mark>&lt;mark&gt;</mark></li>
	      <li><em>&lt;em&gt;</em></li>
	      <li><span class="c1">class="c1"</span>(文字色変更１)</li>
	      <li><span class="c2">class="c2"</span>(文字色変更２)</li>
	      <li><span class="family">class="family"</span>(装飾用字体へ変更)</li>
	      <li class="left">class="left"</li>
	      <li class="center">class="center"</li>
	      <li class="right">class="right"</li>
	      <li>▽&lt;hr /&gt;<hr /></li>
	      <li><div class="box1">class="box1"</div></li>
	      <li><div class="box2">class="box2"</div></li>
	      <li><div class="box1_s"><p><mark>class="box1_s"</mark>や、<mark>class="box2_s"</mark>にすると、高さ制限がかかり３行程度でスクロールバーがでるようになります。</p><p>改行サンプル</p><p>改行サンプル</p><p>改行サンプル</p></div></li>
	    </ul>
	
	  </div>
	
	
	  <div class="tip">
	    <h3>list</h3><br />
	
	    <h4 style="margin: 0;">class="list1"</h4>
	    <ul class="list1">
	      <li>aaaa</li>
	      <li>bbbb</li>
	      <li>cccc</li>
	    </ul>
	
	    <h4>class="list1_mark1"</h4>
	    <ul class="list1_mark1">
	      <li>aaaa</li>
	      <li>bbbb</li>
	      <li data-before="└">cccc</li>
	    </ul>
	
	    <h4>class="list1_mark2"</h4>
	    <ul class="list1_mark2">
	      <li>aaaa</li>
	      <li>bbbb</li>
	      <li>cccc</li>
	    </ul>
	
	    <h4>class="list1_label"</h4>
	    <ul class="list1_label">
	      <li data-be="カテゴリ">aaaa</li>
	      <li data-be="カテゴリ">bbbb</li>
	      <li data-be="カテゴリ">cccc</li>
	    </ul>
	
	    <h4>class="list2_mark1"</h4>
	    <ul class="list2_mark1">
	      <li>aaaa</li>
	      <li>bbbb</li>
	      <li>cccc</li>
	    </ul>
	
	    <h4>class="list2_mark2"</h4>
	    <ul class="list2_mark2">
	      <li>aaaa</li>
	      <li>bbbb</li>
	      <li>cccc</li>
	    </ul>
	
	  </div>
	
	
	  <div class="tip">
	    <h3>form</h3>
	
	    <ul class="list1">
	      <li><input type="text" value="input" /></li>
	      <li>
	       <input type="text" value="class=&quot;size1&quot;" class="size1" />
	       <input type="text" value="class=&quot;size2&quot;" class="size2" />
	      </li>
	      <li>
	        <select>
	          <option>select</option>
	          <option>select2</option>
	          <option>select3</option>
	        </select>
	      </li>
	      <li><textarea>textarea</textarea></li>
	      <li>
	        <label><input type="radio" name="rbt" checked />radio1</label>
	        <label><input type="radio" name="rbt" />radio2</label>
	        <label><input type="radio" name="rbt" />radio3</label>
	      </li>
	      <li>
	        <label><input type="checkbox" name="chk" checked />checkbox1</label>
	        <label><input type="checkbox" name="chk" />checkbox2</label>
	        <label><input type="checkbox" name="chk" />checkbox3</label>
	      </li>
	      <li>
	        <input type="submit" value="submit" />
	      </li>
	    </ul>
	
	  </div>
	
	
	</section>

フリーページモード

class="top_page"削除でフリーページに適したレイアウトに切り替わります。

トップページ以外へ使用する際におすすめです。

セクション見出しのアイコン

<h2>要素についているクラス部分で表示アイコンを決めています。

差し替え時はWe Love Icon FontsのIconic Fillを参照してください。

フォームパーツ

一行入力欄

type="text"時のみスタイル付与しています。

numberpassword等、他の一行入力欄へ同スタイルを適用したい場合は下記のクラスを付与してください

i_text

送信ボタン

type="submit"時のみスタイル付与しています。

resetbutton等、他のボタン系に同スタイルを適用したい場合は下記のクラスを付与してください

i_submit

ラジオボタン、チェックボックス

<label>要素で囲むように記述してください。

例：<label><input type="checkbox" />表示文字</label>

head内基本編集

背景画像の差し替え

bg.jpgを使用したい画像URLと差し替え

DL用ソースコード下部に簡易置き換えツールもあるので、そこにURLを入力してからの持ち帰りをお勧めします。

sikaku

freepage 02

download

code

body

head

簡易demo

背景画像

全体

リンク

ヘッダー

メニュー

メイン

フッター

見出し

マーカー

文字色変更

ボックス背景

リスト

フォームパーツ

img

setting

body内基本編集

サンプル用の記述

sample用の記述

フリーページモード

セクション見出しのアイコン

フォームパーツ

一行入力欄

送信ボタン

ラジオボタン、チェックボックス

リスト

見出し付きリスト

head内基本編集

背景画像の差し替え

extra edit

link

special thanks

font file