CSSの寺子屋(スタイル例)
- INDEX
- 基本：
- CSSとは
- <span>と<div>の違い
- <class>と<id>の違い
- スタイル適用の優先度
- スタイル例：
- 見出しなどの文字飾り
- 背景
- ボックス
- リスト
- ボタン
- スクロールバーの色変え
「タグの寺子屋」の情報が古くなってきたため「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はこう書きます | 備考 |
|---|---|---|---|
デフォルト
↓ リセットした状態
|
/* 何れの場合もリストのデフォルトスタイルをリセットしておいてください*/ ul { margin: 0; padding: 0; } li { list-style-type: none; } |
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> |
|
|
.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> |
|
|
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: #色番; } |
