コーディング学習備忘録⑩

難しくてなかなか進めなかったレスポンシブコーディング…PC版のマークアップにようやく慣れてきたかな、と思ったところに中ボスのように現れました！いやいや、この先もっとすごいラスボスが何人も控えているんだろうなぁ。覚悟して挑まないと。

キャンプサイトのレスポンシブをスクールの動画を見ながらひと通り履修。その間に、もっと基礎に戻って理解を深めるために、ほかの動画講座のシンプルなレスポンシブもひとつ完成させました。これについては、主催者様の許可を取得次第、また記事にしたいと思います。あとは書籍を読み読み…。基本的な構造はなんとなくわかったのですが、いざ一人で完成させよ、って言われたら、まだ固まってしまいます。レスポンシブも何度か反復練習しないといけませんね。根気強く取り組んでいきたいと思います。

とりあえずは、課題がひとつ提出できたので、ちょっとほっとしています。
いつものように、ほとんど個人用になっておりますが、備忘録を…。

レスポンシブ対応コーディング

◆スマホ対応記述の仕方

@media screen and (max-width: 768px){
.item-section-title{
color: #ffe372 ;
}
}
これよりも前の行にあらかじめ.item-section-titleの指定をしておく（この場合は、もともと緑色の指定）
それよりも下に上記の記述をすることにより、上書きされ、横幅768pxを超えたときに色が黄色になる、という意味。

要素の点数制により、上書きが効かなくなることも考慮して、このときの記述にはなるべくidではなくclassを使う。

◆max(min)-widthについて
モバイルファーストで、スマホ版から先にコーディングするときにはmin-widthを指定する場合が多く、逆にＰＣ版から先に作る場合はmax-widthが多い。

main-sectionはwidthではなく、max-width指定にして、widthはpxのかわりに%指定に変えておく。
width: 94%;　←画面を縮めたときに、合計6％の隙間を開けてくれる、という意味。コンテンツがベタっと壁にはりつくのを防ぐ。
max-width: 960px;
margin: 0 auto;
}

同様に、header部分もwidth:94%, max-width: 960px;に変更しておく。

◆ヘッダーナビをスマホ版化するには
例１：
@media screen and (max-width: 1000px){
.header-right{
display: none;　　←表示をいったん消す。表示させたいときは、display: block;
}
}

例２：
@media only screen and (max-width: 600px){
.description img{
float:　none;
display: block;　←通常画像はdisplay: inlineとなっているため、真ん中寄せが効かない。block要素にすることにより、真ん中寄せが可能になる。
margin: 0 auto;
}
}
◆Brackets内で検索するには
CTRL ＋　f を押すと検索窓が出てくる。

◆グリッド表示の横並びを縦並びにするには
flex-direction: column; を使う。
例：　@media screen and (max-width: 570px){
.item-content{
flex-direction: column;
}
}
◆特殊文字について
　© →　🄫
　"→　 "
　& →　 &
　' →　'
　&lit; →　＜
　> →　＞
　® →　🄬

◆"inherit"は、親要素を継承する。
例：.songs li{
float: none;
width: inherit;
}