メモ

メモを入力してみよう!


Lesson 13「marginとpadding」

学習概要

ホームページのレイアウトを組んでいく際に重要な「余白」について学んでいきます。

補足

コメントはありません

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 13「marginとpadding」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツ講師の斉藤です。こちらの部活ではHTML&CSSについて学んでいきます。
今回学んでいくのこちら。
marginとpadding

はいではmarginとpaddingの説明をしていきたいと思います。この二つはどちらも前回やったボックスの周囲の余白を指定できるものになっています。例えばある文章があったとします。2つ段落があったとして段落なので

タグで囲まれているとします。タグで囲まれた部分をそれぞれ要素というんでしたけれども、前回もやりましたがその要素というのはボックス状になっています。画面上でわからないですけれども、画面内の方ではボックスとしてエリアが確保されているって事ですね。

タグの場合ブロックレベル要素になりますので、文字数大きさに関わらずに横幅いっぱい一行文全部ボックスとしてエリア確保されるというものでした。ここまでが前回学びましたけれども、ボックスとしてエリア確保されているということはそのボックスの境界があるということですね。このようにそれぞれの要素はボックス状になってますのでそれぞれのボックスに境界があります。この境界を広げるのがpaddingと呼ばれるものになります。CSSでpaddingを指定することで文字とボックスの境界の間の余白を指定してあげることができるんですね。もう一つmarginというのがそのボックスの境界から外側の余白を指定してあげるのがmarginというものがあります。paddingでボックスの内側の余白を指定してmarginでボックスの外側の余白を指定するというわけですね。実際にCSSで書いていく場合には下のような形で書いていきます。
今回の場合だと段落を表す

タグに対してmarginが10px、外側の余白を10pxにします。padding15pxとやればボックスの内側の余白が15pxの余白が取られるという形で実際CSSではスタイルを指定していきます。

このmarginとpadding、なぜ重要かと言うと、要素同士を並べるときやborderといって枠線をつける時、あとは前回やりました背景色を指定する際、こういう時にmarginとpaddingどっちを指定するか、どっちの余白を指定するかによって違いが結構出てきます。例えば前回ありましたけれども背景色をつける時は背景色はボックスの境界まで塗られるような形になります。なのでmarginでいくら余白を指定してもその余白に色がつくことはないってことですね。
他にもボーダー、よく画像の枠線をつけたりだとか文章を四角く囲ったりしますけれどもこのborderはボックスの境界に沿ってborderが引かれるような形になります。
そしてもう一つ重要なことがですねインライン要素に関してになります。インライン要素の場合はですねこのmarginの縦が指定できないんですね。上下のmarginが指定できないので例えば画像を表示させるイメージタグ、インライン要素ですけれどもこの画像を並べて上下の余白を指定したくてもインライン要素なので指定できないんですね。他の余白を作りたい場合はCSSでそのインライン要素に対してブロックレベル要素へ変える必要が出てきます。これからホームページを作る時にはレイアウトを組む時にこういったmargin、paddingというものが重要になってきますので覚えておきましょう。

ではまたお会いしましょう、さよなら。