グループ化 【<div>タグ】:HTML入門

ブログが作りたい!HTML入門 > グループ化 【<div>タグ】:HTML入門

グループ化 【<div>タグ】:HTML入門

グループ化 【<div>タグ】:HTML入門

HTML入門(9)

今回は、各タグをグループ化する<div>タグです。

<div>タグは、今までお話してきたタグとは、ちょっと違うので、分かり難いかもしれません。

しかーし、CSSにて必須となるタグなので、がっちり慣れておきましょう。お話は、次の順番で進みます。

▲ページの先頭に戻る

グループ化するタグ(<div>タグ)とは?

1:<div>タグの基本形

<div>タグは、グループ化するためのタグです。

<div>~</div>で囲むと、ひとつのグループとなります。

<div>~</div>

しかし、グループなどと言われても、ぴんと来ないのではないかしら。「へー、あ、そう・・・で?」と思うだけかもしれません。

そう、使い道が明確にならないと、なかなかイメージできるものではありません。もう少し読み進めてください。

▲ページの先頭に戻る

2:グループ化するタグ(<div>タグ)の属性

<div>タグでよく利用する属性は、次の2つです。(詳しくは、CSS入門にて記述します)

id

CSSなどで識別子として使います。一意である必要があります。

class

CSSなどでクラス名を付けるために使います。

そうなのです。世の中が、「<div>!<div>!<div>!<div>!」と騒がしいのは、CSSと大きく関係があるからです。

<div>タグがないと、CSSが使えないという意味ではありません。CSSを使う場合のひとつの方法ということです。

▲ページの先頭に戻る

本にたとえてイメージする

前述したように、<div>タグは、CSSと密接に関わっています。

グループ化するタグ(<div>タグ)

本にたとえて言うなら、次のような状況がイメージできます。

  • カラーページにする。(背景に色が付いている)
  • 読み手に印象づけるために、文章を罫線(けいせん)で囲んでおく。

などなど。

色を付ける領域、罫線で囲む領域などを、<div>~</div>で範囲指定するわけです。

くどいようですが、実際に色を付けたり、線を引くのは、CSSの役目です。<div>タグ自体は、領域を指定するだけです。

▲ページの先頭に戻る

実習 <div>タグ

<div>タグを使って、グループ化してみましょう。

(01)

例えば、次のような文章があるとします。(真実はいつもひとつ!!)

江戸川乱歩は、エドガー・アラン・ポーをもじって付けたんだ。

江戸川コナンは、江戸川乱歩とコナン・ドイルをくっつけたんだ。

HTMLコードは、次のようになります。

(02)

ブラウザで表示してみましょう。

ブラウザで表示

しかし、残念ながら、何か表示されるわけではありません。<div>タグは、無色透明のペンで囲ったようなものなのです。

(03)

これでは何も分からないので、CSSを設定して枠線で囲ってみます。

(04)

改めて、ブラウザで表示してみましょう。<div>タグで囲んだ領域が、枠線で分かるはずです。

改めて、ブラウザで表示

▲ページの先頭に戻る

<span>タグも覚えておこう

<div>タグと併せて覚えておきたいのが、<span>タグです。

どのようなときに使うかと言えば、文章にメリハリを付けたい場合などに利用します。

(01)

例えば、次の文章にメリハリを付けるために、文章中の文字の色を変更してみます。

江戸川乱歩は、エドガー・アラン・ポーをもじって付けたんだ。

江戸川コナンは、江戸川乱歩とコナン・ドイルをくっつけたんだ。

HTMLコードは、次のようにします。

(02)

ブラウザで表示してみましょう。文字の色と背景色を変更してあります。

ブラウザで表示

<div>タグと<span>タグは、何が違うのかと言えば、次のように区分することが出来ます。

<div>

ブロックレベルで使う

<span>

インラインで使う

ここに来て、「ブロックレベルで淫乱(インライン)だのインリン・オブ・ジョイトイさんだのと言われても、何のことやら・・・」と思うかもしれません、確かに。

出来るだけ専門用語を使わないようにしてきましたが、ブロックレベルとインラインという概念は、覚えておく方が良さそうです。

▲ページの先頭に戻る

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

HTMLタグには、ブロックレベルのものと、インラインのものがあるんだなぁ。

1:ブロックレベルとは?

ブロックレベルのタグは、ブロック(ひとつのかたまり)として扱われるHTMLタグのことを指して言います。

