スポンサーサイト

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

GooBlogへ投稿の <div>タグ<span>たぐ使い分け

divタグとspanタグをブログに投稿するときに使うと便利なときがある。それはインラインスタイルシートを記述するときのタグとしてシンプルに使えると思います。HTMLの古い記述方法では文字の変更は fontタグでやっていたが、スタイルシートで記述すると細かな設定が可能です。

詳しいスタイルシートの説明は、検索エンジンでスタイルシートで検索すれば具体的な用法を記したサイトがたくさんあるので少しずつ遣いながら勉強していくともっと表現豊かなWEBページが作成できるようになると思います。


それでは実際に「どんぐりと山猫」という文字を記述する場合、文字の大きさを60ポイントに色を赤に背景色を黄にするときには、spanタグとdivタグでそれぞれスタイルシートを指定したときの違いを下に示します。改行幅は、ブログのスタイルシートであらかじめ指定されていますので、ここの例では一律では80ピクセルと一時的に変更します。line-height: 80px; の部分がそれです。

<span style="font-size:60px;color:red;background-color:yellow;line-height: 80px;"> どんぐりと山猫 </span> では

 どんぐりと山猫 

となる。

<div style="font-size:60px;color:red;background-color:yellow;line-height: 80px;"> どんぐりと山猫 </div> では
 どんぐりと山猫 


となる。つまりspanタグは指定した部分だけにスタイルシートが適用され、divタグでは一行文スタイルが指定されるわけだ。

たとえばテーブルの中にスタイルシートを適用する場合などで改行が入ったら体裁が崩れそうなときには、divタグでなくspanタグを使ったほうがいいようだ。
また、タイトルなど、一行すべてに適用したいときには、divタグを適用したほうがいいときが多い。


その他さまざまなスタイルを上記の要領で文中に適用できるので、スタイルシートについてのサイトを参照してさまざまな装飾を試みると面白いと思います。
適用の仕方は、上記のとおり、style=""の""のなかに、スタイル名:スタイル属性;という形で連続して書き込むことができる。

下の例は、連続してスタイルを指定した例です。
<span style="font-size: 50px;color:red;background-color: #FFFF66;padding: 10px;float: right; width: 400px;border: 20px inset #88dd66;line-height: 80px;">どんぐりと山猫</span>


どんぐりと山猫



コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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