スポンサーサイト
インライン要素とブロック要素の違い
ブロック要素とインライン要素というものがHTMLの世界では存在します。
これはいろんなサイトに詳細が記述されていますが、一言で言えば
・ブロック要素とは、横幅いっぱいを使用したタグです。
つまり、このタグの前後には改行が入ります。
・インライン要素とは、文中という意味なので、そのままHTML文中に表示されるタグです。
つまり、このタグの前後には改行が入りません。
もっと細かい部分を知りたい方は、
kanzakiさんのページを参照してください。
かなりしっかり書かれています。
ここでは、そうゆう難しいのを抜きにして単純にどう使うのかを説明します。
では続きで。
そもそもブロック要素とインライン要素にはどのようなタグがあるのでしょうか？
以下のエリアを見てください。
こんな感じになっています。
●ブロック要素のタグ
address
blockquote
center
div
dl
fieldset
form
h1〜h6
hr
noframes
noscript
ol
p
pre
table
ul
●インライン要素のタグ
a
b
basefont
big
blink
br
cite
code
em
font
i
label
map
nobr
q
ruby
s
samp
small
span
strike
strong
sub
sup
tt
u
var
なんかいっぱいあるな〜と思いの方もいると思いますが、上記を全部覚える必要はありません。
基本的にHTMLを使ってWebページを作る場合に、ブロックだのインラインだのの知識必要になってくるのが
SPANタグとDIVタグです。
この2つのタグはラベルとして機能するのですが、かなりいろんなことも出来ちゃうのでいろいろ試してみてください。
とりあえずこの2つのタグの表示がどのようになるか見てみましょう。
以下にSPANタグとDIVタグの表示のされかたを出力しています。
一応分かりやすくするために、枠に色をつけてます。
インライン要素(SPAN)インライン要素(SPAN)
ブロック要素(DIV)
ブロック要素(DIV)
どうです？
SPANタグは改行されづに2個続けて表示されていて、DIVタグが横幅いっぱいにとられて、しかも改行までされちゃっています。
ちょっと面白いですね！笑
ブロック要素とインライン要素にはこのような違いがあります。
これ知っていることによって、「改行が勝手にされてる〜！」などの問題に直面する機会が減ると思うので是非覚えておいてください。
↓のボタンでこのブログの記事をランダムに表示します。
●Homeへ戻る●
最新の記事
-
・サイト移転しました。 (05/24)
・女性と男性が購入する携帯電話の色について (05/23)
・SQL文を貼り付ければ自動でフォーマットしてくれるツール (05/19)
・アルファブロガーのインタビュー映像（NHK） (05/10)
・StrustのActionと純粋にAjax通信をさせる方法 (05/07)
・今日の夕飯は… (05/07)
・Eclipseでデバッグ時にソースが見つからない場合の対処 (05/01)
・リンクで同じページの所定の位置にスクロールする方法 (04/14)
・Oracleでは空文字とnullが一緒？ (04/11)
・2つのテーブルのスクロール位置を動機する方法 (04/10)
・Excelで指定行にジャンプする方法 (04/10)
・インライン要素とブロック要素の違い (04/04)
・ブログで使うPing送信一覧 (04/04)
・がちゃがちゃエントリー 記事ランダム表示 for FC2 (04/03)
・font-familyの使い方 (03/30)
Pickup Link！
COUNTER
RSSの登録はこちらからどうぞ。
ブログ内の検索
カテゴリー
プロフィール
Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま〜す。
相互リンク募集しています。
下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ
アクセスランキング
ブログランキング
ブロとも申請フォーム