次のタグは、ブロックレベルとして扱われています。

address

blockquote

center

div

dl

fieldset

form

h1~h6

hr

menu

noframes

noscript

ol

p

pre

table

ul

   

もちろん、すべてのタグを覚える必要はありません。

カスタマイズするだけなら、赤文字にしてあるタグだけで十分です。他のタグは、必要に応じて覚えていってください。

▲ページの先頭に戻る

2:インラインとは?

インラインのタグは、ひとつの行の中の一部として扱われるHTMLタグのことを指して言います。

次のタグは、インラインとして扱われています。

a

abbr

acronym

applet

b

basefont

big

br

button

cite

code

em

font

i

iframe

img

input

kbd

label

map

object

q

s

samp

script

select

small

span

strike

strong

sub

sup

textarea

tt

u

var

赤文字のよく使うタグが、ブロックレベルに入るのか、インラインに入るのか、ざっくり眺めたら、解説をご覧ください。

▲ページの先頭に戻る

3:ブロックレベルとインラインの解説

ブロックレベルのタグと、インラインのタグを、ずらずらと並べられたところで、何のことだか分からないと思うので、解説いたします。

(1) <p>タグと<a>タグで考えてみる

例えば、文章を書く場合、<p>タグを使って、次のようなHTMLコードを書きます。ちなみに、<p>タグは、ブロックレベルです。

<p>FC2ブログを、利用しています。</p>

さて、リンクを張りたい(<a>タグ)場合は、どうしたでしょうか。ちなみに、<a>タグは、インラインです。

<p><a href="http://blog.fc2.com/">FC2ブログを、利用しています。</a></p>

えぇ、そうです。<a>~</a>を<p>~</p>の内側に書いたはずです。

内側!そう、内側なのです!間違っても、インラインのタグで、ブロックレベルのタグを囲んだりはしないのです。

いかがでしょうか、じんわりと分かってきたのではないかしら。

▲ページの先頭に戻る

(2) もう少し考えてみる

例えば、次のように「FC2ブログ」の箇所にだけリンクを張りたいときのことを考えてみてください。

<p><a href="http://blog.fc2.com/">FC2ブログ</a>を、利用しています。</p>

この状況で、<p>タグの外から、「FC2ブログ」の箇所だけにリンクを張ることが出来るでしょうか?そう、出来やしないのです。

もしどちらが内側だったかしら?というときは、この話を思い出してみてください。そのうち慣れれば、意識しなくとも、書けるようになります。

▲ページの先頭に戻る

次回予告

次回は、HTML入門まとめです。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/28 更新日:2008/05/12

« 「箇条書き 【<ul>タグ】」|「HTML入門まとめ」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんばんは!

kumacrowさんこんばんは!
すごく解り易いです!
こちらで再、再、再勉強させてもらってます(^^;)

向学心

ichimarugo-いちまるごさん、こんにちは。
お忙しいところ恐れ入ります。

分かりやすいと言っていただけると、ホッとします。

再、再、再・・・ですか???

やはり、デザイナー志望の人は、
ソースコードまで気が回らないよね。(´ー`)

やることいっぱいあるものなぁ。

たしかに、Dreamweaverを使えば、
それほど、コードを意識する必要もないものねぇ。

それでも、覚えようだなんて、
ichimarugoさんは、向学心があるのだね!(・∀・)スゴイ

No title

kumacrowさん はじめまして。

ネットで独学しながらwebサイトを作っている者です。
HTMLの方はおざなりなままCSSにこだわっていたので、なんとなく落ち着かない気分だったんです^^;

こちらのサイトにたどり着いたのを機会にきっちりお勉強させていただきますね。
丁寧にわかりやすく説明されているので感謝感謝です!!

これからもお世話になると思いますので、どうぞ宜しくお願いします。

Webクリエーター

猫さん、はじめまして。
コメントありがとうございます。

CSSから入るだなんて、ツワモノですね!(・∀・)

猫さんは、Webクリエーターなんすか。
あるいは、目指しているところなのかしらん。

いろいろと楽しい感じで、意見交換できたら嬉しいです。

CSSなど、もろもろお気付きの点があれば、
ご指摘ご指導いただきたいッス。

猫さんが作ったサイトも見てみたいなぁ。(´ー`)

こちらこそ宜しくお願い致します。

No title

