今日からHTML＆CSS中級編を復習してみた！
今日のアウトプット
今日の備忘録
ヘッダータグとフッタータグ
- ヘッダーとフッターのタグは非常によく使われるためHTMLには
<header>タグと<footer>タグが存在する -
<header>タグと<footer>タグを使うことで<div>とクラス名を用いる方法は不要になる- 例：
<div>とクラス名を用いる方法<input type="submit"><div class="header"></div><div class="main"></div><div class="footer"></div>
- 例：
<header>タグと<footer>タグを用いる方法<header></header><div class="main"></div><footer></footer>
- 例：
背景画像を指定する方法
- CSSで背景画像を指定するにはbackground-imageプロパティを用いる
- 定型文：
background-image: url(画像のURL);
- 定型文：
背景画像の大きさを指定する方法
-
background-imageで指定された背景画像は表示範囲を埋め尽くすまで繰り返し表示される性質がある -
background-size: cover;を指定すると1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する
要素を中央に配置する方法
- 中央に配置するためにはmarginの左右にautoを指定する必要がある
- 例：
margin:0 auto;
- 例：
- marginにautoを指定する場合は必ずwidthを併せて指定する
- 上下のmarginにautoを指定することはできない
要素を透過させる方法
- 要素を透明にするにはopacityプロパティを使う
- 例：
opacity:0.5;
- 例：
- 透明度は完全に透明「0.0」から完全に不透明「1.0」の間で指定します。
文字の間隔を指定する方法
- letter-spacingプロパティを用いることで文字の間隔を指定できる
- 例：
letter-spacing：10px；
- 例：
インライン要素でwidthやheightを指定する方法
-
<a>タグなどインライン要素はwidth/height/marginを指定できない - インラインブロック要素を用いるとインライン要素でもwidth/height/marginを指定できる
- displayプロパティを使うとインラインブロック要素に変更できる
- 例：
display:inline-block;
- 例：
- displayプロパティでは他の要素を指定することができる
- block（ブロック要素）
- inline-block（インラインブロック要素）
- inline（インライン要素）
複数のクラスを指定する方法
- 複数のクラスを細かく指定したい場合はクラス名を半角スペースで区切ることで指定することができる
- 例：クラス名を半角スペースで区切る（HTML）
<div class="button blue"></div><div class="button red"></div>
- 例：区切られたクラス名を一部だけ指定する（CSS）
.button{font-size:10px;}.blue{color:blue;}.red{color:red;}
- 例：クラス名を半角スペースで区切る（HTML）