Progate html/css 上級編 学習・道場コース攻略Tips【2・3周でOKです】

ついに上級編まで到達したそこのアナタ、 おめでとうございます!

html/css攻略まであと少しです。頑張っていきましょう。

上級編攻略の心構え

中級編を完璧にしてからはじめる

中級編道場コースで止まっている皆さんーーーぜひくじけることなく進めてください。中級編道場を超えたあたりからスラスラ進めることができます。

というのも、上級編道場にて中級編道場で宣言したクラスやレイアウトがそのまま出てくるのです。

中級編がふわっとしていると上級編に進んだときに

あれ?このクラスってどこのことやっけ?

となりがちです。まずは中級編道場までを完璧にしましょう。

【朗報】上級編は簡単です

中級編までと異なり、覚える量が圧倒的に少なくなります。

反復する回数も少なくてOKです。そこそこに道場コースに進みましょう。

GEN
GEN

名前に気圧されることはありません、まずやってみましょう!

上級編で学べる事

後でTipsとしてまとめておきます。

簡単に言うとスマホ表示やタブレット表示の時にレイアウトが崩れないようにする記述です。

いわゆるレスポンシブデザインですね。

学習コースの扱い

2・3周で十分です。要求される記述のほとんどは中級編までの復習です。

中級編まで完璧にしておけば反復する価値は低いです。

新規の記述をざっくり理解したら道場編に進みましょう。

道場コースの扱い

学習コースとやっていることはほぼ同じです。

プログラミングに暗記は不要 と言われますが、この程度の内容であれば暗記した方が早いと思います。

上級編 重要事項Tips

メディアクエリ

スマホの時はこう表示してね
タブレットの時はこう表示してね

と条件分岐させる書き方のことです。

上級編の内容はこれの書き方の反復練習です。

stylesheet.css やresponsive.css の中にこんな記述を書きまくります。

@media(横幅のサイズ){
 いつものCSS
}

例えば、

タブレットサイズ(1000px以下)のときは、
文字(p)サイズを10pxにしてね

をメディアクエリとして記述すると

@media(max-width:1000px){
 p{
font-size:10px;
}
}

となります。

GEN
GEN

ね、簡単でしょう?

ブレイクポイント

メディアクエリの横幅サイズを定義する部分のことです。そんだけです。

さっきの例だとmax-width:1000px の部分ですね。

box-sizing

レイアウトが崩れたときに便利な記述です。以下にまとめておきます。

*は「すべての要素に対して」の意味です。ひとまとまりで覚えてしまいましょう。

*{
box-sizing:border-box;
}
道場編で記述を求められることはないですが、大事な記述です。

html/css 上級編 道場コース 攻略

1. ヘッダーをレスポンシブ対応させよう!

中級の道場コースを終えた状態ではじまります。このサイトをレスポンシブデザインにします。

中級をカスカスまでやりこんだ貴方なら大丈夫です!頑張っていきましょう。

やるべきことは2つです。

①スマホ表示時の「レッスン・新規登録・ログイン」を消す
②スマホ表示時にハンバーガーメニューアイコンを表示する
GEN
GEN

バンバーガーメニューは漢字の「」みたいなやつです

①は簡単ですね。responsive.css 内の「モバイル向けレイアウト」にて header-right に対してdisplay:none; を指定するだけです。

②はちょっとめんどくて手順が2段階あります。

まずhtmlファイルに  <span class=”fa fa-bars menu-icon”></span> を追記します。

GEN
GEN

faは既に読み込み済みです、fbとかtwで使ってましたね

stylesheet.cssでmenu-iconのCSSを記述します。仕様書通りに書けばOK。仕様書に記載はないですがcolorはwhiteです。

GEN
GEN

デフォルト(PC時・タブレット時)は非表示にするので 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を書き足すだけです。ここまで来た貴方であれば特に迷うことはないでしょう。

これにて上級編修了です。お疲れさまでした~

プログラミング

GENのプロフィール

(Youtubeにて毎週生放送中)

意識の低いIT自営業7年目。ネットを用いた物販・広告・金融業が得意。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。 twitterはこちら

禿げてもええやないか!スキンヘッド男道