サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> HTMLタグリファレンス/Tips >> 要素をまとめる <DIV> <SPAN>

要素をまとめる <DIV> <SPAN>



<DIV>タグについて

<DIV>タグは複数のテキスト、画像、テーブルなどをまとめて設定したい場合に用いられます。
スタイルシートやJavaScriptを使用する時によく用いられるタグです。

属性 機能 記述例
align left
center
right
左揃えで表示する
中央揃えで表示する
右揃えで表示する
<HR align="left">
<HR align="center">
<HR align="right">


<SPAN>タグについて

特定の単語やフレーズなどにスタイルを適用するために用いられます。<DIV>タグと違い、こちらはインライン要素のみの対応になります。
<SPAN>タグは、HTMLタグとしては何の意味も持ちません。スタイルを変える時のみに使いましょう。


サンプル

要素をまとめる

以下よりDIVタグで右揃えにします

右揃えになっています

画像も右揃えになります

テーブルも 右揃えになります

右揃えを解除します

DIVタグでスタイルシートを使って文字を赤くします

文字を赤くしています

SPANタグでスタイルシートを使って一部の文字を文字を赤くします

文字をくしています



サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>要素をまとめる</H2>
<P>以下よりDIVタグで右揃えにします</P>
<DIV align="right">
<P>右揃えになっています</P>
<IMG src="img/img1.jpg" width="160" height="120" border="0">
<P>画像も右揃えになります</P>
<TABLE border="1" width="90%">
<TR>
<TD>テーブルも</TD>
<TD>右揃えになります</TD>
</TR>
</TABLE>
</DIV>
<P>右揃えを解除します</P>
<P>DIVタグでスタイルシートを使って文字を赤くします</P>
<DIV style="color: red;">
<P>文字を赤くしています</P>
</DIV>
<P>SPANタグでスタイルシートを使って一部の文字を文字を赤くします</P>
<P>文字を<SPAN style="color: red;"></SPAN>くしています</P>


解説・注意点など

<DIV>タグでalign属性を用いることは推奨されていないようです。スタイルシートを用いた方がいいかもしれません。


 
 

HTMLタグリファレンス/Tipsに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, HTML Tag Reference Samples Tips. All rights reserved. - Home