富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. HTML
  3. ブログ

第1章 コーダー初心者【必見】一人前になるコーディングテクニック~ブロック要素とインライン要素~

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

皆様こんにちは!
新卒1年目が専門学校でDreamWeaverの便利機能に甘えてきたのを改めまして、コーディングの練習・勉強を始めました。
同級生でも諦める人が多かったweb分野ですが、分かれば楽しくなる!…はず。
ということでこれから私がコーディングで得たものをここにまとめていこうと思います。

要素とはなんぞや?というところから始まり…覚えることはたくさん!
世に出ているオフィシャルサイトを制作(コーディング)できるようになるまでの過程を初心者なりにご紹介します。

今回はブロック要素とインライン要素ってなに?というところから。(実際私も理解していなかった)
これを知っていれば、テキストや画像が縦に並ばない!横に並ばない!なんて問題はほぼ解決したも同然です!(経験者は語る)

  1. ブロック要素って?
  2. インライン要素って?
  3. 使い方・ルールは?
  4. まとめ

 

1.ブロック要素って?

 

見出しや段落・表など1つのブロックとして扱われるものをいいます。
私のイメージとしては箱が改行されて下へ増えていく感じ(伝わらない)

主なブロック要素
p,h1,h2,h3,h4,h5,h6,ul,ol,li,div,center,blockquote,form,hr,tableなどなど
検索したらまだ出てきます…。

ブロック要素のイメージ

 

2.インライン要素って?

 

ブロック要素の内容として使われます。文章の一部という扱いになります。
テキストの一部を強調したい、色を変えたいなどの場合によく使われます。
私のイメージは要素が左寄せで溜まっていくイメージ(伝わらない)

主なインライン要素
a,font,i,img,input,kbd,label,small,spanなどなど

 

インライン要素のイメージ

 

3.使い方/ルールは?

 

ブロック要素の中にはブロック要素のタグを入れることができますが、
インライン要素の中にブロック要素のタグを入れることはできません。

ですから

<div>あいうえお<font size=”12″>リンク</font></div>

はできても、

<span>あいう<div>えお</div><span>

という形はダメなのです。(残念!)

ブロック要素の中にスタイルの付け足しやリンクの追加として
インライン要素のタグを入れるという感じで覚えています。

 

4.最後に

私なりのまとめ方で結構雑になっている部分がありますが、いかがでしたでしょうか?
かなり初歩的なところでしたが、調べるとまだまだ知らないことがたくさんありました。
私自身ブロック要素とインライン要素の違いなんてやってこなかったですし、
いまだにあやふやな部分もありますが、よく使うタグはどういうものかを理解しておくことは大切だと思います。
ブロック要素とインライン要素を使い分けて、効率のよいコーディング技術を身につけていきたいです!

次回は<div>などを使ってボックスを作ってみたいと思います。

この記事を書いたスタッフ