TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年06月18日

文章の段組み(1):float

■ 5-24 floatによる段組み

ブログの1カラムや2カラムのように、記事表示領域が大きいフレームで、ページ幅一杯を使って、文章を表示することは、一行に入る文字数が多すぎて、読み難くなることがありますね。

記事が「読み難い」と言うことは、訪問した方に読んでもらえないということも考えられます。

ブログは、内容は勿論のことレイアウトや文章の組み方も重要です。

「記事を読みやすく」する

考え方には

●内容を区切り「グループ化」する。
●「段落」や「箇条書き」を活用して視覚的に表現する。

などが有りますね。

また
●表示域の横幅を区分けして文章を短く改行する「段組み」もよく使われています。

段組みには
上下の段落、左右の段落がありますが、
ブログのような横書き(表示)では、左右の段組みのことを指します。

左右の段組みには、
読者の視線の移動を少なくして、長い文章を読みやすくすることと、読みやすいイメージを与える効果があります。

【段組みの方法】

この利爺のブログは、3カラムの列(フレーム)構成になっています。
中央の記事表示域が、左右400pxの幅です。

幅が400pxくらいの領域でしたら、記事をベタで表示しても、一行がそれほど長いとは思われませんので、本来は段を組む必要はないです。

HTMLの<float>を段組に使う方法を確認していきますので
1カラムまたは2カラム構成のブログを作成している方は参考にしてください。

【例1】
■ 文章のベタ入力・表示


中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


記事表示域一杯の領域に、文章をベタ入力した例です。
ブログ表示領域一杯使って、文章を表示しているブログをよく見ますね。

左右のギリギリまで文章を表示していると、読み難い感じがしますので、「例1」を文章を読みやすくする方法のひとつの「段組」で組み直して見ましょう。


段組みの方法には

●CSSプロパティの<float>を使う方法と
●<table>タグを使う方法があります。




………

■ <float>での段組み

  float(フロート:浮動)=(浮く、漂う)は、浮動を行うプロパティ。

文章や画像、ボックスなどの要素を、左または右に配置(浮動)して、次の要素は値の指定した位置から配置します。いわゆる「回り込み」です。

<float>
<div style="float:left;width:●%;">

@left
Aright
Bnone
=要素の左揃え、続く内容は右に回り込み。
=要素の右揃え、続く内容は左に回り込み。
=回り込みしない(初期値)。

の「値」を取ります。

さらに<width:20%;>width属性と属性値で<float>の範囲を決めます。(下記)


【例2】
■ 段組みでの表示


中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒
的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。



段組みでの表示は、文章に「まとまり」を作ります。

行の文字数が少なく読者の目線の移動を小さくして
文章を読みやすくする効果とそのイメージを与える特徴があります。

表示域のサイズが大きくなるに従って、段組みにする方が読みやすくなります。


【例2】の段組みのHTMLは

<div style="float:left;width:●%;">=左揃えですので
● 左への浮動(文章@)
</div>
● 右への回り込み(文章A)
<br clear="all">

のHTML要素の形式を使います。

1) 左に浮動する(HTML)
  <float:left;width:●%;>
   <float:left;>  = 左側に浮動(float)する。
   <width:●%;>  = 浮動域の幅の指定。

   ※ 左ヘリから●%の位置(幅)までが浮動域です。
   ※ 記事表示領域の左右サイズの内、何%を<float>の領域にする
     かを決めます。

  ● 浮動域のサイズは <px・pt> などの絶対サイズ
    <em・%> などの相対サイズでの指定でもかまいません。
    
  ● サンプル例では「%」を使用しています。

2) <float>が作用はする文章は </div> で閉めた位置までですので
   左に入れる「文章@」の終わりを</div>で閉めます。
   (<float>を閉める意味です)
 
3) 右の段組みに回り込む「文章A」は通常の文章の流れですので
   そのまま記入します。

4) 最後に「文章A」の文末に「回り込みの解除」タグ
   <br clear="all">
  を挿入します。

5) 回り込みを解除しないと、段組みに関係ない別の文章も、回り込むことがあります。
   ※回り込みを解除するタグは

   ●<br clear="left">     ●<br clear="right">
   ●<br clear="both">   ●<br clear="all">

   の形式があります。


