メモ

メモを入力してみよう!


Lesson 12「ブロックレベル要素とインライン要素」

学習概要

CSSでホームページをレイアウトしていく際に必須の知識となる要素の種類について学習していきます。

補足

HTML5からはブロック要素とインライン要素という分け方ではなく、「コンテンツモデル」や「カテゴリー」といった内容で要素を分類するようになりました。
ですが、かなーり分かりにくいので今まで通りブロックレベル要素とインライン要素で覚えてしまって大丈夫です。
(基本は同じです)

レイアウトが上手くいかない場合や分かりにくい場合は、「背景色をつけてレイアウトをし、終わったら背景色を消す」といった方法でやってみましょう。

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

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

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 12「ブロックレベル要素とインライン要素」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツ講師の斉藤です。こちらの部活ではHTML&CSSについて学んでいきます。
今回学んでいくのこちら。
ブロックレベル要素とインライン要素

はいではブロックレベル要素とインライン要素というものをこれから説明していきたいと思います。
これはCSSで実際のホームページを作っていく際に、ここの部分と理解してないと思ったようなデザインにならなかったりしますので、このところは必ず抑えるようにしておきましょう。
ではこれから説明していきますけれども、実際のホームページというのは今までもやったように各タグで囲まれてます。それぞれの文章が各タグで囲まれてます。各タグで囲まれたところ要素といいますけれども、各要素に分かれてるんですね。この要素なんですけども実際内部の方では四角いブロックのような形をしています。これが積み木のように積み重なって実際に文章として表示されているような形になってます。そのブロック、要素には2種類あります。それが今回ご説明するブロックレベル要素と呼ばれるものと、インライン要素と呼ばれるものになります。

こちらを見て頂きたいんですけれども、まずブロックレベル要素と言われるものは一行全て横幅いっぱいの四角いボックスとして確保されます。なので基本的にはブロックレベル要素を横並びに繋げるっていうことはできないです。ブロックレベル要素の中にはさらにブロックレベル要素というものを入れることはできます。
そのブロックレベル要素と呼ばれるもの、それがどういった対応かというと、今まで使ってきたpタグと呼ばれるもの、あとはh1~h6の見出しのタグですね、1から6までどんどん文字がちっちゃくなっていくんですけれどもそういった見出しのタグ。あとはulタグ、リストのタグでしたね。tableのタグですね。formのタグだとか。あとは汎用的に特に役割は決まってないdivタグと言われるものがあります。どこでも使えるものです。こういったタグがそのブロックレベル要素と呼ばれるものになります。こういったタグで文章を囲った場合文章が短かったとしても横幅いっぱいまで内部の方では四角く囲われてエリアが確保されてるという形になってます。
実際そのタグに背景色をつけてみるとわかりやすいんですけれどもこれは以前やったものになりますが、ホームページの見出し、これはh1タグを使ってます。これは段落です、という赤文字のところはpタグです。でこれは二番目の見出しです、というところはh2タグを使ってます。それに対して背景色を指定した場合今見ていただいているように文字の長さよりも一行まるまる背景色が指定されてます。こういった形で内部のエリアの確保は一行まるまる分エリアは実際確保されているんですね。背景色を指定した場合そのエリア全部が塗られるという形になります。

反対にインライン要素と呼ばれるものはタグとしてはaタグ、リンクのタグですね、imgタグ、画像を表示させるタグであったり、
これは改行のタグ、あとはspanタグ、これは先ほどのdivタグと同じようにどこでも使えるような特に役割は決まってないタグになります。こういったタグはインライン要素と呼ばれるものになります。
インライン要素は先ほどのブロックレベル要素とは反対に横幅いっぱいではなくて文字を書いたらその文字分だけボックスが確保されるような形になってます。先ほどと違って背景色を例えばそのタグに対して指定した場合、文字数に対して横幅全部が背景色指定されるんではなくて、文字数分だけそこのところだけ背景色が変わる形のものになります。なので横幅いっぱいにボックスが確保されてるエリア確保されているわけではないのでこのインライン要素を横に並べることも出来ます。先ほどもブロックレベル要素に対してもCSSで指定してあげれば横並びにすることができるんですけれども基本的には横並びにはブロックレベル要素はできないというものになります。このインライン要素のタグの中にはブロックレベル要素のタグは入れることはできないのでそこだけ注意をしてください。なので横幅いっぱいとってるタグ、ボックスを中に入れることはできないということになります。
ブロックレベル要素インライン要素の違いによって、後々説明しますpaddingだとかmarginと呼ばれる余白、そこがつけたりつけられなかったり、指定できたりできなかったりっていうところがあったりします。そうすると実際ホームページを作っていく際にレイアウトをどんどん作っていきますけれども、ちょっと横幅がずれてしまったりとか思ったようにいかないということがあったりしますのでこういうブロックレベル要素インライン要素という違いがあるんだよという所をまず理解をしていただければと思います。

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