上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。

 前回は「<span>」と言うタグを使いました。
 今回は「<div>」と言うタグを使います。




「span」、「div」の違いは、「span」がインライン要素、「div」がブロック要素というものです。
 タグの書き方は前回同様で、「span」を「div」と置き換えるだけです。以下に、どのような違いが出るのか試してみましょう。


span例文

 ブロック要素とインライン要素の違いは<span style="border:2px solid #497;background:#cce;padding:10px;">こんな風に</span>違うのです。


 ブロック要素とインライン要素の違いはこんな風に違うのです。


div例文

 ブロック要素とインライン要素の違いは<div style="border:2px solid #497;background:#cce;padding:10px;">こんな風に</div>違うのです。


 ブロック要素とインライン要素の違いは
こんな風に
違うのです。


「span」の方は、文章中に普通に紛れ込みますが、「div」の方は、前後の文章を押しのけ、さらに横方向には端から端まで何かにぶつかるまで、スペースを占領します。
 これがブロック要素です。

 ブロック要素になると、前回のインライン要素の「span」の時より、1つスタイルシートで指定出来る命令文が増えます。
 それが、マージンです。


マージン(ボーダーの外側の余白、ボックスの外の余白)



4辺同時指定

margin:数値px;

例文

<div style="margin:10px;border:1px solid #000;">表示テスト</div>


表示テスト


 4辺ともに、等間隔の余白を開ける場合は、数値(px)をひとつだけ指定します。


「上下」同時、「左右」同時指定

margin:上下余白px 左右余白px;

例文

<div style="margin:10px 40px;border:1px solid #000;">表示テスト</div>


表示テスト


 上下を等間隔に〇〇px、左右を等間隔に〇〇px指定する場合は、半角スペースで区切り、数値を2つ入力します。


上下左右、別々に指定

margin:上px 右px 下px 左px;

例文

<div style="margin:0px 40px 20px 80px;border:1px solid #000;">表示テスト</div>


表示テスト


 4辺を別々に指定する場合は、「上余白」、「右余白」、「下余白」、「左余白」の順番に、半角スペースで区切って指定します。「時計回り上から」と覚えておくと便利。

「padding」が文字の周りの要素とすると、「margin」は、divブロックの周りの要素と言うことになります。
 つまり、前回の「span」要素にはブロックと言う物自体が存在しないので、「margin」指定しても、ブラウザ側は「なんだそれ?」といって(いるかどうか解りませんが)、冷たく無視されます。


実際に表示確認してみる(編集可)



■豆知識

 ブロック要素でパディングとマージン、似たような機能で、どのように使い分けるのか?

 一番わかり易いのが「ボーダー」(枠線)の内側か外側かの違いです。ボーダーを指定しないときは、マージン、パディング、どちらを使用しても同じような表示結果になります。
 では、どう違うのか。ポイントは「ボーダー」の他に「バックグランド」(背景色)を指定しているかどうかです。
 背景色は、パディングでの余白では塗りこまれ、マージンの余白では塗りこまれません。
…「ボーダー」も「バックグランド」も指定していなければ…どっちでも大丈夫です。

他の要素

margin

padding

テキスト・ボックスなどの、中身

border
  
他の要素
※イメージ図

 マージンとパディング、色々使っていると、色々不思議な行動を起こします。
 パディングは、指定の仕方次第では、外側のブロックをはみ出して表示されたり(左右はよく効きますが、上下がよくはみ出します)、マージンはある条件を満たすと、全く効かなかったり。
 IEでもFirefoxでもそうなる場合は、「そういう仕組み」と言うことだと思うので仕方がないですが、IEとFirefoxで様子が違うときは、Firefoxの「floatのバグ」などを疑ってみてください。



■次は、直接様々なタグに「スタイル指定」する方法です。つぎのページへはこちらから。
スタイルシートで遊ぶ part.3(いろんなタグ編)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Thu.03.18.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。