【例3】
■ <float>での文章段組を確認。


HTMLに文章を書き込み、<float>で段組みにする。


【HTMLの形式】
<div style="float:left;width:48%;">中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒
</div>的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。<br clear="all"></div>

「文章@」= 中国の 〜 圧倒 
「文章A」= 的な人  〜 ドラマである。の段組みの形式です。

 ↓
【例3の表示】

中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒
的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。



HTMLに文章を書き込み、<float>で段組みにしたのが
【例3の表示】です。

<float>の機能で文章は左と右に段組みしましたが、
左の「文章@」の行末と、右の「文章A」の行頭が接触して空き(段間)の無いまま表示されています。

<float>は対象とする要素を浮動しますが、回り込んだ要素に対してスペースを作りませんので、例のように回り込んだ文章の行頭がくっつく現象になります。


【例3の修正】
■ 浮動した段落と回り込み段落の間に余白を設定。

●余白を取るタグ<margin>で両段落の間に余白を取ります。

●<margin>の基点は、浮動した「float:left;width:46%;」の位置、
 つまり文章@の行末からです。

●<margin-right:●px;>
 基点から右の段落の行頭までの余白のサイズの指定です。
 (段間と言いますね)

  ※ 段間は使用文字の大きさの1〜2倍の大きさが理想的です。
  ※ このブログの文字サイズは「12px」での使用ですので、
    等倍の12pxの余白を設定します。<margin-right:12px;"

  ↓

【例3の修正後表示】
<margin属性を追加>


【修正HTML】
<div style="float:left;width:46%;margin-right:12px;"> 文章@ </div> 文章A <br clear="all"></div>

<width:46% ; ">の後ろの「 ; 」と「 " 」の間に
右側に1文字分の余白を空ける、<margin-right:12px ; >タグを追加記入します。
「 ; 」の記入忘れがないようにしましょう。

  ↓ 
【表示】

中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒
的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。



文章@とAの間に余白が取られていますね。

雑誌や新聞の「段間」と同じ表示になっていて、文章の段落が明確に分かります。
出版業界では、文章と文章(画像と文章)がくっ付いて表示されることはタブーになっています。

使い方に慣れて、読者に読みやすい表示に勤めましょう。

………

<float>での画像と文章の段組み

過去記事で<margin>と<padding>を使って
「画像と文章の組み合わせ」を確認しましたね。

参照 
画像と文章の組み合わせ
●5-12 画像と文章を組み合わせる =「例6」
http://tosiji-dreamafi.seesaa.net/article/136498096.html



【例4】
■ 画像の右に文章の回り込み(padding)の使用



中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


【HTMLの形式】
<div style="float:left;width:88px;padding:0px 12px 60px 12px;"><img src=" 画像url " alt="" width="88" height="31" border="0" /></div>中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。<br clear="all">


この例は過去記事の
「画像と文章を組み合わせる」(例6)の確認のとき、タグの使用方法が異なるので、確認をしていなかった事例です。

【例4】のように
画像の使用範囲を過ぎても、回り込んだ文章を画像の下段に戻さずに、指定された位置に行頭を揃えて(頭揃い)表示する方法です。

<float>を使用して、左の画像を浮動させ、右に文章を回り込み表示しています。


【HTMLの要点】

<float>は
<div style="float:left;width:88px; padding: 0px 12px 60px 12px;">
の形式で使用しています。

● <float:left;>で左に浮動して画像を表示する段落の横サイズは
  使用する画像の横と同じ「88px;」サイズにしています。
 
● 画像サイズは「width="88px" height="31px"」の大きさです。
  余白を作る<padding>属性で、画像から左右に1文字分(12px)の
  余白を設定してす。

● 文書の段組で使用した<margin>は使用していません。

● 画像の下段に<float>領域サイズを外れた文章が戻って表示されない
  ように
  ※ <padding>の下方向のサイズを
    行の高さから計算して「60px」の余白部分を設定しています。


  ※ 画像の上下サイズと下に取った余白部分も浮動領域に入りますので
    文章は領域内には表示されません。

【注意すべき点】

