日が空くようになったプログラミングの勉強。そういうこともあるよね。
さて今日は動画「5-1 padingプロパティ」と「5-4 boxサイズの考え方」まで見ました。
boxに関する勉強がひと段落した感じです。「boxってよく聞くけど、そういえばなんぞ？」と思ったので調べたらめちゃわかりやすく紹介してくれているサイトがありました。
この図を見れば一発でわかる。ありがたい。わからない用語を検索すると、わりとこのサイトが引っかかる上に、わかりやすいのでお気に入り登録しました。
勉強したこと
・padding：ボックスの内側の余白を指定
・margin：ボックスの外側の余白を指定
・display：HTMLの表示のさせ方を指定
・visibility：HTMLの見せ方を指定
・inline-block：ブロック要素にしか適用できないCSSをインラインにも適用できるようにする
・min-width min-height：指定した要素が、指定した値以上に小さくならないようにする
・max-width max-height：指定した要素が、指定した値以上に大きくならないようにする
・content-box：paddingとborderを、指定した幅や高さに含めない
・border-box：paddingとborderを、指定した幅や高さに含める
min-◯◯とmax-◯◯はコードを書いてブラウザで確認しても、いまいちピンとこなかったのでどんなときに使うのか、調べてみました。
ここのサイトがわかりやすかったです。レスポンシブデザインのときに使われるそう。
あと「display」と「visibility」ってどう違うん？と思いながら動画を見ながら進めてみたらわかりました。忘れそうなのでメモ。
枠の上に貼っていたリンクを、displayとvisibilityで見えなくなるように指定したところ。displayは要素ごと消す、visibilityは要素を見えなくするけど、スペースはそのまま、という感じですね。とりあえず今はこのぐらいの理解でいいのかな。
あとbox-sizingについても忘れそうなのでメモ。
box-sizingにはベンダープレフィックスが必要なので、Chromeなら「-webkit-」、FireFoxなら「-moz-」を先頭につける必要がある。
全角アキ、ダメ。絶対。
さて今日のつまずき。paddingの動画を見ている最中のこと。またもや動画の通りの画面にならないというおなじみのトラブルが起きまして。
赤いドットの枠内の余白が全く適用されないんですよ、動画と同じコードのはずなのに。赤丸と赤い四角になってるのは無視してください。
「CSS padding 適用されない」とかで検索したら「全角アキが入ってないかチェックしよう」と書かれているサイトがありまして。検索かけてみたら「p」の後のアキが全角アキになってました。文字の打ち間違いとかなら注意深く見ればわかるけどアキは難しいって…でもわかって良かった。今度からこういうことあったら全角アキ打ってないか検索してみよ。
