メモ

メモを入力してみよう!


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

練習を見る

学習概要

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

補足

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

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

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

こちらの部活では HTML CSS について学んでいきます今回学んでいくのはこちらブロックレベル要素とインライン要素大量ですねブロックレベル要素とインライン要素というものをこれから説明していきたいと思いますこれはですね CSS で自社のホームページを作っていく際にここの部分と理解してないとですね思ったらでざいにならなかったりしますのであの手このところはですね必ず抑えるようにしておきましょうではこれから説明していきますけれどもりさのホームページというのはですね今までもやったように書くタグで囲まれてますそれでの文書が書くタグで囲まれてますが書くタグで囲まれたところ要素といますけれども各要素に分かれてるんですねんですけれども実際内部の方ではですね四角いブロックのような形をしていますこれが待つ身衣に積み重なって実際に文章として表示されている中**なってますそのブロック要素にはですねにありますそれで今回ご説明するブロックレベル要素と呼ばれるインライン要素と呼ばれるものになりますちょっとこちらを見て頂きたいんですけれどもまずブロックレベル要素と言われるものは全てですね横浜いっぱいの四角いボックスとして確保されますので基本的にはですねブロックレベル要素を横並びにつなげるって言うことはできないですねブロックレベル要素の中にはさらにブロックレベル要素というものを入れることはできますそのブロックレベル要素と呼ばれるほどそれがどういったよかと言うと今まで使ってきた p タグと呼ばれるものあとは h 1から h 6までの手紙なしのタグですね1から6枚でどんどん文字がちっちゃくなっていくんですけれどもそう痛みだしのあとは俺がリストのタグでしたねテーブルのタグですねホームのタグだとかあとは汎用的には特に役割は決まってない DIV タグと言われるものがありますとはどこでも使えるのですねこういったタグがそのブロックレベル要素と呼ばれるものになりますこういったタグで文章を囲った場合文章が短かったとしても横幅いっぱいまで内部の方では四角か壊れて確保エリアが確保されてると中**なってます実際そのためにですね背景色をつけてみるとわかりやすいんですけれどもこれは以前行ったものになりますがホームページの見出しこれは H 1タグを使ってますこれは段落ですという赤文字のところは T ピータクで素手でこれは二番目の見出しですというところは H 2タグを使ってますそれに対して背景色を指定した場合今見ていただいているようにですね文字の長さよりも1500背景色が指定されてますを言った形で内部のエリアの確保はですね15まるまる文エリアは実際加工されているんですねまだ背景色を指定した場合そのエリア全部が塗られるという形になり半田にですねインライン要素と呼ばれるものはいたぐとしては A タグリンクのタグですねであったりイメージタグ画像を表示させるためであったり BR これは改行のタグですねあとは Span タグこれはサクラの子二子と同じように今どこでも使えるような特に役割は決まってないタグになりますたタグはインライン要素と呼ばれるものですねそのブロックレベル要素とは反対に横幅いっぱいではなくてま文字を書いたらそのも自分だけボックスが加工されるような形になってますけど付き合って背景色を例えばそのタグに対して指定した場合文字数に対して横浜全部が背景色指定されるんではなくて文字数だけそこのところだけ背景色が変わる形のものになりますので横幅いっぱいにボックスが確保されてるエリア確保されているわけではないのでこのインライン要素を横に並べる事っていうのも出来ますけどもブロックレベル要素に対しても CSS で指定してあげれば横並びにすることができるんですけれども基本的には横並びにはブロックレベル要素はできないというものになりますですねこの一掃にはそのこのタグの中にはブロックレベル要素のタグは入れることはできないのでそこだけ注意をしてくださいの横幅いっぱい取ってるタグボックスですねを中に入れることはできないとなりますブロックレベル要素インライン要素の違いによってですねこの家のちょっと説明します padding だとかまーじんてお 余白ですねそこがねつけたりつけられなかったりしてできたりできなかったりっていうところがあったりしますそうすると実際ホームページを作っていく際にレイアウトをどんどん作っていきますけれどもちょっと横幅がずれてしまったりとか思ったようにいかないということがあったりしますのでこういうブロックレベル要素インライン要素ということ違いがあるんだよという所をまず理解をしていただければと思います