- header, top-wrapper, lesson-wrapper, message-wrapper, footer
- 背景の指定 background-image: url ( );
- 表示範囲埋め尽くすように拡大 background-size: cover;
- container クラスを中央に配置 左右のマージンにauto
- 合わせてwidthを指定
- box {
- width: 300px;
- margin: 0 auto; で中央寄りに
- opacity プロパティで 透明度
- letter-spacing プロパティで文字の感覚調整
- ボタンは<a>タグでインライン要素 幅の調整できない
- そこでdiplayプロパティで ブロックかインラインブロック要素に変える
- セレクタ名:hover { でカーソル乗ってるときの設定
- border-radiusプロパティで角の丸さ設定
- text-alignプロパティで文字の並べ方
- font awsomeの使い方
- <link>タグで font awsomeのCSSを読み込む
- <span>タグに faクラスとfa-〇〇クラスの両方を指定する
- <header>
- <container>
- <header-left>
- <hader-right>て感じ
- headerはクラスじゃないからドットつけない←２回め？？
- rgba( p,p,p,oo)のoで透明度設定 opacityと違って背景だけ透ける
- transition でアニメーションをつけれる 多くの場合はhoverと一緒に使う
- line-height プロパティで行間の高さ調節 要素の高さと同じにすると中央に位置する
- <a>タグはインライン要素 中身のテキスト部分しかない ブロック要素に変えると要素いっぱいの大きさを持つ
- font-weightプロパティで 文字の太さ調節
- <lesson> <lesson-icon> <img> <p> <txt-contents>
- 画像と文字重ねる→position: absolute;
- topとleftでやる。
- 親要素にpositision: relative ;で親要素の左上を基準にできる
- <message-wrapper> <container> <heading><btn-message>
- box-shadowプロパティ 水平方向 垂直方向 色 影をつける
- cursorプロパティ カーソルの種類を変える
- セレクタactiveで カーソルが乗ってるときだけCSS発動
- ボタンをへこませる position: relative; と topと box-shadow：noneを使う
- フッターのレイアウト <footer> <container> <img> <p>
- 常に画面の指定した位置に固定 position: fixed 位置
- positisonプロパティでは他の要素とかぶる可能性が大きい
- そのため z-indexプロパティを使う
やってみて
意外と簡単なことを簡単に忘れてしまっている。
