Niitty > codebook - Niitty

SOURCE CODE

GUIDE

●#6cd6d2,●#f3f3f3,●#ececec
アイコンでシンプルにしあげたテンプレートです。メインカラーの#6cd6d2を変えるだけで印象が変わると思いますので、お好きな色味でどうぞ。
勝手におすすめカラー：●#f7c0d7,●#4171b2

IN USE

icon rainbow - 葉っぱのアイコン素材 6/rgb(108, 214, 210)
ionicons - アイコンフォント

POINT　トップページの半円のテキストについて

こちらのジェネレーターを使って作成しています。

TEXTに入れたい文字を入力
CURVEは真ん中の○を選択、Unit:pixelsの設定
TYPEのLaunch font paletteはCatamaranを選択
その下の"ABCD"が並んでいるものは真ん中を選択
Size:10.5、Kerning:5、Lineheight:0.65
CIRCLEの"ABCD"は右側を選択
Indent:下に弧を書くように位置を調節、Radius:80、CenterX:80,Y:0で設定
完成したらGENERATEHTMLを押し、表示されているコード内の「#warped .w0～40」までをコピーしてCSS内の該当箇所にペースト

COPY&PASTE

HEAD

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<style>
/*--------------------
  Reset
--------------------*/
html,body,h1,h2,h3,h4,h5,h6,p,div,span,header,footer,nav,section,article,aside,figure,figcaption,img,a,ul,ol,li,dl,dt,dd,table,th,tr,td,i {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	box-sizing: border-box;
}
/*--------------------
  Default
--------------------*/
body {
	background: #fff;
	color: #333;
	font-size: 12px;
	font-family: 'Catamaran', "Hiragino Kaku Gothic ProN", "Meiryo UI", メイリオ, sans-serif;
	line-height: 1em;
	letter-spacing: 1px;
	word-break: break-all;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
img { max-width: 100%;}
a {
	color: #6cd6d2;
	text-decoration: underline;
}
a:hover {
	color: #ececec;
}
/*--------------------
  Powerd
--------------------*/
#powerd {
	margin: 20px 0;
	text-align: center;
}
/*--------------------
  Menu
--------------------*/
nav {
	text-align: center;
}
nav a {
	display: inline-block;
	margin: 0 3px;
	padding: 5px 8px;
	background-color: #6cd6d2;
	color: #fff;
	text-decoration: none;
	line-height: 1em;
	letter-spacing: 1px;
}
nav a:hover {
	border: none;
	background-size: 4px 4px;
	background-color: #ececec;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
	color: #333;
}
/* 下部メニュー */
nav.home {
	margin: 30px 0 0;
}
/*--------------------
  Layout
--------------------*/
#wrapper {
	width: 80%;
	max-width: 500px;
	margin: 50px auto 0;
	line-height: 2.4em;
	letter-spacing: 2px;
}
/* top */
h1 {
	position: relative;
	top: 20px;
	font-size: 30px;
	text-align: center;
	line-height: 30px;
}
header img {
	position: relative;
	top: 35px;
	display: block;
	width: 18px;
	height: 18px;
	margin: auto;
}
.rank {
	margin: 30px 0 0;
	text-align: center;
	line-height: 1.6em;
}
/* pages */
h2 {
	position: relative;
	margin: 0 0 30px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
}
h2::before {
	content: "";
	position: absolute;
	top: 14px;
	display: block;
	width: 100%;
	height: 2px;
	background-size: 4px 4px;
	background-color: #333;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
}
h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 8px;
	background-color: #fff;
	letter-spacing: 1px;
}
h3 {
	margin: 30px 0 10px;
}
h3 span{
	display: inline-block;
	padding: 5px 8px;
	background-color: #6cd6d2;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1em;
	letter-spacing: 1px;
}
h4 {
	margin: 0 0 8px;
	padding: 0 0 0 8px;
	border-left: 5px solid #ececec;
	font-weight: 400;
}
mark {
	background-size: 4px 4px;
	background-color: #ececec;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
}
/*--------------------
  Contents
--------------------*/
/* memo */
.tuiki {
	text-align: right;
}
.tuikibutton {
	display: inline-block;
	padding: 5px 8px;
	background-color: #6cd6d2;
	color: #fff;
	line-height: 1em;
	letter-spacing: 1px;
}
.tuikibutton:hover {
	background-size: 4px 4px;
	background-color: #ececec;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
	color: #333;
}
.more {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid #ececec;
}
/* bkm */
#bkm {
	display: none;
	padding: 0.5em;
	background-color: #f3f3f3;
}
/* story */
.storybox a {
	display: inline-block;
	margin: 0 2px 10px;
	padding: 5px;
	background-color: #f3f3f3;
	line-height: 1em;
	text-decoration: none;
}
.storybox a:hover {
	background-color: #6cd6d2;
	color: #fff;
}
/*--------------------
  Form
--------------------*/
input[type=text], input[type=submit], textarea {
	display: inline-block;
	margin: 5px 0;
	padding: 3px;
	outline: none;
	border: none;
	border-radius: 0;
	background: none;
	background-color: #f3f3f3;
	box-shadow: none;
	font-size: 12px;
	font-family: 'Catamaran', "Hiragino Kaku Gothic ProN", "Meiryo UI", メイリオ, sans-serif;
	-webkit-appearance: none;
	line-height: 1.4em;
	letter-spacing: 2px;
}
input[type=text] {
	width: 220px;
}
input[type=submit] {
	display: inline-block;
	width: auto;
	padding: 5px 8px;
	background-color: #6cd6d2;
	color: #fff;
	text-shadow: none;
	line-height: 1em;
	letter-spacing: 1px;
}
input[type=submit]:hover {
	background-size: 4px 4px;
	background-color: #ececec;
	background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
	color: #333;
}
textarea {
	display: block;
	width: 99%;
	height: 50px;
}
/* Sendmail */
.sendmail {
	margin: 8px 0;
}
.sendmail span {
	display: inline-block;
	width: 50px;
}
/*--------------------
  Toppage text
--------------------*/
#warped {
	position: relative;
	display: block;
	width:160px;
	height:100px;
	margin: auto;
}
#warped>span[class^=w]:nth-of-type(n+0){
	position:absolute;
	display:block;
	transform-origin:50% 100%; }