● 記事表示領域の横サイズに注意する。
  ※ 画像の横サイズ
  ※ <padding(margin)>で取った左右の余白サイズ
  ※ 文章ブロックのサイズ
  ▲ 横サイズの合計が、ブログの記事の表示領域の大きさを
    超えないようする。

● 横サイズの合計が表示領域のサイズより大きいと
 ブログのサイドが記事の下方に追い出されます。(カラム落ち)

● ブログの表示サイズは、CSSに定義されています。
  確認しておきましょう。

CSSで記事表示域のサイズを、仮に左右「800px」として定義していても、そのサイズ内に飾り罫を引いたり、余白を設けていますので、実質100%の領域は使えません。

この点にも注意しましょう。

このブログの例でみると
3カラム設定で、記事領域は「400px」になっていますが、使用できる左右サイズは「362px」くらいです。

絶対サイズを使うときには
以上の件にも気を付けて「float(浮動)プロパティ」を使いましょう。

<float>は回り込みの特性を生かし「文章と文章」「画像と文章」
「画像同士」の段組の作成にも応用ができます。

使い方をいろいろ試してみましょう。

<float>はCSSプロパティですので、CSSに定義して使う方が簡便で使い方の多様性に富みます。

CSSのシリーズの段階で形式を確認します。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



2010年06月11日

marginとpadding・応用(3)

■ 5-23 文字や文章の表示位置


一般的には文字の表示(開始)位置は

<left>利爺です</left>
<div align="right">利爺です</div>
<div style="text-align:center;">利爺です</div>

などのタグの属性・属性値の形式を取りますね。

参照 


表示位置の指定が
■「left」
■「right」
■「center」
とシンプルになっていますが、大雑把なタグだと思うことが多いですね。

T <margin><padding>を使った文章の表示位置の指定

<margin>や<padding>は本来は、CSS定義のプロパティです。
そのプロパティを使用して、直接に記事入力をして見ましょう。

ブログ内の自由な位置
思い通りの箇所から、文字・文章や画像の表示させる使い方を確認します。

【タグの使用例】

@「絶対サイズ」での指定
<div style="margin-left:36px;">文章</div> ←(pxを使用)

A「相対サイズ」での指定
<div style="padding-left:3em;">文章</div> ←(倍数を使用)

表示の開始位置は「絶対サイズ」「相対サイズ」のどの指定方法でも構いません。
「相対サイズ」の倍率は、CSS定義の「フォント」のサイズを基準としています。

【<margin>での表示位置指定の例】

文章(記事)の表示領域の左端から2字(24px)余白を取ります。
<div style="margin-left:24px;">文章</div>
  ↓
【表示例】

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


【<padding>での表示位置指定の例】

同じように、左端から2字(24px)余白を取ります。
<div style="padding-left:24px;">文章</div>
   ↓
【表示例】

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


上記の2例は全く同じ表示に見えます。

<margin><padding>も
同じように余白を取るタグですが、その取り方が異なりますね。

余白の取り方は
前回の記事でも取り上げていますので、まだうまく掴んでない方は、もう一度確認しましょう。

余白の取り方は必ず覚えて下さい。

両タグの余白の取り方の組み合わせで、

■文章を罫で囲む。
■囲み罫の中で段組を組む。
■箇条書きのように表示する。(箇条書きタグは別に有ります)
■文章、見出しや中見出しを強調する。
■記事の全体、一部のバックに色をのせる。

など、多様な応用ができます。


【上下左右を指定してみる】

<div style="margin:12px 24px 12px 24px;">文章</div>
または
<div style="padding:12px 24px 12px 24px;">文章</div>
   ↓
【表示例】

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。

上下左右の余白
文頭は2字分空き、文末も2字、上下には各々1字分の空きを設定しました。

文章が左右の表示領域から中央寄りに纏まりましたね。


<margin><padding>の利点は

●思うどおりの位置、自由な位置から文字や文章の表示が可能。
●細かい単位での位置指定ができる。
●余白の大きさが明確なので、半角や全角を入り乱れて使っていても
 文や行の頭を揃える。
●行が変わっても、各行頭は指定された位置から表示する。
●文中に改行<br>タグを使用することで、囲み罫のような文の纏まり
 (段落)にすることも可能。

