KAT 初期トレ 4回目 1・26

　こんにちは！たつきです！

今日は先週あったKAT第4回初期トレの振り返りを書いていこうと思います！

今日の内容は、これです。

 学んだこと一覧

今回からCSSの内容に入っていきました。CSSについてあることは知ってたんですが、本格的に学ぶのは初めてです。難しいイメージですが、一つ一つずつ理解していきたいと思います！

• 先週の復習
• HTMLの大事なところ→ブロック要素の中にインライン要素がある
• CSSとは、ウェブページを装飾するための言語
• CSSの書き方はHTMLと異なる→h1 {
• CSSは一括で変更できるが、一部だけも指定できる
• ウェブページのレイアウトは間隔によって作られている

初期トレの中で実際に自分の作ったウェブページでCSSを書いてみました。色を変えたり、フォントの大きさを変えたりとHTMLでは一つずつ書き換える必要がありますが、CSSでは属性や要素ごとに一瞬で変えることができます！

大事なmarginとpadding

marginとpaddingはどちらも余白を作るのですが、それぞれ領域が違います。marginは要素の外側に余白を作り、paddingは要素内に余白を作ります。要素の境界線はborderと呼ばれており、その境界線からpxによって範囲を指定できます。margin-topと書くと、上のmarginだけ指定でき、margin:10pxと書くと上下左右を一度に指定できます。

 実際にあるサイトをいじってみる

次に、実際にあるWEBサイトのCSSを見ていきたいと思います。クロームのデベロッパーツールを使えば、そのサイトで使われているHTMLやCSSを見ることができます。

最近はまっている無印良品のサイトを見てみました。こう見ると、WEBサイトはいろいろなボックスで組み合わされているのがよくわかります。

それでは課題であったCSSをいじってみます。画像のところはmargin:10pxで指定されていました。それを30pxにすると、

間隔が広くなり、商品画像がちいさくなりました。デベロッパーツールでは、このように自分の好きなようにレイアウトを変えることができます。

まとめ

今回はCSSの内容に入り、実際に装飾を変えてみたり、ウェブページのレイアウトを変更してみたりしました。ウェブページのCSSを見てみると、まだ知らない単語も多くあったので、これから学んでいきたいと思います。また、デベロッパーツールで遊んでみます。