ドットインストール：レスポンシブウェブデザイン入門#13~#14
ドットインストールさんでレスポンシブウェブデザインについて学んでいます。
今回がレスポンシブデザインの最終回ですね。
前回の学習はこちらです。
#13 メニューを出し分けていこう
さて、前回の続きです。
右側のほうをごらんください。
画面幅の広い場合のレイアウトのとき、
「menu」と、メニューアイコンの両方が出てしまっています。
目標は
- 画面が狭いとき、もしくは中くらいの時：「menu」の文字は消してアイコンのみを表示させる
- 画面の幅が広いときにはアイコンを消して「menu」の文字を表示させる
ということです。
まずは、画面の幅が狭いときには
header-pc-menuを消します。
/*header*/
のところに、書いていきますよ。
.header-pc-menu{
display:none;
}
なるほど、display:none;か…！
そうすると、見えなくなりますものね。
すると、
どの画面幅のときにも
はい、「menu」の文字は見えなくなりました。
次は、画面幅が広いとき（820px以上のとき）には
header-pc-menuを表示させ、アイコンを消すようにしていきます。
画面幅が広いここの下を探していきます。
/*large*/
@media(min-width:820px){
width:820px;
}
これの下に書いた、header-pc-menuを探します。
（正直増えてくると、探すの大変）
.header-pc-menu{
display:block;
list-style:none;
padding:0;
margin:0;
float:right;
}
こちらのほうはdisplay:block;に、
そして、header-moblie-menuのほうは
.header-mobile-menu{
display:none;
}
display:none;にします。これで画面幅が大きいときにはメニューアイコンは見えなくなりました。
画面幅を広げると、
ほら！アイコンが消えて、header-pc-menuの「menu」という文字が出てきました！
このようにして、画面幅が違う場合のレイアウトを組み上げていくのですね。
正直、
書いている内容が増え過ぎて途中でわけがわからなくなってきましたが
シンプルな組み合わせの連続なので
混乱しないようにしっかりと
コメントも残してやっていきたいですね。
#14 クラス名の衝突を解決しよう
さあ、完成です！
と思っていたら、どうやら修正しなくてはならないことがあった模様です。
作る→修正する→直す→また何か見つかる→修正する、の
繰り返しなのでしょうね。
何かを見つけたら修正のチャンス！と思うと楽しそうだなあと思いました。
さて、修正する場所はどこかといいますと、ここです。
スマホ版の画面幅にしたときに、
以前に作った余白がなくなってしまっているのが確認されました。
原因を調べる方法として一番簡単なのは
Chromeの検証機能を使うことですね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
Chromeの検証機能、Developer toolについては、
レイアウト入門の#03で学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、検証をしてみましょう。
「hello」のところをアクティブにして「検証」してみます。
helloのところは、
font-awesomeが適用されていて、
pull-rightで
float:rightになっているために
設定した余白が無効になってしまっているのだそうです。
（これを見ただけで発見する自信は全くない…）
これは、中くらい以上の大きさのときにあてたスタイルなのですが
外部CSSとクラス名がバッティングしてしまうと、
場合によっては外部CSSのほうが優先されてしまうことがあるのだそうです。
さて、治し方です。
font-awesomeのクラス名とかぶらないようにすればいいのです。
pull-right(font-awesomeとかぶっているクラス名)
ではなく、
「right-side」という名前にしてみましょう、
このように、「pull-right」のほうはコメントにして残しておくと混乱しなそうですね。
次は、マークアップの方も直します。
「pull-right」としていたところを、
「right-side」に変えます。
もちろん、pull-leftも、「left-side」に直します。
そしてブラウザをチェックしましょう。
やりました！
ちゃんと余白が復活しました✨
画面幅を広げても、ちゃんと当初の設定通り
左右に振り分けられているので問題ないですね。
他の人が作ったライブラリーは便利ではあるけれど、
このようにクラス名がバッティングすることもあるので
気をつけましょう、ということでした！
さて、レスポンシブデザインを学んだぽんきちさん。
「…」
脳内が混乱している模様です（笑）
レスポンシブデザインは、画面幅によって設定を変えるのが
大変だなあと思いました（小学生みたいな感想）。
「クラス名とかどうやってつけるの？」とかいうレベルなので
たくさん復習しようと思います（白目）。
さて、長々と学習してきたHTML&CSS。
次は、「CSSグリッドレイアウト入門」にしようか
いよいよJava Scriptに入っちゃおうか迷い中です。
グリッドレイアウトも興味あるけれど、比較的新しい仕様みたいだし
思い切ってJava Scriptにしようかなー。
ああ、楽しみです✨
並行して、Progateさんの道場編にも取り組んでみたいと思います。
（全然違うのに「正解」になったのでおもしろかった道場編。）
