Notre destiN* | ナノ

pink dot about

文書型宣言<!DOCTYPE>

HTMLタグ<html>

HEAD内

body{
   color:#999999;
   background-image:url(背景画像URL1);}

br{
   letter-spacing:0;}

/*― 文字装飾 ―――――――*/
em{
   background:#ffe6e6;}

strong{
   font-weight:bold;
   border-bottom:1px dotted #ff9999;}

del{
   text-decoration:line-through;}

/*― リンク ―――――――*/
a{
   text-decoration:none;
   outline:none;
   background-image:url(背景画像URL2);}

a:link,a:visited{
   color:#ff9999;}

a:hover{
   color:#ff9999;
   border-bottom:1px dotted #ff9999;}

.contents a,.top a,.header a,.footer a{
   background-image:none;}

/*― 画像設定 ―――――――*/
a img {
   border:none;}

a:hover img{
   opacity:0.6;
   filter:alpha(opacity=60);}

/*― フォーム ―――――――*/
input[type],textarea,select{
   padding:1px 3px;
   margin:1px 1px;
   color:#999999;
   background:#ffffff;
   border:1px solid #ff9999;
   outline:none;}

input[type]:focus,textarea:focus{
   background:#ffe6e6;}

/*― リスト ―――――――*/
ul,ol{
   list-style-position:inside;}

/*― 文字寄せ ―――――――*/
.left{
   text-align:left;}

.center{
   text-align:center;}

.right{
   text-align:right;}

/*― 見出し ―――――――*/
h1{
   font-size:130%;
   font-weight:normal;
   letter-spacing:2px;}

h1:first-letter{
   color:#ff9999;}

h2{
   font-size:110%;
   border-bottom:dotted #ff9999 1px;
   font-weight:normal;}

h2:before{
   content:"■ ";
   color:#ff9999;}

h3{
   color:#ff9999;
   font-size:110%;
   padding:0 5px 0 0;
   font-weight:normal;}

/*― 中身 ―――――――*/
.contents,.header,.footer{
   background-image:url(背景画像URL2);}

.contents{
   margin:1em 0;
   padding:5px 10px;}

.header{
   margin:1em 0 0 0;
   padding:5px 10px;
   text-align:right;}

.footer{
   margin:0 0 1em 0;
   text-align:center;}

.date{
   text-align:right;
   border-top:dashed 1px #ff9999;}

<pc_only>
/*――――――――――――――――
　以下PCのみ
―――――――――――――――*/
body{
   width:600px;
   margin:0 auto;}

body,th{
   font-size:80%;
   letter-spacing:1px;
   line-height:1.7;}

/*― スクロールバー ―――――――*/
html,body{
   scrollbar-face-color:#ffffff;
   scrollbar-3dlight-color:#ffffff;
   scrollbar-darkshadow-color:#ffffff;
   scrollbar-highlight-color:#ff9999;
   scrollbar-shadow-color:#ff9999;
   scrollbar-arrow-color:#ff9999;
   scrollbar-track-color:#ffffff;}

</pc_only><nopc>
/*――――――――――――――――
　以下携帯のみ
―――――――――――――――*/
body{
   width:90%;
   margin:0 auto;}

body,th{
   font-size:x-small;
   line-height:120%;
   letter-spacing:1pt;}

/*― リンク ―――――――*/
/* docomo */
<imode>a:focus{
   color:#ffffff;}</imode>

/* softbank */
<softbank>a:active,a:focus{
   color:#ff9999;}</softbank>

</nopc><smartphone>
/*――――――――――――――――
　以下スマホのみ
―――――――――――――――*/
*{
   -webkit-tap-highlight-color:rgba(0,0,0,0);}

body{
   max-width:90%;
   margin:0 auto;}

body,th{
   font-size:small;
   line-height:120%;
   letter-spacing:1pt;}

img{
   max-width:90%;}

/*― フォーム ―――――――*/
input[type],textarea,select{
   width:auto;
   height:auto;
   font-weight:normal;
   font-size:small;
   -webkit-box-shadow:none;
   webkit-appearance:none;
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   word-break:break-all;}

input[type]:hover{
   background:#ffe6e6;}

textarea:focus{
   height:auto;}

</smartphone></style>

BODYタグ<body>

全体レイアウト

備考

背景画像URL○と記述されている部分は任意のURLに変更してください。
お好きなものに変えて頂いて構いませんがSampleで使用している画像は以下の二点です。
1：

　2：

何れも各個人で保存して御使用ください。
また、どちらも再配布及び単品使用は禁止ですので厳守願います。