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




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


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

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

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


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

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



この記事へのコメント

こんにちわww

ちょっといろいろと参考にする為、
訪問させてもらいましたww

他のサイトを見ると、すごく良く見えてきますね。
いいものですww。

いろいろと参考にさせてもらいますww



では、応援ポチっ!!ポチっ!!

応援しました^^


アクセスマニア
http://www.domain-seo.net/
Posted by アクセスマニア@Domain-Seo アクセスマニア at 2010年07月07日 15:40
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

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

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