本日のテーマ
レスポンシブWebデザインを理解しましょう
授業詳細
Box model
CSSはこれをしっかり覚えよう！
この10個はしっかり押さえる
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
【ボックスモデルに関わるセレクタ】
☑ width ☑ height☑ border☑ padding ☑ margin
【ボックスをレイアウトさせるセレクタ】
☑ float ☑ clear ☑ position ☑ overflow ☑ display
よくつまづくところはmargin
paddingは記述したものをそのまま反映することができるが、marginはちょっと複雑。
・「marginの相殺」がややこしい
・「ネガティブマージン（マイナス値）」がややこしい
・「他のセレクタとの関係性」がややこしい
使いこなすコツ
marginとmarginがぶつかった時、相殺が起きる。marginはぶつけないで使う。相殺させない。
marginは見えないので、見た目ではなく、数値で理解するのが大事。
レスポンシブWebデザイン
モバイルフレンドリーの対応は必須。
スマホのサイズはiPhoneSEがディスプレイが小さいので、その基準で読めるようであれば問題なし。
フォント
最近はWEBフォント、特にGoogleフォントを使うのがおすすめ。どんな環境でも同じフォントで見ることができる。
フリーアイコンはfontawsomeがおすすめ
使用ソフトについて
コードを書くとき、最初はいろいろなソフトを触ってみるとよい。
学校ではTeraPadだが、ほかにもいろいろある。就職の時にこんなソフトが使えるとアピールできる。
講師の先生から聞いた使用ソフト
- サクラエディタ
- TeraPad
- Notepad++
- Dreamweaver
- Sublime Text
- Online HTML EDITOR
- Visual Studio Code
- mi
- CotEditor
授業の感想
気づけば、HTMLとCSSの授業に区切りがつき、あっという間に終わってしまった。CSSへの理解がまだできていないので、苦手に感じる。
練習問題を繰り返しすることと、ほかのサイトの構造を確認していくことで、スキルを磨きたい。