#warped span{
	font-size:10.5px;
	line-height:0.65;
	white-space:pre;
}
/* 以下ジェネレーターからのコピペにて */
#warped .w0 {transform: rotate(7.28rad);
width: 7px; height: 6px; left: 9.22px; top: 37.28px;}
#warped .w1 {transform: rotate(7.14rad);
width: 5px; height: 6px; left: 16.79px; top: 46.09px;}
#warped .w2 {transform: rotate(7.01rad);
width: 6px; height: 6px; left: 23.63px; top: 53.59px;}
#warped .w3 {transform: rotate(6.89rad);
width: 3px; height: 6px; left: 32.56px; top: 59.49px;}
#warped .w4 {transform: rotate(6.79rad);
width: 3px; height: 6px; left: 39.33px; top: 63.75px;}
#warped .w5 {transform: rotate(6.7rad);
width: 2px; height: 6px; left: 46.53px; top: 67.11px;}
#warped .w6 {transform: rotate(6.59rad);
width: 5px; height: 6px; left: 52.97px; top: 70.14px;}
#warped .w7 {transform: rotate(6.48rad);
width: 2px; height: 6px; left: 62.68px; top: 72.31px;}
#warped .w8 {transform: rotate(6.38rad);
width: 5px; height: 6px; left: 69.58px; top: 73.6px;}
#warped .w9 {transform: rotate(6.27rad);
width: 2px; height: 6px; left: 79.57px; top: 73.99px;}
#warped .w10 {transform: rotate(6.18rad);
width: 3px; height: 6px; left: 86.56px; top: 73.59px;}
#warped .w11 {transform: rotate(6.08rad);
width: 3px; height: 6px; left: 94.46px; top: 72.39px;}
#warped .w12 {transform: rotate(5.96rad);
width: 5px; height: 6px; left: 102.16px; top: 70.1px;}
#warped .w13 {transform: rotate(5.85rad);
width: 4px; height: 6px; left: 111.5px; top: 66.64px;}
#warped .w14 {transform: rotate(5.74rad);
width: 3px; height: 6px; left: 119.52px; top: 62.68px;}
#warped .w15 {transform: rotate(5.64rad);
width: 3px; height: 6px; left: 126.17px; top: 58.24px;}
#warped .w16 {transform: rotate(5.53rad);
width: 4px; height: 6px; left: 132.21px; top: 52.82px;}
#warped .w17 {transform: rotate(5.43rad);
width: 2px; height: 6px; left: 138.82px; top: 47.11px;}
#warped .w18 {transform: rotate(5.34rad);
width: 3px; height: 6px; left: 143.03px; top: 41.28px;}
#warped .w19 {transform: rotate(5.23rad);
width: 5px; height: 6px; left: 146.93px; top: 33.74px;}
#warped .w20 {transform: rotate(9.42rad);
width: 23px; height: 24px; left: 68.31px; top: 135.99px;}
#warped .w21 {transform: rotate(9.72rad);
width: 15px; height: 24px; left: 48.68px; top: 132.37px;}
#warped .w22 {transform: rotate(10.1rad);
width: 35px; height: 24px; left: 12.36px; top: 118.34px;}
#warped .w23 {transform: rotate(10.45rad);
width: 11px; height: 24px; left: 6.02px; top: 97.37px;}
#warped .w24 {transform: rotate(10.65rad);
width: 11px; height: 24px; left: -0.83px; top: 82.94px;}
#warped .w25 {transform: rotate(10.92rad);
width: 23px; height: 24px; left: -11.32px; top: 61.47px;}
#warped .w26 {transform: rotate(11.21rad);
width: 13px; height: 24px; left: -4.59px; top: 38.62px;}
#warped .w27 {transform: rotate(11.42rad);
width: 10px; height: 24px; left: 2.12px; top: 22.99px;}
#warped .w28 {transform: rotate(11.65rad);
width: 18px; height: 24px; left: 7.93px; top: 6.77px;}
#warped .w29 {transform: rotate(11.95rad);
width: 19px; height: 24px; left: 24.38px; top: -9.38px;}
#warped .w30 {transform: rotate(12.2rad);
width: 11px; height: 24px; left: 45.99px; top: -18.75px;}
#warped .w31 {transform: rotate(12.4rad);
width: 11px; height: 24px; left: 61.41px; top: -22.93px;}
#warped .w32 {transform: rotate(12.75rad);
width: 36px; height: 24px; left: 77.25px; top: -22.54px;}
#warped .w33 {transform: rotate(13.18rad);
width: 23px; height: 24px; left: 115.18px; top: -8.97px;}
#warped .w34 {transform: rotate(13.48rad);
width: 15px; height: 24px; left: 136.3px; top: 7.73px;}
#warped .w35 {transform: rotate(13.78rad);
width: 23px; height: 24px; left: 143.71px; top: 28.74px;}
#warped .w36 {transform: rotate(14.06rad);
width: 11px; height: 24px; left: 154.28px; top: 50.19px;}
#warped .w37 {transform: rotate(14.25rad);
width: 10px; height: 24px; left: 154.41px; top: 65.66px;}
#warped .w38 {transform: rotate(14.47rad);
width: 15px; height: 24px; left: 147.92px; top: 82.66px;}
#warped .w39 {transform: rotate(14.7rad);
width: 12px; height: 24px; left: 141.3px; top: 99.24px;}
#warped .w40 {transform: rotate(14.91rad);
width: 11px; height: 24px; left: 131.52px; top: 112.11px;}
</style>

