1.初期設定
htmlファイルとcssファイルを作成します。
- index.html
- style.css
最初にhtmlファイル<head>内の設定をしましょう。
やる事は以下の３つです。
- titleを設定
- viewportを追加
- cssファイルの読み込み
index.html
次にstyle.cssで、全体の文字指定とリンク文字の設定を行います。
style.css
2. 全体の構成を考える
セクショニングも合わせて、大まかに各エリアごとに分けていきます。
ここから更に、新HTML/CSS入門講座で行ったように、それぞれをブロックに分けてクラスを振っていくという流れになります。
その前に、今回は同じクラス（スタイル）が使えそうな箇所をピックアップしてみましょう。
２つのブロックを横並びにする箇所も複数ありますね。
ここまでで4つのクラスが出来ました。
- container
- my-10
- row
- col-5
必要そうなスタイルだけ先にstyle.cssの方に書いておきましょう。
style.css
/* 共通クラス
/================*/
.container {
max-width: 1140px;
margin: 0 auto;
}
.my-10 {
margin-top: 10rem;
margin-bottom: 10rem;
}
.row {
display: flex;
align-items: center;
}
.col-5 {
flex: 0 0 50%;
}
/* ======================================
/ タブレット以下での表示調整
/======================================*/
@media(max-width: 768px){
.row {
flex-direction: column;
}
}
次レッスンから、それぞれのエリアごとの作成ヒントをご紹介していきます。