Progate HTML & CSS コース中級編

<div class="header"></div> の代わりに <header></header> を使う
<div class="footer"></div> の代わりに <footer></footer> を使う
背景画像の表示(表示領域はborder)

.top-wrapper {
  padding-top:100px; /* すなわち中身は画像上端の100px下から始まる */
  background-image:url(https://example.jp/hoge.png);
  /* background-imageが表示範囲より小さいとき, 周期的に繰り返し表示される。*/
  background-size:cover; 
  /* この指定で, 表示範囲を埋め尽くすように画像が拡大縮小(縦横の一方がぴったり, もう一方が見切れる) */
}

中央ぞろえ
- margin プロパティで auto を指定する(広い範囲を囲うようなブロック要素の場合)
- text-align プロパティ(テキストやボタンのようなインライン要素・インラインブロック要素の場合)

.container {
  width:1170px;
  margin:0 auto; /* [Npx | 1170px | Npx] の配置になる(|はborder)*/
}

cssの文字のプロパティ
- opacity:0.3;:(透明0<->1不透明)
- letter-spacing:2px; :文字と文字の横間隔
- line-height:30px; : (文字含む)行の高さを指定して行間をコントロールする。(高さの中心に文字が配置されるため, 要素の高さと line-height を同じ値にすると、文字が中央に配置される)
- font-weight:bold; : 太字にする(<h1>から<h6>の要素は初期状態が太字なので, 通常の太さにする場合は normal を指定する。
インライン要素のブロック化
- <a> などのインライン要素は width, height が指定できない(padding, margin は左右のみ) -> インラインブロック要素を使う
- インラインブロック要素: ブロック要素(<div>など)の配置が横になったもの(width,height,padding,marginを指定可能)
- 指定方法は <a> などに display プロパティをつける。
  - display:inline -> インライン要素とする
  - display:inline-block
  - display:block
- <a> タグをクリックできる範囲はテキストの部分だけ(インライン要素のため)。<a> タグをブロック要素にすると、大きさが親要素いっぱいに広がる。
複数クラスの指定(クラスをスペース区切りにする)

<div class="btn blue"></div>
<div class="btn red"></div>

.btn { /* btn の共通設定*/
    border-radius:10px; /* border の角を指定半径の4分円にする */
    box-shadow:10px 20px red; /* ボックスに影を付ける(影の右方向の変位, 下方向, 色 を指定) */
    cursor: pointer; /* マウスのカーソルが要素に乗ったときのカーソルの形を変える。値は他に test, default など */
}
.btn:active {
    box-shadow: none; /* 影を消す */
    position: relative; /* bottom などを指定して, 本来の位置からの変化を定義する */
    top:20px; /* 注意: top で 下向きの変化量 */
    left:10px;
}
.blue { /* 個別設定 */
    text-align:left; /* 他に center, right */
}
.red: {
    /*「変化の対象(colorなどのプロパティ)」と「変化にかかる時間」を指定。
    これにより :hover などの有効時間を指定可能 */
    transition: all 1s;
}
.red:hover {} /* セレクタ:hover でカーソルが乗った状態のCSS指定(.red に追加) */

アイコン: Font Awesome
1. Font AwesomeのCSSファイルを読み込む
2. <span>タグにfaクラスとfa-アイコン名クラスを指定する

<head>
    <link rel="stylesheet" href="stylesheet.css"> <!-- 自分で定義したスタイルシート -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
    <span class="fa fa-facebook"></span>
    <span class="fa fa-twitter"></span>
</body>

色の指定: color:#ffffff; と color:rgb(255,255,255); は同じ
color:rgba(255,255,255,0.5) : 最後の要素は透明度
- opacity : 背景含む要素全体の透明度
- color:rgba() : 文字限定の透明度
- background-color:rgba() : 背景限定の透明度
ボックスのwidthやheightをpx単位ではなく%で指定すると、親要素に対してどのくらいの割合かで指定できる。
複数要素を重ねて表示

.hoge-parent {
    position:relative;
}

.hoge {
    position:absolute; /* ページ全体の角からのオフセットを指定 */
    /* ただし, 今回のように基準としたい親要素に position:relative; を追加した場合はそこが基点となる(この場合もposition:absolute;をつける) */
    top:200px; /* bottom も可能 */
    left:30px; /* right も可能 */
}

セレクタ:active : 要素がクリックされている間だけCSSを適用
タグが階層になっている場合も可能(以下参照)

footer img {
  position: fixed; /* スクロールしても表示画面から移動させない要素 */
  bottom:10px; /* 表示画面内の固定位置の指定は absolute, relative と同様 */
  left:20px;
  z-index:10; /* 必ず position プロパティと併用する。数字が大きい方が上に表示*/
}

Progate HTML & CSS コース 中級編

Progate HTML & CSS コース中級編