「和風素材の篆刻(てんこく/てん刻)素材AOI(葵)」背景 ボタン イラスト等 ホームページやブログに使える和風素材をはじめ、多数のフリー素材を提供。☆Japanese Graphics☆


和風素材の篆刻素材AOI

CSSの寺子屋(スタイル例)

「タグの寺子屋」の情報が古くなってきたため「CSSの寺子屋」としてリニューアルしました。
このページでは、よく使う スタイルシート(以下CSS)の実例を紹介しています。

見出しなどの文字飾り

こうしたいときは CSSはこう書きます HTMはこう書きます 備考
デフォルト

篆刻素材AOI

h1{
font-size: 25px;
text-align:center;
margin: 0 0 5px;
padding: 5px;
border: 2px solid #B92A2C;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
<h1>篆刻素材AOI</h1> フリー素材:
見出しデザイン(CSS) 
篆刻素材AOI h2{
font-size: 25px;
color:#0c6fbd;
border-bottom:4px double #ccc;
font-weight:normal;
}
<h2>篆刻素材AOI</h2>
篆刻素材AOI h3{
font-size:25px;
-moz-text-shadow:5px 5px 3px #ccc;
-webkit-text-shadow:5px 5px 3px #ccc;
text-shadow:5px 5px 3px #ccc;
}
<h3>篆刻素材AOI</h3>
篆刻素材AOI
h4{
font-size: 25px;
background: #000;
color: #fff;
text-align: center;
width: 200px;
padding: 8px 0;
border-radius: 10px;
position: relative;
}
h4:before{
content: "";
position: absolute;
bottom: -23px;
left: 20%;
border: 12px solid transparent;
border-top: 12px solid #000;
}
<h4>篆刻素材AOI</h4>
篆刻素材AOI a.linkt {text-decoration:none;font-size: 16px;}
a.linkt:link, a.linkt:visited {background-color:#fffaa3;color:green;}
a.linkt:hover { background-color:#ccc;color: #fff;}
a.linkt:active {color:red;border-bottom : dotted 3px red ;}
<a class="linkt">篆刻素材AOI</a> 部分的にリンクの装飾を変える
.btnt {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#007dc1;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #124d77;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
}
.btnt:hover {
background-color:#0061a7;
}
.btnt:active {
position:relative;
top:1px;
}
<a href="#" class="btnt">ボタンぽいリンク</a>  

背景

こうしたいときは CSSはこう書きます
ページ全体の背景色は黒、背景画像を横方向に繰り返し、画像を固定(スクロールしても動かない)、中央に指定
サンプル
body { background:#000000 url('画像URL') repeat-x fixed center;}

背景画像を左側(右側)だけに表示
サンプル
壁紙・背景「左側・右側一列」 のページをご覧ください

背景画像を上(下)だけに表示
サンプル
壁紙・背景「上・下 一列」 のページをご覧ください

背景画像を左上(左下、右上、右下)に一つだけ表示 サンプル
壁紙・背景「固定背景(左上)」
壁紙・背景「固定背景(左下)」
壁紙・背景「固定背景(右上)」
壁紙・背景「固定背景(右下)」
のページをご覧ください

ボックス

こうしたいときは CSSはこう書きます HTMはこう書きます 備考
100px×100pxの角丸ボックス
div.boxt {
width:100px; height:100px;
padding:10px;
border:1px solid black;
background-color:#999;
color: #fff;
border-radius: 5px;
}
<div class="boxt" >100px×100pxの角丸ボックス</div>  
BOX1
BOX2
BOX3
.boxt_yoko { display: inline-block;
*display: inline; /*for IE5-7*/
*zoom: 1; /*for IE5-7*/
width:50px; height:100px;
padding:10px;
border:1px solid black;
<div class="boxt_yoko">BOX1</div><!--
--><div class="boxt_yoko">BOX2</div><!--
--><div class="boxt_yoko">BOX3</div>

※<!--  -->で、すき間をなくしています
要素を横に並べる方法としてfloat、inline-block、inline、table-cell、flex などを用いることができますが、ここではinline-blockで行う方法を紹介します

リスト

こうしたいときは CSSはこう書きます HTMはこう書きます 備考
デフォルト


リセットした状態
  • リスト1
  • リスト2
  • リスト3
/* 何れの場合もリストのデフォルトスタイルをリセットしておいてください*/
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
 
  • リスト1
  • リスト2
  • リスト3
.ilistt ul li {/* 数値は画像等に合わせる*/
padding-left:15px;
background:url('画像URL') 0 5px no-repeat;
}
<div class="listt">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
 
  • リスト1
  • リスト2
  • リスト3
  • リスト4
 
ul.listt2{background-color:#DAEAFF; padding:5px;}
ul.listt2 li {
display: inline;
margin-right:4px;
padding-right:10px;
border-right:1px solid #a2a2a2;
}
ul.listt2 li:first-child{display:block;color: #FF0033;
border-right-style:none;border-bottom:1px dashed #a2a2a2;

}
ul.listt2 li:last-child{
border-right-style:none;/* 最後のリストの右側のラインを消す */
}
<ul class="listt2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
このページのもくじのようなリストです

ボタン

こうしたいときは CSSはこう書きます HTMはこう書きます 備考
デフォルト
  <form action="○○○○">
<input type="text" value="">
<input type="submit" value="検索">
</form>
 
.inpt{
width:50px;
height:22px;
background-color:#c00;
border:none;
color:#fff;
font-size:13px;
text-align:center;
}
.inpt:hover{
background-color:#a00;
}
<form action="○○○○">
<input type="text" value="">
<input type="submit" class="inpt" value="検索">
</form>
 
input.inpt2{
background-color:#eee;
border:0;
padding:5px;
border:solid 1px #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
resize: both;
}
input.inpt2:focus{
background-color: #ffffe4;color: #666;}

input.inpt[type="submit"]{
width: 80px;
padding: 5px;
margin-bottom: 20px;
border-radius: 30px;
background-color: #000F74;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2764C5), to(#000F74));
background-image: -webkit-linear-gradient(#2764C5, #000F74);
background-image: linear-gradient(#2764C5, #000F74);
-webkit-box-shadow: 0px 2px 5px #bebebe;
box-shadow: 0px 2px 5px #bebebe;
font-size: 13px;
color: #FFF;
border: none;
}
input[type="submit"]:hover{
background-color: #2764C5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#000F74), to(#2764C5));
background-image: -webkit-linear-gradient(#000F74, #2764C5);
background-image: linear-gradient(#000F74, #2764C5);
}
<form action="○○○○">
<input type="text" class="inpt2" value="">
<input type="submit" class="inpt" value="検索">
</form>
 

スクロールバーの色変え(IE5.5以降対応)

こうしたいときは
(こんな色にはしたくないけども)
こう書きます
(色を指定しない場合 scrollbar-base-colorの色がでます)
body
{scrollbar-arrow-color: #色番;
scrollbar-base-color: #色番;
scrollbar-face-color: #色番;
scrollbar-highlight-color: #色番;
scrollbar-3dlight-color: #色番;
scrollbar-shadow-color: #色番;
scrollbar-track-color: #色番;
scrollbar-darkshadow-color: #色番; }