CSS Palette | ナノ

3 December 2016

『Spring』TOPページデザインの解説とソース

・画像は背景画像1枚のみです。ページ下部の画像を保存してご利用下さい。
・オーナメントのような模様はWebフォントです。webフォントはGoogleフォントと、OPEN FONT LIBRARYの2種類を使用しています。OPEN FONT LIBRARYは表示に時間がかかる場合があります。
・端末の違いによるデザイン崩れ、および、携帯電話（ガラケー）での閲覧を考慮していません。ガラケーについては未確認、非推奨です。
・動作確認は、PC(GoogleChrome/IE)iOS(GoogleChrome/Safari)で行いました。いずれも最新バージョンです。

SAMPLE

サンプルページ

CSS

html5とcss3です。

HEAD・HTML詳細の『文書型宣言(<!DOCTYPE>)』

<!DOCTYPE html>

HEAD・HTML詳細の『HTMLタグ(<html>)』

<html lang="ja">

HEAD・HTML詳細の『HEAD内』

<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE,NOIMAGEINDEX,NOTRANSLATE">
<META NAME="HATENA" CONTENT="NODIFF,NOINDEX">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">

<style>
/* webfont */
@import url('https://fonts.googleapis.com/css?family=Parisienne');
@import url('https://fontlibrary.org/face/interlace-set');

/* reset css*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* style */
html {
 background: url(★画像のURL★) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

body {
 padding-bottom: 3%;
 background-color: transparent;
 font-family: 'Parisienne', "游明朝 Light", "游明朝", "YuMincho", 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

a { text-decoration: none;}
a:link, a:visited { color: #052B20; text-shadow: 1px 1px 2px #fff;}
a:hover, a:active { color: #052B20; text-shadow: none;}

.container {
 display: block;
 margin: 0 auto 16px;
 padding: 0;
 width: 100%;
 max-width: 680px;
}

.logo {
 margin: 40px auto;
 padding: 12px;
 width: 85%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 font-size: 3em;
 color: #fff;
 text-shadow: 1px 1px 0px rgba(5, 43, 32, 0.8), 2px 2px 0 rgba(255, 255, 255, 0.3);
 text-align: center;
}

.logo:before,
.logo:after {
 display: block;
 font-family: 'InterlaceSetRegular';
 font-weight: normal;
 font-style: normal;
 font-size: 75%;
}

.logo:before {
 content: "O";
 margin: -25px 0 0 0;
}

.logo:after {
 content: "N";
 margin: 0 0 -25px 0;
}

a.bg,
a.bg:link,
a.bg:visited {
 display: block;
 padding: 14px;
 color: #fff;
 text-shadow: 1px 1px 0px rgba(5, 43, 32, 0.8), 2px 2px 0 rgba(255, 255, 255, 0.3);
 text-decoration: none;
}

a.bg:hover,
a.bg:active {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}

.inner {
 display: block;
 border: 1px solid #fff;
 height: 70px;
 line-height: 70px;
 font-size: 2em;
 text-align: center;
}

.inner small {
 display: inline-block;
 margin-left: 8px;
 font-size: 14px;
}

</style>

HEAD・HTML詳細の『BODYタグ(<body>)』

<body>

HEAD・HTML詳細の『XHTML変換』

しない

HTML

リンクの背景色は直接HTML内に指定します。
青色の部分は適宜変更してください。

<div class="container">

 <div class="logo">
    SiteTitle
 </div>

 <a class="bg" href="URL" style="background: rgba(255,220,0,0.5);" >
  <div class="inner">
    About
    <small>はじめに</small>
  </div>
 </a>

 <a class="bg" href="URL" style="background: rgba(55,196,80,0.5);" >
  <div class="inner">
    New
    <small>更新情報</small>
  </div>
 </a>

 <a class="bg" href="URL" style="background: rgba(124,193,80,0.5);" >
  <div class="inner">
    Novels
    <small>読み物</small>
  </div>
 </a>

 <a class="bg" href="URL" style="background: rgba(243,152,0,0.5);" >
  <div class="inner">
    Link
    <small>ブックマーク</small>
  </div>
 </a>

</div>

IMAGE

縮小表示しています。

Csspalette