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
……人気ブログランキング……



この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/152765400
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

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