実際学校へ行ってましたが忘れてます。FC2にてすでに徐々に作ってますが非常に理解できます。ハグしたいくらいわかる!学校のインストラクターよりわかりやすいっす
感謝 感謝!?(’:’)?いずれはデザイン性のあるものにしたい

かっこいいデザイン

もんじゃさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

こんなおっさんで良ければ、
どんどんハグしていただいて構いませんが・・・。(´Д`;)

理解のためのお役に立てたようで、
何よりでございます。(´▽`)♪らーらーらー

かっこいいデザインのブログになると良いですね。

こんばんは。

本当に申し訳ないのですが、どうしても分からないので質問させて下さい。

現在自分のブログに配置しているソーシャルブックマークボタンと
Flashブログパーツ(Web拍手)を「同一列に横並び」にしたいと思い、
<div style="float:left;">~</div>等試したのですが、全然思い通りにならず
困っています(。´-д-)

素人なりに色々とやってみたのですが、どうしても出来ないので、
もし可能であれば、どの様に記述すれば良いか教えて頂けませんでしょうか?

同一列で横並び

まっこりーにさん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

次のようにしていただくと、
「同一列で横並び」にはできるかと思います。

ただ、残念ながら、
あまり現状と見た目は変わらないかもしれません。


1:
ソーシャルブックマークの方のdivを、次のように変更します。

+----+----+----+----+----+----+----+----+----+----+
<div class="addthis_toolbox addthis_default_style">
+----+----+----+----+----+----+----+----+----+----+
 ↓
+----+----+----+----+----+----+----+----+----+----+
<div class="addthis_toolbox addthis_default_style sbm">
+----+----+----+----+----+----+----+----+----+----+


2:
拍手の方のdivを、次のように変更します。

+----+----+----+----+----+----+----+----+----+----+
<div style="text-align: right;">
+----+----+----+----+----+----+----+----+----+----+
 ↓
+----+----+----+----+----+----+----+----+----+----+
<div class="clap_ritsu">
+----+----+----+----+----+----+----+----+----+----+


3:

CSSファイルの方へ、次のような指定を追加します。

+----+----+----+----+----+----+----+----+----+----+
.sbm {
width: 65%;
float: left;
}
.clap_ritsu {
width: 34%;
float: right;
}
+----+----+----+----+----+----+----+----+----+----+

さらに、「.theme」って指定がすでにあると思うので、
そこへ「clear: both;」を追加書きします。

+----+----+----+----+----+----+----+----+----+----+
.theme { clear: both; }
+----+----+----+----+----+----+----+----+----+----+


以上、お使いになっているテンプレートが分からないので、
ブラウザのチェックはできておりませぬ。

回答ありがとうございます。

使っているテンプレートはgrey_3columnです。(情報不足ですみませんでした)
おかげ様で同一行に揃えることは出来ましたが、
クマクロさんが懸念されてたのはこうゆう事だったんですね・・・w
仰るとおり、ほぼ変わりませんでした。

今の方法だとソーシャルボタンとWeb拍手が上のライン(上底)で揃ってますが
これを下のライン(下底)で揃えると、たぶん関連記事か記事本文にウェブ拍手が
かぶりますよね?

結局高さの違うパーツを揃えても背の高い方に必要なスペースがいるから
基本的に「揃える」と言う発想が無謀だったんでしょうね・・・・(。´-д-)

教えて君な質問に答えて頂き本当にありがとうございました。
一行分だけでもコンパクトになったので、助かりました。

お疲れさまでした!

まっこりーにさん、こんちあ!( ・∀・)ノぐもに
コメントありがとうございます。

そうですよねー。

「Share」って書いてあるところで改行して、
アイコン群を二行目にしてもいいかも。

あるいは、拍手みたいに、
何かかわいらしいイラストを加えるとか。

お疲れサマンサタバサ。ヾ(*´∀`*)ノ

No title

いーんろいろなサイトを見て回りましたがここが一番わかりやすい!!
いや、わかり安過ぎ!
人への教え方の基本をわかっていらっしゃる。

説明→実例→読み手の気持ちになった疑問文→実例。
すばらしい!
さすがに広告に「伝わる文章を書くコツ」←こんなものが乗ってるわけだw

最初からここで勉強しておけば良かった^^

No title

ここのサイトは可愛いし対話形式ですごく読みやすいです。
勉強になります。ありがとうございました。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/248-0bd163cf
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて