ブロック要素とインライン要素

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

とその前に、まずは今までのおさらいですが、
ブラウザで表示するウェブサイトを作るためにはHTMLという言語を使います。

そして、そのHTMLは適当なテキストエディタでテキストとして普通に書いて、保存するときに、拡張子を「.html」にするだけで機能します。
つまり、よくあるプログラミング言語のように「開発環境」というものを構築してどうのという煩わしさが一ミリもない状態で「始められる」言語と言えます。
メモ帳的なテキストエディタを開いた瞬間から、HTMLを書くことができます。

HTMLを書くという言い方をしましたが、いわゆる「HTMLタグ」と、「内容についてのテキスト」を組み合わせて書いたものをHTMLと言います。
HTMLタグそのものをHTMLっていう場合もありますが。

その雛形としてテンプレートを用意しました。

これ適当に10分くらいで作ったやつなので中身はほんと適当ですが、枠組みとしてはある程度機能します。ていうかだいたいでいいんですまずは。あとで足して行けばいいので。

では本題ですが、HTMLで何ができるのか?HTMLといってもどういう種類があって、どう使い分けるのか?
その辺がよくわからないと思いますが、何ができるかは、ウェブサイトが作れる。それ以外ありません。ご安心ください。

では種類について羅列する前に、HTMLタグにはいろいろな種類がありますが、ほぼ全てが2つに分けて考えられます。
ブロック要素とインライン要素です。

ブロック要素・・・横幅100%

ブロック要素というのは、あらかじめ横幅が100%になっているHTMLタグのことを言います。
基本的に横幅100%なので、そのままブロック要素のHTMLタグを横につなげて書いても横並びにはなってくれません。
横幅100%なので当然ですね。
HTMLの内容が、表示可能な横幅の100%を超えた場合、まるでWordでテキストを打つ時のように次の行(厳密には行とかないので、「下」ってことです)へと改行されます。
横幅100%なので当然ですが。

<div>や<section>や<p>などのHTMLタグはブロック要素です。

インライン要素・・・文字列の中に埋め込められる

インライン要素は文字列のなかに埋め込められるというのはどういうことかというと、単純にテキストを太字にしたい時とかありますよね?そういうときに<b>とか<strong>とか使ったりするわけですがコレのことです。
なので、だいたいインライン要素のHTMLタグは文章の中で使われることが多いです。

インライン要素の例


こんにちわ。<strong>太字</strong>です。

このように書いた場合、

こんにちわ太字です。

となります。文字列の中にありますよね。
逆に、もし<strong>がブロック要素だったら以下のような見た目になります。

<strong>がブロック要素な異世界の場合

こんにちわ
太字
です。

これじゃ使えないですね。太字が。
なので、文字列の中に埋め込むようなHTMLのことをインライン要素って言います。

まとめると、インライン要素以外全部ブロック要素!と覚えておいてください。
インライン要素少ないんで。

次は実際の現場で使うHTMLタグの一覧とその用途についてまとめます。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*