・フォーム送信の流れ
<form action="/submit_form" method="post">
<input type="text" name="username" placeholder="ユーザー名">
<textarea name="message" placeholder="メッセージを入力してください"></textarea>
<input type="submit" value="送信">
</form>
・フォントの太さ指定
/* 太字 */
font-weight: bold;
/* 細字 */
font-weight: lighter;
/* 標準の太さ */
font-weight: normal;
・FontAwesome
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<span class="fa fa-facebook"></span>
・背景画像の使い方
element {
background-image: url('your-image.jpg'); /* 画像のURLを指定 */
background-size: cover; /* 画像をエリア全体に拡大・縮小 */
background-position: center; /* 画像の位置を中央に配置 */
background-repeat: no-repeat; /* 画像が繰り返されないように設定 */
}
・opacityの値の範囲
opacity: 0; … 完全に透明
opacity: 1; … 完全に不透明（デフォルトの状態）
opacity: 0.5; … 半透明（50%の透明度）
・行間
line-height: 1.5; /* 行間を1.5倍にする */
line-height: 24px; /* 行間を24pxにする */
・line-heightと縦の中央寄せ
line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになる。
・文字間隔
letter-spacing: 2px;
・displayプロパティ
display: block;: 縦に積み重なり、横幅全体を占有する。
display: inline;: 横に並び、幅や高さの指定ができない。
display: inline-block;: 横に並びつつ、幅や高さの指定が可能。
・要素の四隅を丸くする
border-radius: 10px; /* 角を10px丸める */
・ブロック要素を中央寄せするとき
横幅を指定した状態で margin: 0 auto;
・要素:hover
カーソルを乗せた時の動作
・要素を徐々に変化させる hoverと使うことが多い
transition: all（変化の対象） 1s;
.header-right a{
display: inline-block;
line-height: 65px;
color: white;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.5s;
}
.header-right a:hover{
background-color: rgba(255, 255, 255, 0.5);
}