などと結構いろいろな表示に応用できることで、ブログのレイアウトや文字入力での自由度が高いです。

読みやすくするため、文章には改行が必要ですね。
改行の無い文章はいくら素晴らしい内容であっても、読みにくく疲れを感じます。

同じように、余白も必要です。
どの部分、どの範囲が重要な箇所なのかを余白でもって示している書き方は、分かり易い文章と言えます。

■余白が多いものはスッキリとした上品なイメージ。
■余白の少ないものは、情報量の多いビジネスライク。
とよく言われていますが

■ページのメリハリにも役立ち、訪問した方の目を引きとめる役割。
■テキストや段落の間に、余白があると読みやすい。
■グループ化していることも伝えることができる。
などの効果を発揮します。

余白の使い方はブログの視認性にとっても重要ですね。
その重要な余白を設定していくHTMLが<margin><padding>の要素です。

いくら余白が重要だとしても
ページ全体のレイアウトを崩すような取り方は、逆にイメージを下げることになりますので、バランスを常に考えているべきです。


【indentでの頭下げ】

<margin><padding>と似た性質のタグに<indent>が有ります。
<indent> = (indentation)は主にCSS対応で、1行目の字下げを設定するタグになります。

【使用例】

<div style="text-indent:24px;">●</indent>
 (文頭を2字下げにしています)
  ↓  
【表示例】

三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


文頭は2字下げましたが、
2行目以降は元の位置からの表示になっていますね。

この形式が<indent>です。

このインデントを設定しておけば、記事の入力で一つの段落が終わり改行すると、
次の段落の最初の行の字下げを気にすることなくベタ入力しても、字下げで表示されます。

●日本語入力ソフトでのインデントと同じ役目ですね。
●キーボードの「tab」とは性質が異なります。
 (「tab」はむしろmarginやpaddingと同じ性質です)

※文章には段落の字下げの原則がありますが、
ブログのように箇条書きに近い表記方法でしたら、無理に下げることも無いでしょう。


<margin><padding>は、使い方さえ分かればわりと融通のきくタグです。

ブログを更新しているうちに使う機会も増えてきますので、活用すべきです。


………

U CSSに簡単なテーブル表を作成

CSSに簡単なテーブルのセレクタを定義して
<margin><padding>で余白を決め、随時使用する表を作成して見ましょう。

このブログでもよく使っていますが

ポイントとなる文章の一部を
囲み罫の中や表の中に表示して強調したり
バックに色のせをしてビジュアル化する方法をとっています。

その囲み罫や表を作成するため
タグを毎回入力して仕上げることは時間もかかりますし、重要なタグを書き忘れてエラーになったりすることもあります。

比較的に多く使用する囲み罫や表は

そのフォーム、
書体の形状・大きさ、罫の太さや色、余白のサイズなどを

まとめてCSSに定義しておけば
新しく囲み罫や表を作るたびに、タグを書き込まなくて済むようになりますね。

必要に応じて呼び出して使う
のが便利で効率的なCSSの使い方の特徴でもあります。

決められたフォームを使うことで
ブログのページに統一性をもたすことにもなり、デザイン的にも安定したブログを作り上げることが出来ます。


■ 表(専用テーブル)を作るクラスをCSSに定義する。

table全体のセレクタ(クラス名)を「.texttable」
データ表示のボックスを「.texttable td」します。


CSS

.texttable {
font-size:12px;
line-height:1.5em;
font-weight:normal;
margin:0px 12px 0px 12px;
}

.texttable td {
text-align:left;
padding:12px;
border:1px solid;
background-color:#f0f8ff;
}




⇒クラス名
⇒文字のサイズ
⇒行の高さ
⇒文字の太さ
⇒表示領域からの余白
⇒クラス閉め

⇒tdのクラス名
⇒記事の表示位置
⇒記事からの箱の余白
⇒罫線の種類
⇒バックの色
⇒tdクラス閉め


CSS「class」対応のセレクタを定義しました。
このCSSには囲み罫用の表の作成用として、

「table」
「td」

二つのセレクタしか記入してないですね。

