プログラミングの勉強日記
2020年5月25日~2020年5月26日
ヘッダーとフッター
ヘッダーとフッターのタグは良く使われるので、HTML5では<header></header>と<footer></footer>のタグが用意されている。（クラスで名前を付ける必要がない。
背景画像の指定：background-color url(画像のURL)
このままでは指定された画像は表示範囲を埋め尽くすまで繰り返し表示される。
→background-size:cover;を使うと1枚の画像で表示範囲を埋め尽くすように大きさが拡大縮小する
要素を中央に配置する
marginの左右にautoを指定する（marginにautoを指定するときはwidthを合わせて指定する）
テキスト等のインライン要素やインライン要素の配置を指定するtext-aliginプロパティを用いて、text-align:centerとすると、中央寄せできる。（左寄せ：left 右寄せ：right）
文字の間隔を指定：letterspacingプロパティ
ボタンの作成
<a>タグを指定するが、インライン要素にはwidthやheight、上下のmarginが指定することができない。そこでインラインブロック要素を用いる。
インラインブロック要素
名前の通りインラインブロック要素とはブロック要素とインライン要素の特徴を併せ持つ要素のこと。インライン要素と同様に横に並ぶが、ブロック要素のように幅や高さを持つ。
displayプロパティでblock(ブロック要素)、inline-block(インラインブロック要素)、inline(インライン要素)を指定することができる。 ex) display:inline-block;
これを利用して、<a>タグでボタンを作るときに<a>タグをブロック要素にすることで、テキストのみでなく全体をクリックすることができる。（大きさが親要素一杯に広がるから）
カーソルがのったときの状態：hover（セレクタ:hoverで使う）
角を丸める：border-radiusプロパティ
border-radius:値;として使う。数字が大きくなるほど角が丸くなる。
要素を透明化させる
opacityプロパティ：透明度は0.0（完全に透明）~1.0（完全に不透明）の数値で指定している。中身全てを透明にする性質がある。
→背景のみ透明にする場合はrgbaを用いる。
rgba：4つの値をコンマ区切りで入れる。最初の3つの値はrgbで表される色の組み合わせを用いて、最後の4つ目の値が透明にする度合い（0.0~1.0)を指定する。（その色だけを透明にできる）
アニメーションを付ける
transitionで「変化の対象」や「変化にかかる時間」などを指定できる。変化の対象にはcolorなどのプロパティを使うが、allを指定するとすべてのプロパティに適用できる。（hoverと組み合わせて使われることが多い）
/*カーソルがのったときに背景の色が赤くなる*/
div{
transition:all 1s;
}
div:hover{
background-color:red;
}
行間の指定：line-heightプロパティ
行の高さを指定できる。（値が大きくなるほど行間は大きくなる）また、要素の縦方向の中央に文字を配置するのにも使える。
文字の太さの指定：font-weightプロパティ
normalもしくはboldを指定する。見出しの<h1>要素は初期状態でfont-weight:bold;になっている。
要素同士を重ねて表示する
position:absolute：サイト全体の左上部分を基準として、topやleftなどを用いる。
position:relative：親要素の左上部分を基準として、topやleftなどを用いる。また、要素の位置を変更するためにも使える。
影を付ける：box-shadowプロパティ
box-shadow:水平方向 垂直方向 影の色を指定する。
要素がクリックされている状態：active
クリックされているときだけCSSを適用できる。