ついに上級編まで到達したそこのアナタ、 おめでとうございます！
html/css攻略まであと少しです。頑張っていきましょう。
上級編攻略の心構え
中級編を完璧にしてからはじめる
中級編道場コースで止まっている皆さんーーーぜひくじけることなく進めてください。中級編道場を超えたあたりからスラスラ進めることができます。
というのも、上級編道場にて中級編道場で宣言したクラスやレイアウトがそのまま出てくるのです。
中級編がふわっとしていると上級編に進んだときに
あれ？このクラスってどこのことやっけ？
となりがちです。まずは中級編道場までを完璧にしましょう。
【朗報】上級編は簡単です
中級編までと異なり、覚える量が圧倒的に少なくなります。
反復する回数も少なくてＯＫです。そこそこに道場コースに進みましょう。
名前に気圧されることはありません、まずやってみましょう！
上級編で学べる事
後でTipsとしてまとめておきます。
簡単に言うとスマホ表示やタブレット表示の時にレイアウトが崩れないようにする記述です。
いわゆるレスポンシブデザインですね。
学習コースの扱い
２・３周で十分です。要求される記述のほとんどは中級編までの復習です。
中級編まで完璧にしておけば反復する価値は低いです。
新規の記述をざっくり理解したら道場編に進みましょう。
道場コースの扱い
学習コースとやっていることはほぼ同じです。
プログラミングに暗記は不要 と言われますが、この程度の内容であれば暗記した方が早いと思います。
上級編 重要事項Tips
メディアクエリ
スマホの時はこう表示してね
タブレットの時はこう表示してね
と条件分岐させる書き方のことです。
上級編の内容はこれの書き方の反復練習です。
stylesheet.css やresponsive.css の中にこんな記述を書きまくります。
いつものＣＳＳ
}
例えば、
タブレットサイズ（1000px以下)のときは、
文字(p)サイズを10pxにしてね
をメディアクエリとして記述すると
p{
font-size:10px;
}
}
となります。
ね、簡単でしょう？
ブレイクポイント
メディアクエリの横幅サイズを定義する部分のことです。そんだけです。
さっきの例だとmax-width:1000px の部分ですね。
box-sizing
レイアウトが崩れたときに便利な記述です。以下にまとめておきます。
＊は「すべての要素に対して」の意味です。ひとまとまりで覚えてしまいましょう。
box-sizing:border-box;
}
html/css 上級編 道場コース 攻略
1. ヘッダーをレスポンシブ対応させよう！
中級の道場コースを終えた状態ではじまります。このサイトをレスポンシブデザインにします。
中級をカスカスまでやりこんだ貴方なら大丈夫です！頑張っていきましょう。
やるべきことは２つです。
②スマホ表示時にハンバーガーメニューアイコンを表示する
バンバーガーメニューは漢字の「三」みたいなやつです
①は簡単ですね。responsive.css 内の「モバイル向けレイアウト」にて header-right に対してdisplay:none; を指定するだけです。
②はちょっとめんどくて手順が2段階あります。
まずhtmlファイルに <span class=”fa fa-bars menu-icon”></span> を追記します。
faは既に読み込み済みです、fbとかtwで使ってましたね
stylesheet.cssでmenu-iconのCSSを記述します。仕様書通りに書けばOK。仕様書に記載はないですがcolorはwhiteです。
デフォルト（ＰＣ時・タブレット時）は非表示にするので display:none; も忘れずに！
最後に responsive.css内の「モバイル向けレイアウト」にてmenu-icon内にdisplay:block;を指定したら完成です。
2. トップ部分をレスポンシブ対応させよう！
他のクラスに影響を与えない書き方を徹底しましょう。
例えばbtnのwidthを100%としたり、container p のサイズを変更するとはるか下のフッター部分にまで影響を与えることになるので注意しましょう。
忘れがちなのはトップ全体を左寄せにするところ。text-alignをleftにしましょう。
基本的に仕様書通りに書けば正解です。仕様書記載のない記述もありません。
ちなみにタブレット時の heading h2 のサイズを決めなくても正解になります（3問目で指摘される）。
3. レッスン一覧部分をレスポンシブ対応させよう！
htmlで1行だけ追記します。lesson4連発の後にdivタグでclearクラスを作りましょう。
その流れでスタイルシートにはclearをleftとしてfloat:left;を解除します。
後は仕様書に併せてCSSを追記するだけです。記載のない数字もないのですんなり進むと思います。
CSSで記述するのは .heading h2 と.lesson の2か所です。
4. フッターをレスポンシブ対応させよう！
footer と .message に仕様書通りのCSSを書き足すだけです。ここまで来た貴方であれば特に迷うことはないでしょう。
これにて上級編修了です。お疲れさまでした～
