freepage 01
- 画像差分追加
- freepage01に改名
- top01として公開 (ナノユーザーテンプレート 2015/07/01配布終了)
download
code
body
- <div id="layout">
- <header>
- <h1>page title</h1>
- </header>
- <nav>
- <ul>
- <li><a href="">info</a></li>
- <li><a href="">main</a></li>
- <li><a href="">blog</a></li>
- <li><a href="">link</a></li>
- </ul>
- </nav>
- <div id="content">
- <section>
- <h4>about site</h4>
- <p class="family">http://xxxxxxxxxxxxxx</p>
- <p>一次創作××サイト</p>
- </section>
- <section>
- <h4>
- up date &
- <label for="log" class="href">log</label>
- </h4>
- <input type="checkbox" id="log" />
- <ul class="log">
- <li>
- <h6>15.06.07</h6>
- <p>ぶんしょう+1</p>
- <p>BUN-SHOW+2</p>
- </li>
- <li>
- <h6>15.06.10</h6>
- <p>絵本+1</p>
- <p>読み物+2</p>
- <p>小説+5</p>
- </li>
- <li>
- <h6>15.06.25</h6>
- <p>テキスト+1</p>
- <p>書物+1</p>
- </li>
- <li>
- <h6>15.07.01</h6>
- <p>ブンショウ+1</p>
- <p>文+2</p>
- </li>
- </ul>
- </section>
- <section>
- <h4>text decoration</h4>
- <p><em><em></em></em>で<em>強調</em></p>
- <p><em><del></del></em>で<del>打ち消し線</del></p>
- <p>要素に<em>class="family"</em>で半角英数字のフォントが<span class="family">Nova Square</span></p>
- <p>要素に<em>class="c1"</em>で<span class="c1">文字色変更@</span></p>
- <p>要素に<em>class="c2"</em>で<span class="c2">文字色変更A</span></p>
- </section>
- <section>
- <h4>form</h4>
- <form>
- <p><input type="text" value="text" /></p>
- <p><select>
- <option value="">select</option>
- <option value="">select2</option>
- <option value="">select3</option>
- </select></p>
- <p><textarea>textarea</textarea></p>
- <p><input type="radio" name="r_sample" id="radio1" checked />
- <label for="radio1">radio1</label>
- <input type="radio" name="r_sample" id="radio2" />
- <label for="radio2">radio2</label>
- <input type="radio" name="r_sample" id="radio3" />
- <label for="radio3">radio3</label>
- </p>
- <p><input type="checkbox" name="c_sample" id="checkbox1" checked />
- <label for="checkbox1">checkbox1</label>
- <input type="checkbox" name="c_sample" id="checkbox2" />
- <label for="checkbox2">checkbox2</label>
- <input type="checkbox" name="c_sample" id="checkbox3" />
- <label for="checkbox3">checkbox3</label>
- </p>
- <p><input type="button" value="button" /></p>
- <p><input type="text" value="input class="half"" class="half" />
- <input type="submit" value="submit" />
- <input type="reset" value="reset" />
- </p>
- </form>
- </section>
- <section>
- <h4>quote</h4>
- <p>短い<q>引用</q></p>
- <blockquote>
- <p>長い引用文</p>
- <p>長い引用文</p>
- <p>長い引用文</p>
- <cite>引用元</cite>
- </blockquote>
- </section>
- </div><!-- /content -->
- <footer>
- <p>copy right</p>
- </footer>
- </div><!-- /layout -->
head
- <style type="text/css">
- /*--------------------
- import
- --------------------*/
- @import url(https://fonts.googleapis.com/css?family=Nova+Square|Roboto+Slab);
- /*--------------------
- reset
- --------------------*/
- html ,body ,blockquote ,
- table ,tbody ,tr ,th ,td ,
- h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
- form ,ul ,ol ,p {
- margin: 0;
- padding: 0;
- }
- ul ,ol { list-style: none; }
- /*--------------------
- base
- --------------------*/
- * ,
- *:before ,
- *:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
- outline: 0;
- word-break: break-all;
- font-family: inherit;
- font-size: inherit ;
- line-height: inherit ;
- -webkit-appearance: none;
- letter-spacing: 1px;
- }
- body,
- td ,
- input[type="text"] ,input[type="password"] ,input[type="number"] ,
- textarea ,
- select {
- font-family: 'Roboto Slab','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','MS Pゴシック', 'MS PGothic',sans-serif;
- }
- header ,footer ,nav , th ,
- h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
- input[type="file"] ,input[type="submit"] ,input[type="button"] ,input[type="reset"] ,
- label:before ,
- .family {
- font-family: 'Nova Square','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo','Osaka','MS Pゴシック', 'MS PGothic',sans-serif;
- }
- .left { text-align: left ; }
- .right { text-align: right ; }
- .center { text-align: center; }
- /* --------------------
- coloring
- --------------------- */
- /* コンテンツ部分 */
- a ,.href {
- color: #000000;
- border-bottom: solid 1px #1d9476;
- }
- #layout{
- background-image: url(img01.png);
- }
- #layout ,
- input:focus ,select:focus ,textarea:focus {
- background-color: #cccccc !important;/* 背景色 */
- }
- footer{
- color: #ffffff ;/* フッターの文字色 */
- }
- /* 文字装飾 */
- em { box-shadow: 0 -0.5em rgba(255,255,255,0.5) inset; }
- .c1 { color: #1d9476 ;}
- .c2 { color: #ffffff ;}
- /* フォーム */
- input ,textarea ,select ,
- label:before {
- border: solid 1px #1d9476;
- }
- input ,textarea ,select ,
- input[type="radio"] + label:before {
- border-radius: 5px;
- }
- input[type="submit"] ,input[type="reset"] ,input[type="button"] {
- background: #1d9476;
- color: #ffffff;
- }
- input[type="radio"]:checked + label:before,
- input[type="checkbox"]:checked + label:before{
- color: #ffffff;
- }
- /* --------------------
- layout
- --------------------- */
- a{ text-decoration : none; }
- a:hover ,.href:hover ,
- input[type="submit"] ,input[type="reset"] ,input[type="button"] ,label {
- cursor: pointer;
- }
- /* コンテンツ部分 */
- #layout{
- width: 90%;
- max-width: 480px;
- margin: 20px auto 10px;
- padding: 30px 30px 10px;
- text-align: left;
- font-size: small;
- background-repeat: no-repeat;
- background-postion: top left;
- border-radius: 10px;
- }
- header {
- font-size: 2em ;
- line-height: 1em ;
- }
- nav {
- min-height: 1em;
- margin: 10px 0 0;
- padding: 0;
- font-size: 1.5em;
- line-height: 1em;
- }
- nav ul li {
- display: inline-block;
- }
- #content section {
- margin-top: 36px ;
- }
- footer {
- margin-top: 10px ;
- text-align: right ;
- }
- footer * {
- color: inherit;
- }
- /* 見出し */
- h4 {
- font-size: 105%;
- padding-bottom: 3px;
- }
- em {
- font-style: normal;
- }
- /* フォーム */
- input ,
- textarea ,
- select {
- max-width: 100% ;
- margin: 5px 0 0 ;
- padding: 2px 3px !important;
- background-image: none !important;
- box-shadow: none !important;
- }
- input ,select {
- height: auto !important;
- }
- textarea{
- height: 6em ;
- overflow-y: auto ;
- }
- input[type="text"] ,
- input[type="password"] ,
- input[type="number"] ,
- textarea ,
- select {
- width: 240px ;
- background-color: transparent ;
- }
- input.half {
- width: 120px ;
- }
- input[type="submit"] ,
- input[type="reset"] ,
- input[type="button"] {
- width: auto !important;
- font-weight: bold;
- }
- input[type="radio"] ,
- input[type="checkbox"] {
- display: none;
- }
- label {
- margin-top: 5px ;
- }
- input[type="radio"] + label:before,
- input[type="checkbox"] + label:before{
- display: inline-block;
- width: 0.8em;
- height: 0.8em;
- overflow: hidden;
- font-size: xx-small;
- line-height: 0.6em;
- text-align: center;
- vertical-align: baseline;
- color: transparent;
- font-weight: bold;
- }
- input[type="radio"] + label:before {
- content: 'x' ;
- }
- input[type="checkbox"] + label:before {
- content: 'v' ;
- }
- /* 引用 */
- blockquote {
- position: relative;
- padding: 1em;
- background-color: rgba( 0,0,0,0.1 );
- }
- blockquote cite{
- display: inline-block;
- position: absolute;
- bottom: -0.7em;
- left: 0.5em;
- max-width: 80%;
- padding: 5px 1em;
- background-color: rgba( 255,255,255,0.3 ) ;
- font-size: 0.8;
- line-height: 1;
- }
- /* 更新履歴 */
- #log { display: none; }
- ul.log {
- margin: 0;
- padding: 0;
- list-type: none;
- }
- ul.log > li{
- position: relative;
- display: none;
- margin-bottom: 5px;
- padding-left: 6em;
- }
- ul.log > li > h6{
- position: absolute;
- top: 0; left: 0;
- display: inline-block;
- width: 6em;
- font-weight: normal;
- }
- ul.log > li > h6:after{
- content: ':';
- }
- ul.log > li:last-child ,
- #log:checked + ul.log > li {
- display: block;
- }
- /*
- Template by http://nanos.jp/sikaku0/ */
- </style>
img
setting
基本編集
head
- background-image: url(img01.png);
青字部分を使用したい画像のURLと差し替え