BODY - TOP

BODY - INFO

<div id="wrapper">
<h2><span>INFORMATION</span></h2>
<h3><span>ABOUT THIS SITE</span></h3>
<h4>サイトの名前　|　<span style="display:inline-block;">http://○○○○○.com</span></h4>
サイトの説明などをこちらにどうぞ。<br>
<h3><span>MASTER</span></h3>
お名前 // <a href="#">MAIL</a> , <a id="bkmbutton">BKM</a><br>
RPGがすきです。ひたすらチキンプレイをきめこみます。

<div id="bkm">
	<a href="#">サンプル</a> , <a href="#">Sample</a> , <a href="#">サンプル</a> , <a href="#">Sample</a><br>
</div>

<h3><span>CONTACT</span></h3>
メールフォームのイメージサンプルです。ご利用のサーバーに合わせてご改変ください。<br>
<div class="sendmail">
<span>NAME</span><input type="text"><br>
<span>URL</span><input type="text"><br>
MESSAGE
<textarea></textarea>
<div style="text-align:right;"><input type="submit" value="SEND"></div>
書き方を変えると拍手や名前チェンジ機能にも使えます。<br>
<input type="text"> <input type="submit" value="CLAP">
</div>
<nav class="home"><a href="#">BACK</a></nav>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#bkmbutton").click(function () {
		$("#bkm").slideToggle("slow");
	});
});</script>

BODY - MAIN

BODY - MEMO