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




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


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

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

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


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

2009年12月21日

文章の表示位置

■ 5-9 文章の表示位置を指定する


ブログは文章を表示する位置がデザイン構成上では重要です。

ブログ記事の表示位置は
初期設定の段階で読みやすい配置にしているのが一般的ですが、

記事の中でも
とくに注意を引きたい箇所、あるいはポイントと考える「画像」類の位置も構成上では重要になってきます。

ブログに訪問した方は
無意識に全体的な構成、とくに記事と画像の配置のバランスを見て、好みのブログを判断します。

気に入るような構成であれば「留まって」記事を読んで行く、
視覚的に気に入らなければ「引き返す」行動をとっています。

統一性のあるデザインや視覚効果
それに基づいた配置はブログデザインでの重要度は高いのです。

今回は、ブログの全体像ではなく、
表示する文章や画像の表示位置関係のタグを確認してみましょう。

Seesaaブログの表示位置を設定するアイコンは
ki-ic01.jpg
                ueya.gif  ueya.gif  ueya.gif

 ic-le01.jpg 左揃え ic-ce01.jpg 中央揃え ic-ri01.jpg 右揃え

の三つのアイコンです。

このアイコンの形は、使用するタグが分かり易いアイコンですね。

【左揃え】

左揃えのタグでの表示
 @利爺です
 A利爺です  
 B利爺です


表示の @〜Bは左揃えタグを使った例です。

全て表示上は、左側から文章を開始した形になっていますが、
同じように見えてもタグは異なります。

使用しているタグは
@ = <left>利爺です</left>
A = <div align="left">利爺です</div>
B = <div style="text-align:left;">利爺です</div>
の3種類です。

@の<left>〜</left>タグは
左を意味する<left>タグで文章を括っただけの簡単な指示です。

Aの<div align="left">〜</div>タグは
HTMLの原型と言ってもいいタグです。

タグの中の<div>はそれ自身にはとくに意味はないですが
<div>〜</div>
で括った範囲を一つの纏まりとしてCSSを適用して属性(alignなど)で動作を指定します。

「align」は列に並べる、揃えるという意味です。

Bの例は
<div style="text-align:left;">〜</div>タグを使用しています。

Aと同じように使いますが、構造形が少し異なります。

Seesaaブログの左揃えのアイコンをクリックすると
このBの形式の<div style="text-align:left;">〜</div>タグで括られます。


現在のHTMLで推奨されている形式ですので、この構造形を覚えましょう。

HTMLのタグは
 <タグ名 属性 = "属性値" >テキスト</タグ名>
が基本形でしたね。



使い方の応用例

  <div style="text-align:left;">……</div>

    ↓

 <div style="img-align:center;">……</div>

赤文字で表示した属性の部分の「text」を「img」や他の属性に

青色で表示した属性値を「left・center・right」などに差し替えることで、
記事対応・画像対応あるいはフレームに対応など、別の意味になります。

基本形は同じですので、使い方(応用)をしっかり覚えましょう。

先の<div>のような使い方をするタグに<span>があります。
<div>はブロック要素で
<span>はインライン要素です。

ブロック要素は
見出しや段落などひとつのまとまった単位として表される要素で、
一般的には前後に改行(空白行)が入って表示されます。

インライン要素は「文章の一部」として利用される要素で
その前後に空白行は表示されません。

ブロック要素とインライン要素はHTMLの論理的構造では
重要ですが、使い慣れているうちに理解できてきますので、

ブログの記事(文章)の入力段階では、簡単に

「長い文章はブロック・短い語句などはインラン」

とでも覚えていて気にしないで使ってみて下さい。

「左揃え」のタグを3種を確認しました。

ブログでは、
記事や語句の入力の初期設定は「左揃え」になっています。
タグを用いてわざわざ設定しなくても、そのまま入力すれば「左揃え」の形式です。

@の<left>タグと
Aの<div align="left">タグは

現在では非推奨になっています。
いづれは両方のタグも使えなくなるようですので、


CSSに組み込んだBの
<div style="text-align:left;">〜</div>
の形式を使用する習慣をつけましょう。

【中央揃え】

中央揃えタグでの表示
●利爺です


文章の表示位置が中央になっていますね。

形式は
<div style="text-align:center;">〜</div>
のタグになります。

左揃えの例で述べたような
中央揃えに使える
<center>や<div align="center">のタグ
が有りますが非推奨になっています。

中央揃えで誤解していけないのは、文章の開始位置が中央からなのではなく
指定した文章や語句の真ん中を中央に配置して、その左右に文章を伸ばしていくことの意味です。

開始位置を中央からにしたければ、別のタグを使います。

【右揃え】

右揃えタグでの表示
●利爺です


文章の行末が右ラインに沿って並んでいますね。

左揃え、中央揃えのタグと同じ形式
<div style="text-align:right;">〜</div>
の使い方です。

右揃えに使えるタグ
<rightr>
<div align="right">
も非推奨でので<div style>形式を覚えましょう。

次回は、文章と一緒に使う画像の配置を確認します。



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

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

この記事へのコメント
いつも参考になります。

今回はこのごろ良くつかうようになった。
タグなのでよくわかりました。

ほかのほうも少しずつためしています。
次回も参考にしようとたのしみにしてます。
Posted by octagon at 2009年12月21日 13:08
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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