簡単な表を作るための設定ですから
「th」(見出し)のような必要のないセレクタは省略しています。

上記のCSSには

●使用する書体の形状・大きさ・行送り
●表示領域内へのテーブルの表示位置 (marginの余白)
●テーブル内の文章と箱の各ヘリの余白 (paddingの空き)
●使用する罫線、罫線の太さ、色
●テーブル内のバックの色

を定義していますので、使用するときは
<td>と</td>
の間に、文章を挟みこむだけ

【記入例】

【HTML】

<div class="texttable">
 <table>
  <tr>
   <td>文章</td>
  </tr>
 </table>
</div>

…………

【実際のHTMLの表記】

<div class="texttable"><table><tr><td>文章</td></tr></table></div>

   注)テーブルを作るときに必要な<tr>は忘れないように。


のシンプルなタグの記入です。

ここで注意すべきことは、
例の下段(実際のHTMLの表記)ようにタグを改行無しで記入することです。

改行無しにする理由は下記を参照しましょう。



tableと<margin><padding>で作成した囲み罫に、サンプルの文章を挿入して表示してみます。

【表示】
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。


この罫囲みの表は
挿入する文章が長くなれば、自動的に上下幅を広げて表示します。

CSSに定義しているセレクタは
いつでも、どこににでも使えますので、統一した形の表示には非常に便利です。

タグ類は何度使っても忘れるものですが、
HTMLでCSSに適用してクラスを呼び出せば、新たにタグを書く手間が省けますね。

見栄えを管理しているCSSには得意とする分野です。

次回は「段組」について確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



2010年06月08日

marginとpadding・応用(2)

■ 5-22 余白の考え方


■ <padding>を理解しよう。

<margin>は外側から余白を取るのに対して
<padding>は内側に余白を取るプロパティですね。

余白の基点は<margin>とは逆に文字・文章・画像などの領域からになります。

<margin>と<padding>の余白の取り方の例を再度、確認して見ましょう。

前回の記事で確認した
<div style="margin(padding) :●px ●px ●px ●px;">
のタグの記入順を覚えていますね。

左の●pxから上・右・下・左の時計回り順の属性値ですね。


【例1】<margin>の余白の取り方。

<margin>の余白の取り方の確認のため、文字の領域部分を青色の破線で囲みます。

<div style="margin: 0px 0px 0px 24px;border:1px dotted;border-color:blue;">記事の位置</div>
  ↓

記事の位置


青破線で囲んだ部分が、記事の表示領域になります。
その左側には、領域に含まない余白が有りますが、<margin>によって左のヘリから取られた余白部分(24px)ですので、記事が表示されることの無いエリアです。


【例2】:<padding>の余白の取り方。

<padding>の余白の取り方の確認のため、文字の領域部分を赤色の破線で囲みます。

<div style="padding: 0px 0px 0px 24px;border:1px dotted;border-color:blue;">記事の位置<div>
  ↓

記事の位置


赤破線で囲んだ部分が、記事の表示領域になります。
ブログの表示域の左のヘリから、赤破線で囲んだ領域の間には余白は無いですね。
赤破線内の文頭(記事の位置)に有る余白は<padding>によって、左のヘリに向かって取られた余白部分(24px)です。

例【1】【2】から分かるように、余白の取り方では

●<margin> は要素(文字:記事の位置)の外側。
●<paddinng> では要素(文字:記事の位置)と同じ領域内。

青や赤の破線を表示しなければ
文(記事の位置)は同じ位置に表示されますので、同じ余白のように見えますが
その取り方は異なります。

<margin>と<paddinng>の余白の取り方は確認できましたね。


【例3】:<margin>と<padding>の組み合わせ

【タグの例】
<div style="margin: 36px 0px 36px 0px;border:1px dotted;border-color:blue;"><div style="padding: 0px 0px 0px 12px;border:1px dotted;border-color:red;">

タグでは
<margin> の上と下の余白は、使用書体の2行分、破線の色は「青」
<padding> は左(文頭)に1文字分の余白(12px)を、線は「赤」に指定しています。

下記の表示を確認しましょう。
  ↓

