デザイン設定の書き方説明
書き方説明
スタイルシートには下記の通りに記述するようにします。
デザインを変更するタグ名／ID名／class名｛ 設定名：設定する値； ｝
注意点
記述内容が違ったりするとデザインが反映されなくなる為注意しましょう。ここではやってしまいがちなミスをまとめているのでデザインが反映されない場合は確認してみて下さい。
- デザインを変更するタグ名／ID名／class名が間違っている
- 要素をIDで指定している場合は「＃」を先頭に付けて名前を記述する
- 要素をclassで指定している場合は「.」を先頭に付けて名前を記述する
- デザイン設定を記載する際に始まりを「｛」で終わりを「｝」で記述するようにする
- 設定名／設定する値が間違っている
- 設定名と設定する値には「：」を記述する
- 設定する値の終わりには「；」を記述する
実際の記述例
実際の書き方を実践してみましょう。設定内容は背景の色替えを設定していきます。
<div id="test01"> <h1 class="test02">見出し1</h1> </div> <h1>見出し２</h1>
①idのデザインの書き方
#test01｛ background: #F00； ｝
「test01」の背景が赤色に変わります。
②classのデザインの書き方
.test02｛ background: #F00； ｝
「.test02」の背景が赤色に変わります。「h1」タグに「.test02」を指定したものにも背景の色が適用されます。
③タグ名のデザインの書き方
h1｛ background: #F00； ｝
全ての「h1」の背景の色が変わります。
④違う書き方のデザインの書き方
#test01 h1｛ background: #F00； ｝
「test01」内の「h1」タグの背景の色が赤色に変わります。
デザイン設定
デザイン設定について下記の5つに分けてまとめています。
- 文字のデザイン
- 背景のデザイン
- 要素の大きさ
- 要素の配置換え
- 要素の非表示
文字のデザイン
文字の大きさ
| 書式 | 設定値 | 記述例 |
| font‐size | px em % |
font‐size:10px; font‐size:10em; font‐size:10%; |
文字の色
| 書式 | 設定値 | 記述例 |
| color | #〇〇〇; #〇〇〇〇〇〇〇〇〇; |
color:#F00;（赤色） color:#FF0000;（赤色） |
背景のデザイン
背景の色
| 書式 | 設定値 | 記述例 |
| background‐color background |
#〇〇〇; #〇〇〇〇〇〇〇〇〇; |
color:#F00;（赤色） color:#FF0000;（赤色） |
要素の大きさ
横幅の設定
| 書式 | 設定値 | 記述例 |
| width | px em % |
width:10px; width:10em; width:10%; |
高さ設定
| 書式 | 設定値 | 記述例 |
| height | px em % |
height:10px; height:10em; height:10%; |
要素を丸める（画像）
| 書式 | 設定値 | 記述例 |
| border-radius | px em % |
border-radius:10px; border-radius:10em; border-radius:10%; |
要素の配置換え
marginで配置換え
| 書式 | 設定値 | 記述例 |
| margin margin-top margin-right margin-left margin-bottom |
px em % |
margin:10px; margin:10em 0em 10em 0em; margin-top:10%; |
paddingで配置換え
| 書式 | 設定値 | 記述例 |
| padding padding-top padding-right padding-left padding-bottom |
px em % |
padding:10px; padding:10em 0em 10em 0em; padding-top:10%; |
positionで配置換え
| 書式 | 設定値 | 記述例 |
| position |
|
position:staticstatic;（初期値） position:relative;（相対値） position:absolute;（絶対値） position:fixed;（画面スクロールしても固定される） |
文字の配置換え
| 書式 | 設定値 | 記述例 |
| text‐again | left center right |
text‐again:left;（左揃え） text‐again:center;（中央揃え） text‐again:right;（右揃え） |
要素の非表示
①display設定
| 書式 | 設定値 | 記述例 |
| display | none | display:none;（要素が無くなったと判断され空白が詰めた状態で表示されます） |
②visibility設定
| 書式 | 設定値 | 記述例 |
| visibility | hidden | visibility:hidden;（領域は空白として表示されます） |