3 December 2016
『Spring』TOPページデザインの解説とソース
・画像は背景画像1枚のみです。ページ下部の画像を保存してご利用下さい。
・オーナメントのような模様はWebフォントです。webフォントはGoogleフォントと、OPEN FONT LIBRARYの2種類を使用しています。OPEN FONT LIBRARYは表示に時間がかかる場合があります。
・端末の違いによるデザイン崩れ、および、携帯電話(ガラケー)での閲覧を考慮していません。ガラケーについては未確認、非推奨です。
・動作確認は、PC(GoogleChrome/IE)iOS(GoogleChrome/Safari)で行いました。いずれも最新バージョンです。
青色の部分は適宜変更してください。
・オーナメントのような模様は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 P明朝', '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>