<margin >の余白のとり方を確認するため、基点を「罫線囲み」で仮に表示します。

   注)ブログの記事中での上下の<margin>の基点は、直前の行からのサイズになります。
     このブログでは行の高さ(送り)は「18px」での定義ですので、2行は36pxです。


罫の中の文頭を24px(2文字分)空ける


<margin>での上下に2行(36px)分の余白と<padding>での左(文頭)の2文字(24px)分の空きが表示されましたね。

色の異なる罫は、重なって表示されています。
<margin>も<padding>も、対象が同じ要素(ここでは文章)であれば、同じ位置に罫をとります。

文字の表示位置は、<padding>が要素から外に向かって余白を取る性質のため、対象として向かうヘリは
<margin>が取った余白の部分の右のヘリになりますので、文字位置は

●<margin>の余白 + <padding>の余白の位置になります。
  
「領域の確認」
<div style="margin: ・・・・;"><div style="padding: ・・・・;">

と行に連続で記入する形と

<div style="margin: ・・・・;">
<div style="padding: ・・・・;">

のように別行で記入にすると、罫の囲みの範囲が変わります。

<div style="・">の
<div>要素はブロック要素として「見出し、段落など」を、ひとつのまとまった塊(単位)として見る要素で、 前後に改行が自動的に入って表示されます。

自動的に改行された、その行も範囲に含まれますので、罫線を引く位置が異なってきます。
<span>要素のようなインライン要素(改行を持たない)とは性質が異なります。

確認してみて下さい。

上記タグの表記では
<div style="〜;"><div style="〜;">と
<div style=>の<style>定義を2度使いましたが、同じ<style>指定なので、

<div style="margin: 〜;padding: 〜;border:1px solid;color:blue;">●</div>

のように、ひとつに纏める形式を覚えておきましょう。


以上の例を踏まえて「テンプレート風」の見出しを作ってみましょう。

【テンプレート風の見出し】

下の図は<margin>と<padding>で指定して
画像を使ったテンプレートの形をした、見出しを作ってみました。

【図】

最近の更新記事一覧

  ↓

タグの配置は

div style="margin:0px 24px 0px 24px; padding: 6px 0px 6px 0px;background-color:#e6e6fa; "><center>最近の更新記事一覧</center></div>


<margin>の位置

top(上から)
right(右から)
bottom(下から)
left(左から)

⇒ 0px
⇒ 24px
⇒ 0px
⇒ 24px

赤文字の
div style="margin:0px 24px 0px 24px; 
は<margin>の指定ですね。

例では「0px」の余白となっていますので、
このHTMLタグを入力した位置からの余白ですね。

つまり、
余白を空けないで、行送りとおりの位置からの表示です。

右と左の余白は仮想領域は設定されていませんので、
ブログの表示領域(本領域)からの余白で、各々「24px」の空きを指定しています。

青文字で表記したのが<padding>
padding: 6px 0px 6px 0px;

文字領域を上へ「6px」、下にも「6px」広げています。

<padding>の位置は

top(上へ)
right(右へ)
bottom(下に)
left(に)

⇒ 6px
⇒ 0px
⇒ 6px
⇒ 0px


タイトルの「最近の更新記事一覧」を中央の位置に表示します。

<center>最近の更新記事一覧</center>

とタグ<center>●</center>でくくります。

<padding>で右と左の余白を「0px」にしているのは

タイトルの「最近の更新記事一覧」の表示を真ん中にするために、中央を指定するタグ<center>を使っているので、

<padding>で指定してしまうと、二重に指定することになります。

エラーにはならないのですが<padding>の指定は余白無しにしています。


タイトルを左から表示したいときは、<center>タグは使わず

<div style="margin : 0px 24px 0px 24px ;padding : 0px 0px 0px ●px ; background-color:#cccccc ; ">最近の更新記事一覧</div>

<padding>の左余白の箇所(青●印)に空けたい値(単位)を設定します。

値で指定された余白を空け、左側からの表示になります。

このように<padding>で余白を設定し、表示サイズを変えることによって、ボックス型にもなります。
バックに色を使うことも可能ですし、囲み罫で強調したりすることができます。
利便性のあるタグですので、大いに活用しましょう。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html
    【別窓での表示です】

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。