CSSに関する記事の内容がわかるようになってきた

2018年11月13日 21:14

ドットインストールのレッスンに取り組む前向きな気持ちが、日に日に大きくなっていることは前にも書きましたが、最近は他のWebメディアからも情報を得ようと挑戦しています。

本日の学習日誌で報告するCSS入門の第13回で、はじめてdivタグについて習ったおかげで、CSSフレームワークに関する記事の内容を理解することができるようになりました。うれしい成長です！

勉強って習うだけじゃなくて、自分で復習や実践の場をつくり、自分で自分の成長をほんの少しでも感じることがモチベーション維持には欠かせないですね。それでは今日も学習日誌、書いていきます！

#12 box-shadowで影をつけよう

前回のレッスンでは画像「太郎」の角を丸くしましたが、今回は同じ画像へ外枠として5pxのピンク色の実線をつける練習をしました。

じゃん！こうなりました（上図）。次にピンクの実線に影をつける設定も行いました。プロパティはbox-shadowを使用。

指定の仕方がまた複雑になってきて、影をX方向に10px、Y方向に10px伸ばし、5px分ぼかして、色は黒色、と4つの命令を書きました（上図）。

そしたらじゃん！本当に影がつきました（上図）。少しやり過ぎになってしまったため、修正をすることに。

上の通りに書くと、影をX方向にもY方向にも動かさず、5px分ぼかし、色はグレーにできます。

ほい！できました。これにて終了。

第13回は新しいタグdivの登場です。そばで動画の音声を聞いていた夫が「divタグはめっちゃ使うよ〜」と言ってきたので、レッスンに気合いが入りました。

そういえば前職でサイトの更新（簡単なテキストの修正）を行う際に、Webデザイナーさんから渡されたファイルをエディタで開くと、めっちゃ<div>が並んでいた気がします。

divタグとは、ひとかたまりにしたいコンテンツを透明な領域で囲ってあげてブロック状にできるものなんだそう。基礎的な概要はTechAcademyマガジンでも学べます。

今回のレッスンではdivタグを使って画像とh1・pのテキストをひとかたまりにしました。そしてdivタグで囲った領域の幅を、画像と同じ幅の400pxに設定しました。

最後にh1とpのテキストを左揃えに直したら完了。divタグの意味をしっかり頭に入れました！

この回では主にdivを中央揃えにする方法を習いました。修正前は下のように右側にあまった余白がある状態でした。

この状態からmargin-left: auto; と書くと、この余白をすべて左側に割り当ててくれます（下図）。

ここからさらにmargin-rightもautoにすると、あまっている余白すべてを左右へ均等に割り振ってくれるとのこと（下図）。このようにautoを使い、左右のmarginを均等に割り振って中央揃えにするという手法がよく使われるそうです。

それからdivの下部に区切り線をつけるのも実践しました。下の通り、コンテンツとフッターの間に余白しかない状態から、

border-bottom: 1px solid gray; と指定して、1pxのグレーの実線で境界線ができました（下図）。

ふーーーっ。これでCSS入門はあと3回のレッスンを残すのみとなりました。