IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

インライン要素とブロック要素の違い


インライン要素とブロック要素の違い
ブロック要素とインライン要素というものが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へ戻る●

COMMENT

Name
E-mail
URL
Comment
Pass  *
Secret? (管理者にだけ表示)

TRACK BACK

突然のトラックバック申し訳ありません。ムダ毛 処理情報を発信しています。宜しくお願い致します。
  • ムダ毛 処理
  • 2007.04.04(Wed)
ブロックやインライン、ボックスなどについてのごく簡単な説明です。これらのキーワードを把握しておくと、スタイルシートの理解が早まるかもしれませんよ。
  • ホームページ作成のテツガク
  • 2008.05.03(Sat)

Pickup Link!

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま~す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。