ブロックレベル要素とインライン要素

タグの性質を把握する

ブロックレベル要素と、インライン要素だって？
何をいきなり、難しいこと言いだしたわけ！？

はあ……まあ……そうですね。
管理人も、最近覚えたことですが、覚えておくといい、
いや、
覚えておくべきだと思ったので、ちょっち書きます。

ホームページビルダーを使い始めた頃は、まず、直接タグを打ち込みは、しませんよね。
私も、はじめの頃は、闇雲に、アイコンをピコピコしまくり、
次に、テーブルを覚えてたので、エクセルかよってくらい表を作りまくり、
次は、ＤＩＶとclassを覚えたので、それ一本。
そのうち、ＰとかＨシリーズを使わないといけないんだとか、色々タグについて覚えていきました。

「ブロックレベル」と「インライン」は、
タグの持っている性質を、大きく二つに分けたものです。

「ブロックレベル」は、
その名の通り、なんだか硬そうなものに感じますし、
「インライン」は、
in lineだから、一線に並んだなんかのことかな？　と想像をします。

すでに、ホームページビルダーをつかって、１ページでも２ページでも、ページを作ったことがある方は、すでに、ブロックレベルと要素とインライン要素をそれなりに使いこなしていると思います。

そして、何となく、「こいつって、こんな奴だよな～～」
と、感じているはず。

なんとなく、理解していることを
整理できればいいかな、と思い、今回の記事を書きました。

今回は、ＨＰに、大よそのことをマトメました。
ソースを見ても大体がわかるように、ものすごいシンプルなページにしてあります。

決して手抜きじゃないですよ……^^;
私が難しいことを説明するのは、無理なので、
（私自身が、まだよくわかってないし）
もっとちゃんと知りたい方、
詳しく知りたい方は、、グーグルなどで、検索をしてくださいね。

ブロックレベル要素を見てみよう

ブロックレベル要素は、１カラムページ作成でも使った、
ＤＩＶ・Ｐ・Ｈ１～のＨシリーズ・ＴＡＢＬＥなどが代表格です。

最大の特徴は、こちらを見てね
何となく、分かりますよね？

インライン要素を見てみよう

インライン要素と言われると、は？？？
って、感じですが、
リンクに使う【Ａ】タグや下線を引く【Ｕ】タグ、画像を表す【ＩＭＧ】、強調する【ＳＴＲＯＮＧ】などがあります。

あ～～なんだ！って感じでしょ？

では、一番身近な【Ａ】タグで、インラインってどんな性格なのか、見ていきましょう。
こちらから

こんなこともできます

ブロックレベル要素は、縦に積み重なっていく。

インライン要素は、改行がされなければ、横に並んでいく。

これが、基本なのですが、実は…………
ブロックレベル要素をインライン要素にすること、
その逆に、インライン要素をブロックレベル要素にすることも可能なのです。
そうすることに、よって、
リストタグを横に並べてみたり、
リンク（アンカー）をボタン風に作ってみたりできるわけです。

是非、ブロックライン要素とインライン要素覚えておいてね！