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




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


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

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

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


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

2011年02月22日

箇条書きの基本(CSSの定義4)

■ 5-33 画像・アイコンの表示位置の調整(2)

前回までに

●箇条書きのマーカーの種類と表示。
●独自の画像を項目の前にマーカーの役割として表示。
●画像の表示位置を調整。

の方法を確認してきました。

参照 
 
前頁で
画像を表示するためにclassを定義したのが、下記のCSSでしたね。

【参照CSS:画像をマーカーにするためのclassの定義】

.samp9 ul{
list-style:none;
margin-left:0px;
padding-left:0px;

background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 36px;
padding:0px 0px 0px 24px;

}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア

⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

⇒左ヘリからの位置
⇒項目から画像への空き
⇒セレクタ閉め



上記のCSSの中で「赤文字」で記入している
marginとpadding
の役割にについては、まだ確認していませんね。

両プロパティの値を入れ変えながら見て行きましょう。

参照CSSの「class」の定義(青文字)では
list-style:none;
margin-left:0px;
padding-left:0px;
と定義して

●デフォルトで表示されるリストマーカーの非表示
●表示領域の左ヘリ(縁)からの位置
●項目と使用する画像の間の空き

をクリアしています。

このように、
デフォルトでの表示を全てクリアしていますので

リストマーカーの代わりに
使用する画像と箇条書きの項目を表示する位置(場所)を
新たにCSSに定義する必要があります。



画像のプロパティでは

@ background-image:url('url');
A background-repeat:no-repeat;
B background-position:left 15%;

@画像の呼び出し。
A表示の方法。
B位置。

を<background>で定義しています。

項目と仮想のリストマーカーとして使用する画像は
別個の存在ですので、新たに

項目の位置の定義が必要ですね。


項目の位置の定義には
<margin>
<padding>
のプロパティを使います。

【図1:marginとpadding】
bb.png
  ↑ 画像をクリック。元画像が開きます。

margin」は
記事表示領域、または指定された領域の上下左右の各ヘリからの位置の値を定義します。

左ヘリからの位置は

margin-left:●px;
または
margin:0px 0px 0px ●px;

どのプロパティの形式を使っても同じ意味になります。


padding
も位置を取るプロパティですね。

<margin>  = ヘリからの距離であるのに対して
<padding> = テキストの表示領域からヘリに対する距離になります。

このように<marin>と<padding>は
同じ位置を取るプロパティでも、その取り方と意味が異なります。

単位も、「px、pt」などの絶対サイズ、「em、%」のような相対サイズ
のどれを使用しても構いません。

箇条書きで
仮想のマーカーとして画像を使う時の<padding>の距離の対象は「画像」になります。

箇条書きの項目とその頭に表示する画像との距離は
余白・空きのことです。

参照 
● 図1: marginとpadding
● 図2:paddingの余白の取り方@
● 図3:paddingの余白の取り方A


値の「0px」は「余白無し」を意味しますね。

「余白無し」では
左端から余白を取らない位置、同じ位置に項目と画像は別々に表示されますが
同じ位置ですので重なった形になります。
  ↓
【表示例@】
@ABCDEF
  • 那覇市


例@がその見え方です。

画像と箇条書きの項目が重なって表示されますね。

    注1
   箇条書きと同時に表示している数字の@ABCDEFは
   位置を確認しやすいようにメージャーとして表示しています。

   このブログの基本書体は12pxですので、ヘリに触れている
   @の左端が0px、Aの左は12px、B24pxのように見てください。

    注2
   距離と余白の考え方は、行送りや行間の考え方と同じです。
   

■ 記事表示領域のヘリから余白を取る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 0px;
 ↓
【表示例A】
@ABCDEF
  • 那覇市


「例2」は
12px(1文字分)を開けて項目を表示した例です。

marginの値は
「0px 0px 0px 12px;

記事表示領域のヘリから右の方に「12px」の位置。
1文字分離れたその位置に「項目と画像」は表示されます。

margin は各ヘリからの距離になりますので、項目も画像も指定された距離だけ移動します。

padding の値を
「0px 0px 0px 0px;
としていますので「項目の表示位置」と「画像の表示位置」は同じ場所になり
重なった表示になります。


■ 項目と画像の間を空ける。

上記「例A」のpadding の値を調整します。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 12px;
 ↓
【表示例B】
@ABCDEF
  • 那覇市



【図2:paddingの余白の取り方@】
zu01.png
  ↑ 画像をクリック。元画像が開きます。

paddingは項目(テキスト)の方から
上下左右のヘリに向かってスペースを取るプロパティでしたね。

この場合は、padding が取る左への余白は
項目の前に画像を用いますので、距離を取る対象は画像になります。

つまり
「項目と画像の間を空ける」と同じ意味です。

padding:0px 0px 0px 12px;
は項目の左の12pxの位置に画像を表示する領域が空きます。
1文字分のスペースが有りますので、重なることなく表示されます。

表示例Bの形では画像と項目の間に隙間がないので
マーカーの位置としては見た目も窮屈ですね。



■ 項目と画像の間に1文字分の余白を作る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 24px;
 ↓
【表示例C】
@ABCDEF
  • 那覇市



【図3:paddingの余白の取り方A】
zu02.png
  ↑ 画像をクリック。元画像が開きます。

画像の大きさ(12px) + 使用文字1字分(12px)= 24px
の余白を取り、その後に項目を表示する形です。

「図3」の例のように、項目から24pxの余白と言うことは

● 24px の全てを余白が占めるのではなく

24pxの余白の内

●頭の 12px の部分には画像。
●画像の後ろに1字分(12px)の余白を作り。

その後に項目を表示するので、実質「 24px 」になります。

@ margin:0px 0px 0px 12px; =
記事表示領域の左のへりから12pxの位置を指定。

A padding:0px 0px 0px 24px; =
項目の前に12pxの画像表示部分をつくり
さらに12px(1文字分)を空け、その後ろに箇条書き項目を表示します。

marginとpaddingの組み合わせを、十分に理解しましょう。


項目と画像の間に1文字分の余白を空けましたが
ブログでの文字や余白の大きさには、個人的な好みがあります。

余白は、半角(6px)くらいの小さい方が締りがあってスッキリする。
あるいは、もっと余白を空けたいという方は
paddingの左サイズの指定数値を変更しましょう。

余白サイズを半角小さく
画像(+)半角字分の余白(6px)= 18px のサイズ
padding:0px 0px 0px 18px;

大きく広げるときは、同じように数値を大きく調整します。

    注)
   余白サイズは「1px」単位で調整出来ます。

   行並びや文字の間隔を考え、使用文字の全角・半角を基準とした
   サイズで使用した方が見た目がスッキリします。


【表示例D】
@ABCDEF
  • 那覇市


「表示例C」に比べて、画像と項目の間の余白が半分になりましたね。


■ ヘリからデフォルトに近い位置を決め、項目と画像を表示。

<margin><padding>
の表示の形式が分かりやすいように、箇条書きの階層構造形で確認します。

【CSS】
親項目「那覇市」
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

子項目「人口」
margin:0px 0px 0px 12px;
padding:0px 0px 0px 18px;

  ※階層構造の箇条書きの各classの適用、画像位置の修正は
   前頁で確認しています。

【表示例E】
@ABCDEF
  • 那覇市
    • 人口約318,000人、約135,500世帯



親項目
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

親項目の「那覇市」は
●記事表示領域の左ヘリからmarginで36px(3文字)寄った位置に画像を表示しています。
●その画像と項目の間の空きは padding で「全角+半角=1.5(18px)」を取っています。
●その後ろに項目を表示しています。

子項目
@ margin:0px 0px 0px 12px;
A padding:0px 0px 0px 18px;

親項目に内包(入り子)されている子項目が
@のmargin: ・ ・ ・ 12px で取る対象としているヘリは

「親」が取った「記事表示領域の左端のヘリ」からではなく
「親」の箇条書き項目の領域(この例の薄紅色バックカラーの範囲)の左側を対象とするヘリになります。

そのヘリから「margin:12px」で指定した1文字分の箇所が画像の表示位置。
子項目(人口)は padding:18px(画像表示分12px + 余白6px)のスペースを取って項目の表示にしています。

この表示形式の方がデフォルトでの表示位置に近いいちです。

また
子項目にCSSの「class」定義を適用しなければ
子項目の位置は親項目で定義した値が継承され適用されます。

●画像表示位置についての注意点と
●階層構造の箇条書きについては


前頁の記事で確認していますので、チェックしておきましょう。

参照 

marginとpaddingはブログで画像や文章
あるいは段落、テーブルの作成などで頻繁に使うプロパティで
結構、重宝します。

上手く使うことによって
箇条書きでも思い通りの位置に画像や項目を配置出来るプロパティです。

ブログのレイアウトをきっちりと纏めたり
アフィリエイト用の説明箇条書きを目立たせたい
など、使い方は数多くあります。

使い方をしっかり把握しましょう。

………

記事上段の参照CSS
【画像をポイントにするためのclassの定義】には

画像の表示位置を決めるプロパティとして

background-position:
margin:
padding:

の3種類を使っています。

marginn padding
で位置決めをしているのだから
background-position:
は定義する必要はないのでは

と思えますね。

marginは
画像だけに作用するのではなく「画像と項目を含めた範囲」
つまり「行」の位置決めになります。

例えば
margin:10px 0px 0px 0px;
のようにtopから10pxとして適用した時には「画像と項目を含む行」が
前の行の行送りに10pxを足した位置に移動します。

このブログの例は、行送りは18pxですので
margin:10px 0px 0px 0px; は

18+10=28px
で、直前の行(上の行)から 28px の 
位置が、画像と項目を表示する行の位置になります。

marginを上、あるいは下に適用する時には、それらのことを考えて
注意して使いましょう。


margin padding backgroundのプロパティを
重複して適用しているように見えますが

各々の役割があり、画像だけの「上下左右」の表示位置を決めるためには
background-position:プロパティが必要になります。

………

箇条書きの「項目」や「画像」の表示位置の調整は、
marginやpaddingの使い方を把握しておけば、比較的に簡単に出来ますので
レイアウトをしっかりと纏めたいときに応用して使い切りましょう。

シリーズでは
「箇条書きの基本(CSSの定義1)から(定義4)」の確認で
classへの定義とHTMLでの適用の例をいくつか挙げています。

使用例に伴う「class」を各確認の毎に作成して適用しました。

「class」を数多く作りましたので、CSSの記述が乱れています。

整理と纏めが必要です。

整理と纏めは「CSS」のシリーズで確認します。




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

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



2011年01月29日

箇条書きの基本(CSSの定義3)

■ 5-32 画像・アイコンの表示位置の調整(1)

箇条書きは
デフォルト(初期)値では自動的に「● ○ ■」のマーカーが項目の前に表示されます。

デフォルトでのリストマーカーが表示される位置は決まっています。

CSSに<class>や<id>属性を定義して、
使用するリストマーカーを画像やアイコンに変更した場合でも、表示される位置は変わりません。


具体的に
「デフォルトで表示されるリストマーカーの位置」
「リストマーカーと項目とはどのような関係にあるか」
確認してみます。


@ 項目とリストマーカーをデフォルト値で表示。

互いの位置関係を、視覚的に捉えられるように
項目の背景<background>に色を付けて、領域の範囲を調べて見ます。

【HTML】
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>

【表示@】
  • 沖縄県那覇市


ページや文章、あるいは文字の背景に画像を使用したり、色を付けるには
background-colorプロパティを使います。
  
CSSとHTMLの関係は過去記事で度々確認しています。

    注)
   ●background-colorはCSSプロパティです。
 
   ●例文のように、HTMLの構文にCSSプロパティとHTMLの
    タグが混在することは構造的には間違った使い方と言えます。

   ●混在して使用しても表示上はエラーにはなりませんが、
    HTMLとCSSの概念からしても、両者の意義は異なりますので
    意識して使い分け、両方の構造体系とその立場を把握していくように
    しましょう。

   ●この章ではHTMLを確認しつつ、CSSの流れを掴むために
    タグとプロパティの使い分けをしていません。

   ●HTMLとCSSの関係を確認する段階で
    互いの住み分けをして行きます。
         

項目の背景に「薄い紅色」が付きましたね。

その色の付いた範囲が「項目」の領域です。

箇条書きのデフォルト値での
リストマーカーの位置は項目の領域の外側になります。


リストマーカーの表示位置を定義するには
<list-style-position:>プロパティを使います。

<list-style-position:>は
outside;
inside;
inherit;

= 項目の外側
= 項目と同じ領域内
= 定義の継承
  (この章ではinherit;の解説は省略します)


の値を取ります。

外側への表示はデフォルト値が<outside>になっていますので、
CSSに新たに定義する必要はありません。

上記の例【表示@】のような表示からみても
「リストマーカー」と「項目」は別々に存在することが分かりますね。

別々の存在であることで、リストマーカーの形状を変更したり、
数字や英文字、画像やアイコンに差し替えて表示することが出来ると言えます。


A リストマーカーを「項目と同じ領域内」に表示。

項目と同じ領域内に表示するプロパティの値は「inside」ですね。

【HTML】
<div style="list-style-position:inside";>
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>
</div>

【表示A】
  • 沖縄県那覇市

表示例@とAの違いはハッキリしていますね。

@ ではマーカーの位置は「項目の外側」
A は「項目と同じ領域内」になっています。

デフォルトの<outside>と<inside>の両方を並べて
表示パターンを確認してみます。

【リストマーカーの表示位置比較】
  • 那覇市(outside) = マーカーは外側
  • 那覇市(inside) = マーカーは内側

<outside>と<inside>では
項目を表示する領域の範囲(色ついたバック)は同じ範囲を取っていますが
リストマーカーの位置は移動しています。

過去記事の「箇条書きの基本」でも確認したように
項目の表示位置を動かすとリストマーカーの位置も動きますね。

参照 


■ 画像リストマーカーの表示位置。

リストマーカーを画像やアイコンに差し替えて表示した時
項目の文字のベースラインより、画像やアイコンのベースラインが
少し中央寄りに表示される現象が見られます。

とくに、プラウザのIE(Internet Explorer)を使用している方は
その微妙なズレを経験していると思います。

【画像@】=プラウザのIEでの見え方
hyo01.jpg
項目の文字のベースラインの位置より、アイコンで表示した
リストマーカーのラインは少し上付きになって揃っていませんね。

  ※Firefoxではラインが揃って表示されます。

使用している「三角形」「ひし形」のアイコンは
ズレを計算して文字より小さいサイズで作りあげています。

それでもアイコンの上部は文字のトップラインより上に出ています。

この様な表示上のほんの僅かなズレは

ウェブデザインを本格的に学んでいる訳でもないので、
それほど気にする問題でもないことですが、なかには

 ●どのプラウザでも決まった位置に表示にしたい。
 ●マーカーと項目のベースラインをしっかりと揃えたい。
 ●ブログのデザインを綺麗に仕上げたい。

と言う考えも有ります。

プロパティの
<list-style-position:>は
リストマーカーを表示する位置を
「外側に」「内側に」の値を指定するだけです。

左右への位置の移動は出来ますが、上下には無理があります。

---

■ 項目のマーカーの代わりに「独自の画像やアイコン」を表示する。

マーカーを自由に動かせないのは「箇条書きの一部」であるための制約です。

箇条書きのマーカーとして、別の画像やアイコンを使用して表示すると言うことは
マーカーが表示される位置に、その画像やアイコンと差し替えて表示するという意味ですね。

画像やアイコンは独立しているので、CSSでの定義やHTMLのタグ指定で、思いどおりの場所に自由に表示すればいいことです。

●マーカーを表示しないようにする。
●独自の画像やアイコンを、指定する箇所(マーカーの位置)に表示する。

の考え方になります。

マーカーの表示をしないで
独自の「画像やアイコン」を、その位置に呼び出して表示したら

表示上の見た目は
箇条書きのリストマーカーを表示したのと同じ形になりますね。

独立した画像の表示ですので
上下左右の位置調整は比較的簡単に出来ます。


CSSに定義するプロパティは
【プロパティと

●list-style:none;
  デフォルトで表示されるマーカーを表示しないようにする。
  (その位置に画像を表示するので二重表示にならないように)

●background-image:url( url );
  項目の頭に表示するための画像を呼び出す。

  項目のリストマーカーの代わりに
  画像をポイントとして使用するので、箇条書きの
  <list-style-image:>プロパティの適用ではなく
  画像を呼び出す
  <background-image:>プロパティ。

●background-repeat:no-repeat;
  背景画像の表示の繰り返しを禁止。
  値は「no-repeat;」または「none;」
  このプロパティと値を適用しないと、同じ画像が繰り返して
  表示される。

  逆に画像を繰り返し表示させるには
  background-repeat:repeat-repeat;
  
●background-position:* *;
  画像の表示位置の指定
  値は
  left right center top bottom %(比率) px(サイズ)
  などがある。

  background-position:@left Atop;
  「領域」の @左 A上の位置がデフォルト値。

●padding
  項目と画像との間の空きの指定(項目側から空ける)
●margin
  画像位置の指定(テキスト領域のへりから)

  参照 ⇒ marginとpadding・その応用(1)〜(3)
        応用(1)  応用(2)  応用(3)


上記のIEでは、リストマーカの位置がズレていましたね。

リストマーカーの代わりにポイントとして用いる画像を
表示するCSSを確認してみましょう。


セレクタの仮のclass名を「samp9 ul」とします。

【画像をポイントにするためのclassの定義】
【class定義@:親項目】

.samp9 ul{
list-style:none;
margin-left:0px;
padding-left:0px;

font-size:12px;
color:#0000ff;
background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア
⇒文字の大きさ
⇒文字の色
⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

⇒左ヘリからの位置
⇒項目から画像への空き
⇒セレクタ閉め


同時に箇条書きにする第二階層の子項目の定義
class名は「samp10 ul」とします。

【class定義A:子項目】

.samp10 ul{
list-style:none;
margin-left:0px;
padding-left:0px;
color:#990000;
background-image:url('url');
background-repeat:no-repeat;
background-position:left center;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}


画像例の
IEでの見え方のリストマーカーの表示ズレを修正するため

【class定義@:親項目】【class定義A:子項目】

でclass定義をしてリストマーカーの代わりに
画像を使用したのが、下記の表示例です。

【表示例】
  • 那覇市
    • 人口約318,000人、約135,500世帯


親項目の「那覇市」、子項目の「人口」の前に表示されている「三角」「ひし型」のアイコンが、ポイントとして使用したマークで、仮想のリストマーカーになります。

見た目は、リストマーカーそのものですね。

親項目の表示領域に薄紅色、子項目には薄青色を付けてみると
薄紅色の親項目の領域は、子項目の領域にまたがって色が乗っています。

子項目は
親項目の「那覇市」の領域に内包されていることが分かりますね。

箇条書き構造は
その下の層(孫項目)次の層を組み立てても親の領域内ということです。

このことは重要な要素の一つで、プロパティとして定義する
background-position:left center;
の値を「center」と定義した時

その位置は
親と子、あるいは孫も含めた親の領域内の上下の中央(center)
と言う意味になりますので
「▲」画像のベースラインは、子や孫まで含めた広い親の領域の中央に来ます。

「center」指定では、リストマーカーの代わりとしては
歪な位置へ表示されますね。

親、子、孫のような階層構造では
画像を置く位置に気を付ける必要があります。


表示例では画像位置の値を「%」にして
background-position:left 15%;
の形式で親項目のトップラインから、15%下げた位置に指定しています。

 ※「%」は領域の広さに対する相対値です。
  この例では、領域は子項目の範囲まで入ります。

  絶対値の「px」を使って細かい指示をしてもいいでしょう。

親項目、子項目で成り立っている
階層構造における適用例を示しましたが

親だけの項目(ここでは那覇市の項目)
の単独での箇条書きでは、項目領域は親だけの範囲になりますので、

画像位置の値を「無指定」にするか、または値を
background-position:left center;
の形式で領域の中央に指定します。

【表示例】
  • 那覇市


アイコンが上下の中央に位置していますね。

アイコンが文字より大きい、あるいは極端に小さいサイズを使用している時には上下位置を計算して表示します。

このように
単独の項目と多層の時の「値」の使い方には気を付けましょう。

backgroundには
image の他に
color  position  repeat  attachment(スクロール指定)
の値があります。

ある領域内
たとえばブログの記事領域、テーブルのセルの中、ページを分けるフレームなどに画像を表示する時、 paddingやmarginn と共に頻繁に使用されます。

アフィリエイトなどで、商品画像を貼り込む位置を決めるなど
便利なプロパティです。


---
リストマーカーの代わりに
独自の画像をポイントとして使用するために
CSSのclassを定義し、表示方法と位置の指定を確認しました。



次回は
今回の「箇条書きでの画像使用」の補遺で
「marginとpadding」を確認します。



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

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



2010年11月15日

箇条書きの基本(CSSの定義2)

■ 5-31 CSSで箇条書きのマーカーを画像に変更。

ブログや文章を書くときの[箇条書き]のメリットは

●要点が一目でわかる。
●文章を要約して相手に伝えることができる。
●内容を重要度順に表示できる。

などが上げられますね。

箇条書きは
記事の内容を整理することや伝えたい内容を明確にすること
において有効な手法です。

前回の「箇条書きの基本(CSSの定義1)」では

●使用するリストマーカーの変更
●多層構造の箇条書きのHTMLタグ
●各層へのCSSのセレクタの適用

を確認しました。


参照してCSSの「class」や「id」定義
HTMLでCSSを適用する方法を覚えましょう。

箇条書きを再度確認します。

【デフォルトでの階層の構造とリストマーカーの表示】
【HTML】
<ul>
<li>
那覇市   ← 第一層(親)
 <ul>
  <li>
人口約312,000人、約122,000世帯 ← 第二層(子)
 </ul>
</ul>
【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯


デフォルトでの階層のリストマーカーは上記の表示例のように
第一層は黒丸(●)第二層では白丸(○)が自動的に表示されますね。

前回はCSSに
第一層、第二層にそれぞれプロパティの値の異なったclassを
「samp ul」「samp2 ul」として定義をして適用した例を確認しました。

classを適用して表示したのが下記の例ですね。

【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯

デフォルトと異なっている点は

親の項目のリストマーカーが「」文字色は、大きさは少し大きい13px。
子は「○」の替わりに「」文字は一回り小さい11pxで色は「薄茶」に替わっています。

おもに記事や日記類を中心に展開している一般的なブログでは
箇条書きのリストマーカーはデフォルトで表示される「 ● ○ ■ 」の範囲で十分に対応できますが、

アフィリエイトのためのブログでは

 ● 力を入れている商品の項目を他の商品より目立たせたい。
 ● 訪問した方に注意を喚起し目を止めさせ、クリック率を高めたい。
 ● 独自のリストマーカーを使うことで項目を見やすくして、ビジュアル的に
  も親しみのもてるブログにしたい。

などの視点からみても
箇条書きのリストマーカーを自分なりに修正したり、アイコンに置き換えたり
することはブログ構成上の重要な要素のひとつだと言えます。

ブログには
人それぞれのいろいろな思い入れや、その人なりのページ構成の考え方
があります。

その思いや考えを反映したブログを構築することが、理想的なページ
表現となり、集客率の高いブログに仕上がっていくと思っています。

参照 
箇条書き・マーカーに画像を使用
●リストマーカーを画像(アイコン)に差し替える例
http://tosiji-dreamafi.seesaa.net/article/160328610.html



■ 独自のアイコンを使用するため「class」を定義。


リストマーカーに画像やアイコンを使用。

箇条書きの項目のリストマーカーに、
画像やアイコンを指定するCSSセレクタの「プロパティ」と「値」は
list-style-image:url(url);
ですね。

例題に使用するclass名を「.samp3 ul」としておきます。

「箇条書きCSS:class定義B」

.samp3 ul{
font-size:12px;
color:#0000ff;
list-style-image:url(url);
}


⇒ class名
⇒ 文字(12px)
⇒ 文字の色(青)
⇒ アイコンの呼び出し(注)
⇒ セレクタの閉め


   注)  
  list-style-image:url(url);
  の赤文字で表示してあるurlは、ブログサービスでアイコンを保存してい
  る場所のアドレスになりますね。

  このブログでの、アイコン「 」を保存した場所(アドレス)は

  list-style-image:url (http://tosiji-
  dreamafi.up.seesaa.net/
image/画像ファイル名);

  のurlとなります。

  各自が利用しているブログサービスの画像の保存や利用方法、
  保存場所を確認してから記入しましょう
  

追加したclass「.samp3 ul」をCSSに保存して適用します。

class を適用するためのHTMLは

<div class="samp3 ul">
 <ul><li>〜</ul>
</div>

の形式ですね。

【HTML】
<div class="samp3 ul">
 <ul>
   <li>那覇市
 </ul>

【表示】
  • 那覇市

CSSのclass「.samp3 ul」が適用され、
リストマーカーとして独自のアイコン(シアン色の三画形)が表示されました。


■ 親項目にプロパティを適用したとき、子項目の状態を確認。

親項目に適用したCSSプロパティは、子項目に別のclassの適用がなければ、そのまま親項目のclassが適用され、文字の大きさや色、リストマーカーの形状も同じ「値」を取ります。

下記がその表示例です。

【HTML】
<div class="samp3 ul">  ← class定義Bを参照
<ul>
<li>那覇市
  <ul>
  <li>人口約318,000人、約135,500世帯
  </ul>
</ul>
</div>
【表示】
  • 那覇市
    • 人口約312,000人、約120,000世帯

子項目にも親項目のclassが適用され
同じリストマーカー、文字、文字色で表示されますね。

この例から、親と子の関係は、
<div class="samp3 ul"> 〜 </div>の適用範囲内にあることが分かりますね。

逆に項目にリストマーカーやアイコンを表示したくないときは、
classのプロパティとその値を

list-style-type:none;
list-style-image:none;

の形式にします。

リストマーカーの表示されない項目になります。


■ 子項目のマーカーを親とは異なるアイコンで表示。

親と異なる画像を表示するには
CSSに新しいclassと使用する画像(アイコン)が必要ですね。


CSSの子項目用のセレクタ「class」を作成します。
class名を「samp4 ul]とします。

「箇条書きCSS:class定義C」

.samp4 ul{
color:#990000;
list-style-image:url(url);
}


⇒ class名
⇒ 文字色(薄茶)
⇒ アイコンの呼び出し
⇒ セレクタの閉め

 ※親項目と同じ大きさの文字、文字色を使用するときは、
  同じプロパティを記入する必要はありません。
  この例では、文字色を「薄茶」に指定しています。

保存して適用ですね。

CSSのclass
「samp3 ul」と「samp4 ul」を同時に記事に適用してみましょう。

【HTML】
<div class="samp3 ul> ← 第一層(親)にCSSを適用
<ul>
 <li>
那覇市    
   <div class="samp4 ul> ← 第二層(子)にCSSを適用
    <ul>
     <li>
人口約312,000人、約122,000世帯
    </ul>
   </div>

</ul>
</div>


【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯


子項目のマーカー「」のピンクの菱形は、新しく作成して、ブログにアップロードしています。

過去記事でも確認したように、画像はある程度大きく作成して、小さく表示するのが望ましい使い方です。

第一層の親に「   」第二層の子には「  」
異なる独自のアイコンをリストマーカーとして表示できました。

画像やアイコンを使用するとき

@画像やアイコンを作成する。
A利用しているブログサービスにアップロード、保存をする。
BCSSにclassを定義する。
CHTML構文にclassを適用するタグを書き込み、画像やアイコンを
 呼び出す。
D表示

の流れになります。

何度か使っているうちに
HTMLとCSSの関係が理解できるようになります。


次回は

●リストマーカーの表示位置の調整。
●リストマーカーの代わりに画像やアイコンを使う。

を確認してみます。



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

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



2010年10月29日

箇条書きの基本(CSSの定義1)

■ 5-30 CSSを定義、箇条書きを装飾する。

HTMLはマークアップ言語と言われ、タグを用いて
「これは見出し」「この部分は記事本文」「画像はここ」というように
要素を指定して、レイアウトやウェブページを制御しますね。

見出しや本文をどのように表示するか
HTMLをどのように使用するかはプラウザ(www)に準拠しています。

HTMLだけで、ウェブページを表示しようとすると
使用するタグがより複雑になり、プラウザによって見栄えが変わったり、表示位置が異なっていたりと、バランスが崩れてしまうことがあります。

そのような背景で
HTMLのタグの簡素化や共通化をもとに、HTMLとは別にデザインや装飾する仕組みが考え出されています。

それがCSSですね。

    ※ Cascading Style Sheet(スタイルシート)

CSSはHTMLのタグの機能を補ったり、拡張する役目があり

●HTMLでウェブページの内容を作成(マークアップ)して、
●そのHTMLをCSSで装飾する。

という考えで
CSSにさまざまな拡張機能が取り入れられ、複雑な構造もスムーズに構築でき、柔軟にウエブページのレイアウトが行えるようになっています。

HTMLは、そのCSSを呼び出してWEBページに適用する形になっています。

CSSは
wwwの世界、IEやFirefoxをはじめ大方のプラウザに対応していて
ウェブページを作るのに欠かせないものです。

将来はCSSとHTMLの関係は

機能が拡充してより簡便に使用でき、役割分担が明瞭になり、
ウェブページをもっとスムーズに作りあげる仕組みに改善されるでしょう。


■ 箇条書きのHTMLと定義するCSSの役割
その使い方を確認してみましょう。


HTMLの箇条書きの要素は次の3種類でしたね。

@順序なし箇条書き(箇条書きリスト)
A順序あり箇条書き(連番リスト)  
B定義型箇条書き   
⇒ ul要素
⇒ ol要素
⇒ dl要素





順序なし箇条書き(箇条書きリスト)を基にして、HTMLとCSSの構造を確認します。

Aの連番リスト、B定義型箇条書き の仕組みやCSSの適用は
@の箇条書きリストと同じ方法です。

【箇条書きのHTML】

沖縄県の市町村
<ul>
<li>那覇市
<li>沖縄市
<li>……
</ul>

【表示例】

沖縄県の市町村
  • 那覇市
  • 沖縄市
  • ……

「デフォルト値」で表示した例です。

   注)
   デフォルト値での表示は、テンプレートの
   CSSで定義している文字の種類、サイズや色が適用されます。
  
HTMLにも
文字やウェブデザインのために装飾する方法は数多くあります。


文字の装飾などをHTMLタグだけで指定すると

●使用するタグの種類が多くなり、煩雑になります。
●さらに構文としてのHTMLが重くなります。

ウェブページでは画像の取り扱いや文字の装飾、表の作成、箇条書きのマーカーなど
いわゆる「デザイン」はCSSで行い、HTMLの構文(マークアップ)は簡便に軽くすることが基本になります。

【CSSに箇条書きを定義】

CSSの基本形は

セレクタ{
  .text {
プロパティ:値;
  font-size:12px;



⇒セレクタ名(開く)

⇒プロパティ名:その値;

⇒セレクタ(閉め)


の形式ですね。  
セレクタ名の  {    プロパティの  : ;    閉めの  }  の記入を忘れないように。

箇条書きにCSSを適用するには
 ● 過去記事を含めて全べての記事に適用する。
 ● 必要なページにだけCSSを適用する。

の二つの考え方があります。

■ 過去記事を含めた全べての記事にCSSを適用する。

全てのページ(記事)で使用している箇条書きに、
文字の種類、太さ、大きさや文字の色など、統一したスタイルを適用させるには、

箇条書きのタグ
<ul> <ol> <dl> を
CSSのセレクタとして直接に定義します

【CSSへ定義した例】

<!-- 順序なし箇条書き(箇条書きリスト)-->
ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}
ul ul{
font-size:12px;
color:#990000;
list-style-type:circle;
}
 
<!-- 順序あり箇条書き(連番つきリスト)-->
ol{
font-size:13px;
color:#0000ff;
list-style-type:upper-alpha;
}
ol ol{ … }

<!-- 定義型箇条書き-->
dl{ … }
dl dl{ … }

●セレクタとして定義した後は、箇条書きのHTMLタグを

<ul> …
<ol> …
<dl> …

と記入しただけで、
プロパティとその値を読み込んでデフォルトでの定義どおりに表示をします。

●ここで注意することは、箇条書きにしている
「過去記事を含めた全べての記事」
に定義したCSSが適用されることです。


●リストの階層ごとに異なったスタイルを適用するには
第二層 ⇒ ul ul { … }  
第三層 ⇒ ul ul ul { … }

と定義しておけばプロパティ値が反映されます。
 ※ ul と ul の間に半角のスペースを空けます。

参照 
●階層とは(この記事の下段)
●箇条書きリストの階層ごとにスタイルを定義


一般的なブログのテンプレートのCSSには
箇条書きをセレクタとして設定していませんね。

ブログサービスでは、
同じテンプレートを使用しているブロガーが複数にわたります。

共通のテンプレートを使用している方でも、個人用にCSSを書き換えて
使用する書体やデザインを変更していることが多いですね。

テンプレートのCSSに箇条書き<ul><ol><dl>をセレクタとして
最初から定義してしまうと

文字やその修飾などの<body>要素を書き換えた場合でも、
箇条書きはすでに定義していますので、その定義のとおりでの表示になります。

箇条書きの文字の大きさなどが、本文とは異なった形で表示される。

などと全体的なバランスが崩れる時もあります。

見栄えがいいように本文との対比を考えて、
箇条書きのCSSを書き直すことが必要なときもでてきます。

デフォルト値は
CSSに初期値として定義している文字が基本になっています。

箇条書き、テーブルなどは、
必要なときに定義することが望ましいCSSの使い方になっています。


■ 必要なページの箇条書きにだけCSSを適用する。

class ・ id の定義と適用。

一部の箇条書きにCSSを適用する方法をみていきましょう。

CSSを適用したい箇条書きのセレクタを
「class」名または「id」名
で定義します。

【class ・ id属性】

  ●class属性
  定義した箇所の箇条書きにだけCSSが適用されます。
  セレクタを同じウェブページで何度でも使えます。
  セレクタの前に「.」(カンマ)を付けます。

  ●id属性
  定義したセレクタを一度だけ使う。
  セレクタの前に「#」(シャープ)を付けます。

  ※classやidは、
  箇条書きだけではなくtebleや段落(p)などに対しても
  追加セレクタとして使う時の基本です。

class属性とid属性は同じ使い方をします。

【 class をCSSに定義する】

class をCSSに定義するには
class名の前に「.」(カンマ)を付け「.aaaaa 」というセレクタにします。
  ※「.」を忘れないようにしましょう。

文字の大きさや文字色など装飾に必要なプロパティとその値を記入して
CSSを変更して保存します。

「.aaaaa 」はセレクタ名ですので、自由に付けてかまいませんが、
箇条書き用のセレクタだと分かりやすい名前にしましょう。

 ※ここでは、
 仮のセレクタのclass名を「.samp ul」として定義しておきます。
 
「箇条書きCSS:class定義@」

.samp ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}

⇒ class名
⇒ 文字(13px)
⇒ 文字色(青)
⇒ マーカー「square=四角」
⇒ セレクタの閉め

このCSS(class)を適用するためのHTMLは

【HTML】
<div class="samp ul">
 <ul><li>〜</ul>
</div>
または
<ul class="samp ul"> <li>〜</ul>の形式です。

両方ともclass定義した <.samp ul> を適用せよの意になります。

   注)
    CSSに定義したclass名には
   「.samp ul」と「.」が付いています。

 
   「.」はCSSに対してセレクタは「class」であるという意味ですので、
    HTMLを記入して適用する時には
    <div class="samp ul">のように「.」は記入しません。


    idの「#」も同じ使い方です。    

【HTML記入例】
<div class="samp ul">
<ul>
<li>那覇市
</ul>
</div>

「表示」
  • 那覇市

表示は「箇条書きCSS:class定義@」が適用され

本文より1px大きい文字、
文字の色は青、
項目のマーカーの種類は「square=四角」ですね。


このように、ある要素に対してCSSを定義して適用すると、
同じ要素にはすべて同じスタイルが指定されます。

これがCSSの特徴です。

CSSへの定義の方法やHTMLタグの記入形式は
<ol要素><dl要素> でも同じ仕組みです。


■箇条書きリストの階層ごとにスタイルを定義。

箇条書きの階層とは

【階層の表示例】
  • 那覇市
    • 人口約312,000人、約122,000世帯

項目「那覇市」は
「人口は約312,000人」の親の項目であり、第一層になります。

人口の項目は親の層の下、第二層に表示されますね。

このような形式を「階層」といいます。

第一層、第二階層、そして第三階層 … 
と階層化している箇条書きでも、各階層ごとに文字を修飾したり
マーカーを画像に変更して使用することができます。

先のCSSのclass定義@と同じように、
装飾をしたい階層に使用する新しい「class」をCSSに定義しておきます。

 ※サンプルでは「.samp2 ul」の名前でclss定義をして
 適用してみましょう。


「箇条書きCSS:class定義A」

.samp2 ul{
font-size:11px;
font-color:#990000;
list-style-type:circle;
}

⇒ class名
⇒ 文字のサイズ(11px)
⇒ 文字の色(薄茶)
⇒ マーカー「circle=白丸」
⇒ セレクタの閉め

先に定義した「.samp ul」を親項目に、
この「.samp2 ul」を第二層の子項目の文字を修飾するセレクタとして適応します。

第三層や四層にも
異なる装飾をしたいときは同じような定義が必要ですね。

【HTML】
<div class="samp ul">    ← 定義@を適用
<ul>        ← 第一層
<li>那覇市
<div class="samp2 ul">   ← 定義Aを適用
<ul>        ← 第二層
<li>人口約312,000人、約122,000世帯
</ul>
</div>

</ul>
</div>

【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯

第一層の那覇市の文字サイズは13px、色は青、マーカーは黒四角。

第二層の人口の項目の文字の大きさは11px、色は薄茶色、マーカーは白丸と定義通りの表示になりましたね。

この注意点は
●CSSに定義した「.samp ul」は親項目に、
●「.samp2 ul」は必ず子項目に適用させなければいけない。


と言う決まりはありません。

逆に定義のA「.samp2 ul」を親に、
定義@「.samp ul」を子に適用してもかまいません。

定義は必要に応じて、どの層に適用しても構いません。

また、第一層だけに定義して、
第二層以下には定義(適用)をしなければ、
以下の階層には、第一層に適用した「class」が反映されます。

そのことを「継承」と言います。

また逆に第一層には定義無し
下部の層だけ個々に定義することも自由にできます。

classやidは
必要な時に自由に呼び出して使用できる便利なセレクタです。



以上のようにHTMLの「要素(タグ)」に class属性を指定して
そのclassをセレクタにすることで、思うとおりの細かなスタイルが設定ができますね。

箇条書きだけではなく、テーブル、段落、段組みなどにclassやidを対応させれば
記事の中で必要な「要素」にだけ適用するスタイルを定義することができます。

CSSの定義、HTMLでの適用の方法は
CSSを使う上での基本になりますので、仕組みに慣れるようにしましょう。

次回は、
マーカーに画像(アイコン)を用いるなど
少し進んだCSSの適用を確認します。




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

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



2010年08月23日

箇条書きの基本(4)マーカーに画像を使用

■ 5-29 マーカーを画像・アイコンに変更

ブログは、訪問者の視線の動きを考えたレイアウトが重要になってきます。

とくに視線の流れに気を配ったレイアウトは、
見た目にも美しく、発信している人の優しさと気配りを感じます。

使い勝手のいいブログは
●ブログの目的がハッキリしている。
●内容が整理されている。
●道筋がたどりやすい。

など、訪問者に対する気遣いがありますね。

「伝えたいことを要約して分かりやすくまとめる」
そのことは、記事(文章)を書くことの基本ですね。

箇条書きも、その要約する手法のひとつですね。

その箇条書きの項目を
●記事の流れを、目で追いやすいようにマーカーの種類を変えたり
●重要な項目には画像(写真・イラスト)やアイコンをマーカーに使用することで
●強調するポイントを作り、訪問者を案内するスムーズな流れ

が作れます。


■ マーカーを画像やアイコンに差し替える。

箇条書きのデフォルトで表示されるマーカーは「●」「○」「■」「1」… の種類でした。
そのデフォルトで表示されるマーカーを写真やイラストなどの画像、独自で作成したアイコンに変更するHTMLタグの記入を確認します。

    注)
   ●アイコンとは
    イラストや写真画像などを「32×32px、16×16px」 のサイズ
    または、それより小さいサイズで作り上げたものの総称。

   ●厳密にはアイコンは拡張子が「….ico」のタイプを言うが、
    最近ではそれほど厳密な区分けをしていないようだ。

   ●この記事で使用している画像やアイコンは「….gif」形式を
    使用しています。

箇条書きのHTMLタグの形式は

【ul】要素
<ul>
  <li>那覇市
  <li>沖縄市
  <li>浦添市
</ul>


の形式でしたね。

項目のマーカーを画像やアイコンに変更する為のプロパティは
list-style-image
を使用します。

   image = 写真やイラスト類を指す

箇条書きのデフォルトでは
「●」や連番の「1、2」アルファベットの「a b」のようなマーカーしかないですね。


■ アイコンを用意する。

ネット上には数多くの無料で使用できるアイコンがあります。
気に入ったアイコンを取得するか、
独自のアイコンを作って、自分なりのブログデザインにするのもいいでしょう。



上記リンクの参照で、独自のアイコンの作り方を確認しておきましょう。

作成した三角形のアイコンが下図です。

【16px サンプル画像】

   

アイコンの基本にそって「16×16px」で作成しました。
拡張子は「ico」形式ではなく「gif形式」です。

このブログの使用書体の大きさは「12px」ですので、書体とマーカーのバランスを取るため
「12px」または少し小さめのサイズに修正した画像を各項目の頭に表示します。

最初から文字の大きさ程度のアイコンを作成して、使用することも出来ますが、
画像の表示段階でジャギングの現象が起こることがあります。

    注
   ● ジャギング = 画像の周辺がギザギザに表示される現象。

画像を使用するときの基本どおり、
大きめのサイズ(2倍以上)で作成してアップロードのあと
使用するときに書体の大きさを基準にした縮小サイズで表示することが望ましいです。

12pxや10pxの画像は、表示上はアイコンと言うよりむしろ「ファビコン」に近いですね。




■ 項目に同じ画像を表示する。

【HTML】

<ul style="list-style-image: url('画像のurl');">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
</ul>

【表示】
  • 那覇市
  • 沖縄市
  • 浦添市

<list-style-image>での指定です。
上手くマーカーの位置に画像が表示されていますね。

●箇条書きの各項目に「同じ画像」を表示するときには
<ul>要素
の中に画像の<URL>を記入。

●項目ごとに「異なる画像」を表示するときは
<li>要素
に、対象となる画像の<URL>を組み込みます。( ↓ 下段「表示2」)


画像を読み込むHTMLソースは、
ブログの画像保存の場所にアップロードしていますので、

<ul style="list-style-image: url('http://tosiji-dreamafi.up.seesaa.net/image/・・.gif');">

のように「絶対パス(絶対番地)」での記入です。
 
【HTML】

●<ul style="  list-style-image ~  " の
    「" ~ "」が「list-style-image」の範囲。

●url(' ~ ') が、画像の<url> ('  ')は入り子の形式です。

●HTML内の
  ” (ダブルコーテーション)と  ' (シングルコーテーション)の記入
 を忘れないように.


<url>番地の指定は
独自のサーバーを所有して、データ類がそのサーバーにあるときの<url>の記入方法と
ブログサービスを利用したときの<url>の形式が異なりますので、注意が必要です。

ここで取り上げた例は、ブログサービスを中心にしたimgタグを確認しています。

●<list-style-type> と<list-style-image>
のプロパティを同時に指定した場合には<list-style-image>が優先されます。


■ 各項目に異なる画像を表示する。

項目ごとに異なる画像やアイコンを表示するときは
<li>要素に対象となる画像のURLを組み込みます。

【HTML】

<ul >
 <li style="list-style-image: url('画像1url');">那覇市
 <li style="list-style-image: url('画像2url');">沖縄市
 <li style="list-style-image: url('画像3url');">浦添市
</ul>

【表示2】
  • 那覇市
  • 沖縄市
  • 浦添市

各<li>要素に一個いっこの画像urlを記入する煩雑さはありますが、思い通り画像やアイコンが表示できますね。


■ 画像の表示位置を修正する。

画像やアイコンを使用してみると、表示位置が微妙にずれますね。

表示位置を調整する方法として
画像配置の<background>をHTMLのタグとして使う方法があります。

<background>は
背景色や背景画像を指定するCSSプロパティですが、タグとして
<li要素>に設定すると、画像やアイコンをリストマーカーとして表示することができます。


次回は

●CSSへの箇条書きの定義
●HTMLでの適用

を確認します。



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

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



2010年08月02日

箇条書きの基本(3)

■ 5-28 マーカーの表示位置を指定

個条書き項目の表示位置は、
自動的にデフォルト値で表示されますね。

文章を読みやすく・見やすい位置に項目(リスト)を揃え
余白とのバランスを取る方法が
以前、確認した<marginとpadding>の余白を取るタグの活用です。



【表示1】
箇条書きのデフォルト値

<ol>
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

デフォルト値での表示位置です。

●破線(ドット線)で囲まれている領域を、ブログ記事の仮の領域に見たてています。

●マーカーとの箇条書きの位置が分かりやすいように

 「親項目」(沖縄県の人口)の領域には薄いピンク色
 「入り子の項目:子項目」(那覇市)には薄いブルーを

バックに使います。

●@ABCDEFのの数字は
左からの位置を確認するため、メジャー・目印として表示しています。

    注
   ●このブログの文字の大きさは「12px」を使用していますので、
    @やAの文字の横サイズは「12px」です。

●<margin-left="0">の位置は
記事を表示する領域を囲んだ破線の左端と、数字の@が触れる位置になります。

デフォルト値の箇条書き項目のマーカーの表示位置は

親項目「沖縄県の人口」では、左端から1文字分(12px)の位置、
子項目「那覇市」では3文字(36px)を取った位置です。

この例のように
項目の領域部分にはバック色が表示されていますが
マーカーにはバック色が塗られていません。

このことは

「箇条書き項目」と頭の「マーカー」は別個に表示される

ことを意味しています。

別々に表示されるから
●マーカーの種類の変更、●連番の形式を変える
ことが可能なのです。

「入り子」の要素も同じ性質です。

実際のブログの記事領域での箇条書き、デフォルト値の表示を確認します。

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

ブログの記事の表示領域に、デフォルト値で表示した形がこの表示です。

【箇条書きの特徴】
(1)余白の大きさは、使用文字の大きさに準拠します。
(2)マーカーと項目は別々の表示になります。
(3)マーカーの位置と項目の間には、1字分の余白が作られます。
(4)余白部分は
   ●表示領域の左端から「項目の頭」までのサイズ。
   ●マーカーは項目が左側に取った余白の中
    表示される。

     ⇒ 【表示1】を参照。



    注
   ●マーカーのサイズ
   <ol>の順序あり箇条書きでは「1.」のように数字の後ろに
   「.」半角のコンマが付きますので、実際には1.5倍くらいの
   (18pxくらい)の余白です。 
   ●半角ほどの誤差はあまり気にする必要はないでしょう。

   ●<ul>順序なし箇条書きでは「●」(全角1字分)の大きさです。


以上の要約が <margin>や<padding> を使用して、
箇条書きの表示位置を調整する時の考え方の基本になります。


■ <margin>での余白設定。

<margin>は外側から内に対する余白。

ブログ表示領域の各々の端から、
項目や段落を表示する領域の位置を指定するタグになります。

「margin」の基本形

margin:0px 0px 0px 0px
margin-top:0px
margin-bottom:0px
margin-left:0px
margin-right:0px
margin:0px

⇒上下左右の余白
⇒上の余白
⇒下の余白
⇒左の余白
⇒右の余白
⇒四縁が同じサイズ

<padding>も同じ形式です。

<margin>で箇条書き項目の表示位置を設定してみます。

【表示2】
●margin-left:0px;padding-left:0px; の例

<ol style="margin-left:0px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

<nargin>と<padding>の各ヘリからの余白(属性値)を「0」にしました。

項目の表示は、指定された「0」の位置からになります。

前述の要約(4)で分かるように
項目の前に余白がないためマーカーが領域外に表示されています。

このような領域外への表示は
サイドのカラムが下段に追われる「カラム落ち」の原因となり、表示エラーになりますので注意が必要です。

●表示結果からみても<margin>で指定する余白は、
マーカーに対してではなく、項目を表示する位置であると分かりますね。

表示領域の左端ギリギリにマーカーを表示するには

表示領域の左端から

 ●マーカーのサイズ(使用文字の大きさ)
  +(プラス)
 ●項目までの空き

の余白が必要ですね。

言い方を変えれば

●項目の前にマーカーを表示するだけの余白が必要。
と言うことです。

最小限の余白サイズは

 @ マーカーの大きさ(このブログでは12px) = 12px
 A マーカーと項目の間の余白        = 12px
 の計「24px」が必要と言うことですね。

<margin:0px 0px 0px 24px;>で
左端に「24px」の余白を取り項目を表示すれば、領域の左端ギリギリの位置にマーカーが表示されます。

下記の「表示3」がその例です。

【表示3】
●margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

マーカーが表示領域の左端に表示されましたね。

表示例のような
左端ギリギリに箇条書きをすることは無いでしょうが
<margin>タグを使用するときの考え方として確認をしておきます。

この形式は「入り子」にも適用されます。

「親項目」の表示位置が変わると、それに準じて「子項目」も移動します。

入り子でも、余白の指定がなければデフォルト値が反映されます。


■ 入り子の例

【表示4-a】
●入り子=margin-left:0px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
   <ul style="margin-left:0px;padding-left:0px;">
    <li>那覇市
   </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

親項目では<margin="0">の位置は、ブログの表示域の左端でしたが、
入り子の「子」項目での<margin="0">の位置は

●親項目の項目の頭の位置になります。

同じように、子項目に対する入り子「孫」項目は、子項目の頭になりますね。

【表示4-b】
●入り子=margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul style="margin-left:24px;padding-left:0px;">
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

上記の【表示】例が、箇条書きの表示位置のデフォルト値を書き換えて、自分なりの位置に表示する方法です。

余白の取り方には、<padding>での形式もあります。
確認してみましょう。

■paddingでの余白。

【表示5】
margin-left:0px;padding-left:24px; の例

<ol style="margin-left:0px;padding-left:24px;">
<li>沖縄県の人口
<ol>

@ABCD
  1. 沖縄県の人口

「表示3」は<margin>で
「表示5」は<padding>での

箇条書きにおける余白の取り方です。

表示の結果は同じに見えますね。

実際にはプラウザのIEとFirefox(Netscape)では
余白の取り方が違うと言われています。

IEは<margin>で、
Firefoxは<padding>で

余白(表示位置)を設定するというのが原則になっているようです。

両プラウザで検証してみましたが、表示に微妙な違いがあるだけで気にすることもないくらいです。

その両プラウザに対応するように
CSSでの設定の方法を次回、確認してみましょう。


以上
IEをメインにした(marginを中心に)
箇条書きの実例をみてきました。

IEでは箇条書きの位置指定は、<margin>タグを使用することから
<padding-left:0px;>
は省略して書かなくてもいいのではと思いますが、<margin>だけでは、思うように表示ができません。

<margin>で位置を指定して、<padding>の値が"0"でも記入しておきましょう。

CSSを利用するときに確認できます。


※HTMLやCSS、
wwwプラウザの種類を問わずに
同じタグで同じ表示が出来るように統一されることが望ましいですね。

「marginとpadding」



●マーカーの代わりに画像を表示。
●CSSを使った箇条書き。

を次回、確認します。




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

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



2010年07月21日

箇条書きの基本(2)

■ 5-27 箇条書きのマーカーや記号を変更

箇条書きは情報を

●簡潔にまとめ
●要点が分かりやすく
●ビジュアル的に見やすくして
●読みやすくする

効果がありますね。

●行頭に「●」のマーカーや「1」などの数字を入れて
ポイントを強調することで、伝いたいことを明確に伝え、記事を印象付ける役割も果たします。

●流れの手順の説明やリンクを張ることで項目にすぐに進めるように、
メニューとしての役割を持たせる使い方もあります。

新しい情報を提供する。
ブログにとって欠かせない命題の一つで
ブログに訪問する方は、それらの情報を期待していることが多いですね。

情報が、キチットと分かり易いように整理されていることが
ブログの良し悪しを決めると言っていいでしょう。

文章の構成においてはインデント、段落や段組みなどは

●いかに情報を整理するか
●いかに文章を読みやすくするか

の視点から使用されています。

箇条書きを利用するのも同じの考え方からです。


■箇条書きで表示するマーカーや数字の設定。

<ul>タグ(順序なし)
を使ってのマーカーの表示は、自動的に「●」「○」「■」が表示されましたね。

<ol>タグ(順序あり)
では、算用数字が振られましたが
もっと細かく該当する項目が
掴みやすいように「英文字」や「ローマン数字」などを使って階層を明確に表示したいときがありますね。

マーカーや数字を置き換えるときは
<list-style-type >プロパティの<type>プロパティを使用することになります。

それらプロパティやタグを使用するには
HTMLタグの直接書き込みとCSSへの定義があります。


【マーカーの置き換え】

■ <list-style-type>形式

<list-style-type>は

<@タグ名 Astyle="list-style-type: Bマーカーの種類">の形式をとります。

属性のデフォルト(初期値は)<disc>(黒丸)になっています。

この形式は、<ul>、<ol>の両要素で使用できますが

●表示順序には関係がない、箇条書きの項目には<ul>要素を。
●「1、2」や「a、b」などのように、 表示される順序が重要な箇条書きは<ol>要素で。

と使用する要素を使い分けましょう。

とくに<ul>要素で、<list-style-type>形式を使用するのは、
リストマーカーの黒丸や四角の種類を変更する時くらいです。

    注
   ●list-style-type
    のタグやプロパティ形式はチェックしておきましょう。

   ●箇条書きのCSSで使用します。

【資料1】
マーカーの種類

none
disc
circle
square
decimal
lower-alpha
upper-alpha
lower-roman
upper-roman

↓ IEでは未対応です。
hiragana
katakana
hiragana-iroha
katakana-iroha
cjk-ideographic




⇒ なし 
⇒ 黒丸 (●)
⇒ 白丸 (○)
⇒ 黒四角(■)
⇒ 算用数字(1 2)
⇒ 英小文字(a b)
⇒ 英大文字(A B)
⇒ ローマン数字小(@A)
⇒ ローマン数字大(TU)


⇒ ひらがな(あい)
⇒ カタカナ(アイ)
⇒ ひらがな・いろは(いろは)
⇒ カタカナ・イロハ(イロハ)
⇒ 漢数字(一二三)


【<list-style-type>形式:タグの使用例】

<ol>
<li style="list-style-type:decimal">那覇市
<li style="list-style-type:lower-alpha">沖縄市
<li style="list-style-type:"upper-alpha">浦添市
<li style="list-style-type:lower-roman">宜野湾市
<li style="list-style-type:upper-roman">豊見城市
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市


上記の例は
<ol>要素の中に、複数の<li>要素を使った箇条書きの例です。

<list-style-type>プロパティを
<li>要素の中に記入する方法を取っていますね。

decimal(算用数字)、lower-alpha(英小文字)と異なる属性を指定しています。
その属性に対応した記号が表示されています。

本来は、このような入り乱れた記号、統一されない使い方はしませんね。

記号類を変更するプロパティ<list-style-type>は
箇条書き全体を括る<ol>要素の属性
として記入するのが、統一性をもった表示になります。

<ul>要素でも同じ使い方になります。

「list-style-type形式」

【タグ形式】
<ol style="list-style-type:decimal">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
  <ol style="list-style-type:lower-alpha">
  <li>宜野湾市
  <li>豊見城市
  </ol>
</ol>


【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

<ol>要素の中に
「入り子」として再度<ol>要素を組み込んだパターンです。

最上位の<ol>の値<decimal>は、入り子の<ol>を含めますが
入り子の<ol>が新たに値を<lower-alpha>としていますので
各々の<ol>で括られた各<li>は各<ol>の値で表示されます。

最上位の<pl>の値と入り子の<ol>の値を継承する<li>の範囲を掴んでおきましょう。


CSSでは、<ol>(親)の方での指定になりますので、
形式を覚えておきましょう。

以前に確認した「テーブル」のHTMLタグと同じような性質です。



<list-style-type">に準じる(仲間)プロパティには
●<list-style-image>   = 記号の替わりに画像を用いる
●<list-style-position> = 記号や画像の表示位置を指定する
が有ります。(後述します。)


■<type>形式

<type>形式の特徴として
<li style="list-style-type:decimal">の値<disc><decimal><lower-alpha>
のようなマーカーの種類の指定ではなく、

<ol type="1">のように
1、2、3(算用数字)a、b、c(英小文字)を直接書き込んでマーカー(段落番号)を振る形式です。

    注
   ●日本語入力ソフト=ワードでは
   「● ○ ■ 」のマーカーを振る形式は「箇条書き」
   「1、a、T」などの数字を振る形式を「段落番号」と称しています。

   このページでは値の呼び名を「段落番号」とします。

タグは
 <ol type="段落番号">
  <li>項目
 </ol>
の形式です。

【資料2】
段落番号

1
a
A
i(アルファベットのi)
I(アルファベットのI)

⇒ 算用数字
⇒ 英小文字
⇒ 英大文字
⇒ ローマン数字(小)
⇒ ローマン数字(大)

   ※注 ⇒ ローマン数字は漢字変換数字の「@、T」ではなく、
         アルファベットの「@、T」 を使用します。

  
【タグの使用例】
<ol>
 <li type="1">那覇市
 <li type="a">沖縄市
 <li type="A">浦添市
 <li type="i">宜野湾市
 <li type="I">豊見城市
</ol>

【表示例】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
  5. 豊見城市

この形式でも
基本的には記号類を変更する
プロパティ< type="段落番号">の記入箇所は

箇条書き全体を括る<ol>要素の方に属性

として指定します。

「type形式」

【タグ形式】
<ol type="a">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
   <ol type="i">
     <li>宜野湾市
     <li>豊見城市
   </ol>
</ol>

【表示】
  1. 那覇市
  2. 沖縄市
  3. 浦添市
    1. 宜野湾市
    2. 豊見城市

「type形式」の方が、
段落番号の形状が分かりやすく、使いやすいですね。

「ひらがな」「カタカナ」や「いろは」などには対応していませんが、
簡単な箇条書きには、用意されている「段落番号」で十分に組み合わせが出来ますので使い慣れましょう。


■文章段落(p)で分けられた箇条書きの番号を連続数字に。

ひとつの文章(段落:p)の途中に箇条書きを表示して、次の文章(段落)を表示したあと、その下に2個目の新しい箇条書きを作ると、段落番号はスタートの同じ数字(1)からになりますね。

文章が一つの流れで、箇条書きも文章とともに続く形で、
文章の分け目に入れる箇条書きの数字は、前の箇条書きから続く連続した数字にしたい時があります。

 <p>段落1   ← 段落1、2は一つの文章の流れ
   箇条書き@ 
 </p>
 <p>段落2
   箇条書きA ← 箇条書き@から続く連続番号 
 </p>

段落をまたがった箇条書きの番号を連続の番号にする

段落1
 <ol type="1"><li>項目1<li>項目2</ol>
段落2
 <ol start="3"><li>項目3<li>項目4</ol>

の形式にします。

タグの種類には

 <ol start="●">
 <li value="●">

が有りますが、使う要素が異なります。

文章段落をまたがった箇条書きの連番:例

中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
  1. 「三国志」とは紀元後3世紀、後漢の滅亡後の歴史物語。
  2. 三国は、魏・呉・蜀を言う。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
  1. 赤壁の戦い=呉、蜀の連合軍と曹操の率いる魏との戦い。
  2. 蜀の武将「趙雲」の活躍も見逃してはならない。

箇条書きの番号が文章の段落をまたがって、連続した表記になっていますね。

そのほかに
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市
のように、途中から連番を変更するときには

<ol type="1">
 <li>那覇市
 <li>沖縄市
 <li value="5">浦添市
 <li>宜野湾市
</ol>

<li>タグに value属性 を指定します。
value属性で番号を変更すると、以降の<li>要素は変更した番号から連番で表示されます。


次回の「箇条書き」は

●マーカーや番号の表示位置
●HTMLでの(マーカーの代わりの)画像表示

を確認します。




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

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



2010年07月12日

箇条書きの基本(1)

■ 5-26 文章の整理とビジュアル化

ブログの内容を文章だけで表現するには限界がありますね。

訪問したユーザーは、「読む」と同時に「見る」こともしています。

内容の「区切り(段落)」や文章の「グループ化」を行い、視覚的に表現することは
「読む理解」と「見る理解」の双方のメリットが生かされ、分かりやい文章としてとらえられます。

前回の「段組み」を使う方法も、分かりやすい文章の構成として確認しましたが、
ほかの要約の方法には「箇条書き」もあります。

「箇条書き」は
●情報を簡潔にまとめ、読みやすくするとともに
●要点をまとめることで見やすくする、ビジュアル的な側面。
●箇条書きに、記事内の項目をリンクするメニューの役割も果たせます。

読み手側に要点を示し、記事を印象づけることは、ブログの「欠かせない命題」のひとつです。


■ 箇条書きの種類

HTMLで作成する箇条書きには次の3種類があります。

@ 順序なし箇条書き(●箇条書きリスト)
A 順序あり箇条書き(●連番つきリスト)  
B 定義型箇条書き   
⇒ <ul要素>
⇒ <ol要素>
⇒ <dl要素>

    注
   ●箇条書きタグは「ブロック」要素です。

………

@ 順序なし箇条書き

単に「箇条書き」と言う時は、順序なしのことです。

【順序なし(箇条書き)の表示形式】
沖縄県の市町村・人口・世帯数   (2009年統計)
  • 那覇市
    • 人口=312、000人
      • 世帯数=122,000世帯
  • 沖縄市


【<ul>要素と<li>要素】

順序無し箇条書きリストを作るタグは
<ul>と<li>を組み合わせて使います。

  ul = Unordered lists(order = 順番・順序  un = 否定)
  li = list item(list = 表・名簿  item = 項目・品目) 

    注
   ●ul は「Unnumbered lists」という説明もあります。

●<ul>要素は箇条書きにするリストの範囲を、範囲の中に<li>要素が入る形になります。
●<li>要素は各項目です。

<ul>
<li> 項目 </li>
<li> 項目 </li>
</ul>

の形式をとります。

●各項目(リスト)の先頭に黒丸のマーカー(●)が自動的に表示されます。

●順序無しの箇条書きは
項目の順番を気にしなくてもいいような情報の場合に適しています。

箇条書きはいくつかの項目の並びですね。

    注
    ●閉めタグの</li>は省略することが出来ます。     
    ●</ul>の閉めタグは省略できません。


【<ul>タグの使用例と表示】
【タグ使用例】

沖縄県の市町村
<ul>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ul>

【タグの記入】
※タグの記入は、各タグ、各項目を改行無しの形で記入します。

沖縄県の市町村<ul><li>那覇市</li><li>沖縄市</li><li>浦添市</li><li>宜野湾</li></ul>
【表示】

沖縄県の市町村
  • 那覇市

  • 沖縄市

  • 浦添市

  • 宜野湾市


    注
   ●箇条書きの<ul><ol><dl>タグはブロック要素のため、
    箇条書き項目の前後に一行の空白行が自動的に表示されます。

   ●タグの記入は、改行無しの記入になります。

   
【<li>要素に入り子の形式】

●<li>要素の中に、<ul>で括った「箇条書き」を入れることもできます。
 その形を「入り子」と言います。

●入り子にした新しい箇条書きのマーカーは、親の黒丸(●)に対して白丸(○)を表示します。

●その白丸の<li>要素の中にも、また入り子の形式で新しい箇条書きを挟むことができます。マーカーは黒四角(■)です。

箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村名
<ul>
<li>那覇市
<ul>
<li>
人口約31万2千人</li>
</ul>

</li>

<li>沖縄市
<ul>
<li>
人口約13万人</li>
</ul>

</li>
</ul>


【表示例】
沖縄県の市町村
  • 那覇市
    • 人口約31万2千人
  • 沖縄市
    • 人口約13万人

標準マーカーの種類(デフォルト値)は、上位の階層から
黒丸(●)、白丸(○)、黒四角(■)の順で表示されます。

このデフォルトで表示されるマーカーを、CSSの「list-style-type」プロパティ
で変更したり、画像に差し替えたりすることができます。

シリーズの後半で確認します。


………

A 順序あり箇条書き
  (連番つき箇条書きとも言います)

【順序ありの表示形式】
沖縄県の市町村名・人口・世帯数   (2009年統計)
  1. 那覇市
    1. 人口=312、000人
      1. 世帯数=122,000世帯
  2. 沖縄市


「順序あり箇条書き」は項目の頭に順番を表す1,2の数字がデフォルト値です。
下位の階層にも同じ数字が振られます。


【<ol要素>と<li>要素】

●<ol>タグは、項目の頭に1,2の数字を表示します。

振られた番号に項目の重要度の順番を含みます。

<ol>
<li> 項目 </li>
<li> 項目 </li>
</ol>
の形式をとります。<ul>要素と同じですね。

    注
   ●<ol> = Ordered lists 「order=順番・順序・秩序」
   ●<ol>要素もブロック要素です。

順序あり箇条書き
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市</li>
<li>沖縄市</li>
<li>浦添市</li>
<li>宜野湾市</li>
</ol>

【タグの記入】
※タグは<ul>と同じように改行無しの形で記入します。
【表示例】
沖縄県の市町村
  1. 那覇市
  2. 沖縄市
  3. 浦添市
  4. 宜野湾市

●<li>要素の中に
順序あり箇条書き<ol>や
順序なし箇条書き<ul>で括った「箇条書き」を入れることもできます。

●入り子の箇条書き<ol>の数字番号は親と同じ数字表記になります。
●入り子の「順序なし箇条書き<ul>」ではリストにマーカーが表示されます。
●入り子の数には制限は有りませんが、読みやすさを考え使用しましょう。

順序あり箇条書き:入り子形式
【タグ使用例】

沖縄県の市町村
<ol>
<li>那覇市
<ol>
<li>
県庁所在地</li>
<li>人口=約31万2千人</li>
</ol>

</li>

<li>沖縄市
<ul>
<li>
那覇市に次ぐ第二の市</li>
<li>
人口=約13万人</li>
</ul>

</li>

<li>浦添市</li>
<li>宜野湾市</li>
</ol>


【表示例】
沖縄県の市町村
  1. 那覇市
    1. 沖縄県の県庁所在地
    2. 人口=約32万人
  2. 沖縄市
    • 那覇市に次ぐ市
    • 人口=約13万人
  3. 浦添市
  4. 宜野湾市

リストで表記される「1、2」などの算用数字は
CSSの設定でアルファベット「A、B」「a、b」やローマ数字「T、U」「@、A」などに変更ができます。

箇条書きでリストの数字開始番号(途中の数字から始まるリストなど)
の指定も可能です。


………
B 定義型箇条書き

辞書のように「見出し語」と
それに対応する「説明文」を対にして一覧表示する形式を言い、定義リスト、用語リストとも言います。

<dl>、<dt>、<dd>の三つのタグを使います。

 dl = definition lists     「definition = 定義・語義・限定」
 dt = definition term     「term = 期間・任期・関係・間がら」
 dd = definition description  「description = 記述・描写」

【定義型箇条書きの表示形式】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万2千人。
………
沖縄市
………。


【<dl要素>】

<dt>で「定義名」
<dd>で「定義の説明」を示し、
それを定義型リストとして<dl>で括る形式のことです。

<dl>の中に直接入れるものは
「見出し(定義名)」を表す<dt>と、それに対応する
「説明文(定義の説明)」の<dd>の要素の2種類です。

基本的な使い方では

<dl>
<dt> 見出し(定義名) </dt>
<dd> 説明文(定義の説明) </dd>
</dl>

<dl>で括る形式です。

<dd>には、さらに入り子として、他の段落や箇条書きを入れることができます。

定義型箇条書き
【タグ使用例】

沖縄県の市町村
<dl>
<dt>那覇市</dt>
<dd>沖縄県の県庁所在地、人口約31万2千人。<br>戦後に隣接する首里市、真和志市、小禄村が合併。</dd>
<dt>沖縄市</dt>
<dd>米空軍、嘉手納飛行場の東から南側に隣接する市。<br>カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改名。</dd>
</dl>


【表示例】
沖縄県の市町村
那覇市
沖縄県の県庁所在地、人口約32万人。
戦後に隣接する首里市、真和志市、小禄村が合併。

沖縄市
米空軍、嘉手納飛行場の東から南側に隣接する市。
カタカナ表記の「コザ市」から1974年に美里村との合併を機に「沖縄市」と改称。

定義型箇条書きは
見出しがあり、本文が続く辞書のような書き方になっていますね。

形式的には、縦型のテーブルを配置したようになっています。

この定義型箇条書きの
 ●<dt> 要素は項目の「見出し」を表示する意味から
  <ul><ol><dl>の要素は入り子にはなれませんが、
 ●<li>要素や<dd> 要素の中には
  <ul><ol><dl>の各要素を入れることができます。


@ 順序なし箇条書き  
A 順序あり箇条書き  
B 定義型箇条書き

の箇条書きには、各々の特徴がありますね。

それらの特性を上手く使用して
階層構造的な情報を整理して見やすく読みやすくすることに努めましょう。

次回は具体的に
HTMLタグ、CSSと絡んだプロパティを使用して、マーカーや数字の変更などを確認します。




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

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




2010年06月24日

文章の段組み(2):table

■ 5-25 <teble>タグで段組みを作る

前回は<float>による記事の段組みを確認しましたので、
同じ段組みの形式を<table>タグを使って作成する方法を確認します。

<table>要素は
情報を整理して、統計表やグラフなどを作成する機能に優れ、表だけではなく記事や画像などの配置に自由度の高いHTMLタグになっています。

テーブル作成機能を使うことで、罫囲みや段組みなどに応用して、結構使われています。

<table>は、細かい設定ができ、表を作り慣れている人にとって、ある程度の出来上がりのイメージが掴みやすい重宝するプロパティです。

便利な反面
表(テーブル)を作るためにはタグを数多く使用するので
HTML構文が複雑になり、表示や処理速度が遅くなるのではという懸念もあります。

<table>はCSSプロパティとして推奨されています。

基本的には、HTMLだけの使用を考えるより
CSSに定義して装飾することが望ましい流れになっています。

CSSに定義するには
HTMLの構造や理屈が理解できないと、HTMLの範囲、CSSの領域の判断がつきかねます。

<table>で段組みを作成するにも
<table>の機能がよく理解できていないと段を組むことも難しいです。

段組みを作成しながら
<table>の特性と、そのCSSの定義を確認します。

<table>の機能は下記の参照を。




【<table>段組使用】

【<table>の構造形】

<table>
 <tr>
    <th>●</th>
 </tr>
 <tr>
    <td>●</td>
 </tr>
</table>

⇒tableの親要素(表・目録)
⇒table row(tableの並び・列)
⇒table header(頭・タイトル)


⇒table data(データ)


の形式ですね。

文章の段を左と右に組むので、
<td>のデータセル(ボックス)は、左セル用と右セル用の2個作ります。

<td>の横へのセルの並びは
  <tr>
    <td> 文章@ </td><td> 文章A </td>
  </tr> 
<tr>タグの中に
<td>タグを2個、横に並べて記入する形ですね。

<th>〜</th>の
項目タグは「段組み」には必要のないタグですので削除します。


段組みを作成してみましょう。

■ 段組み作成

テーブルタグ記入

<table border="1px" cellspacing="12" cellpadding="0">
<col width="48%>
<col width="48%>
<tr>
<td> 文章@ </td>
<td valign="top"> 文章A </td>
</tr>
</table>

……………………

タグの説明

<table
border="1px" cellspacing="12" cellpadding="0">

<col width="48%">
<col width="48%">
<tr>
<td valign="top">
文章@
</td>
<td valign="top">
文章A
</td>
</tr>
</table>

⇒テーブルの設定(開始)
⇒罫線の太さ
⇒セルとセルの間隔
⇒セルと文章との間隔
⇒左のセル(ボックス)のサイズ
⇒右のセル(ボックス)のサイズ
⇒テーブル行の設定
⇒左データセル開始・topから表示
⇒文章表示
⇒左データセル閉じる
⇒右データセル開始・topから表示
⇒文章表示
⇒右データセル閉じる
⇒テーブル行の閉め
⇒テーブルの閉め

<table>で作成する、段組みの順序が分かりやすいように
最初は罫線を入れたテーブルを作り表示します。

<table>タグの種類は、下段にまとめていますので、タグを確認しながら
HTMLタグを記入をします。

●<table>の開始タグに

 <border>     ← 罫線の有無(px単位)
 <cellspacing>  ← セルとセルの間(スペース)
 <cellpadding>  ← セル内の文章の表示(セルの罫線からの空き)

必要な属性と属性値を指定します。

●<col width="48%>
は文章を表示するデータセル<td>の左右サイズです。
親要素の<table>で指定することによって、入り子になっている<td>に適応されます。

また、該当する<td>タグの中にセルの幅を直接書いてもかまいません。

  例 = <td width="48%>

<td>にセルの幅を記入したときには、親要素の<table>の
<col width="">の属性は必要の無いタグになりますので、削除します。

●<tr>は「table row」の意味ですね。テーブルの横の「行」の定義です。

「row」は「列」という英語ですが
ここでは「行の定義」ですので意味を取り違わないように。
(縦に<td>を配置するときは<tr>との組み合わせ方があります)

<tr>タグ
記入を忘れると、テーブルは完成しません。

<td>は「table data」の省略形。
データセルです。
文字や画像など、テーブル内に表示する要素を入れ込みます。

<td>属性に値を書き込むことによって、変化が付けられます。
属性と属性値には

 <background-color="・"> ← セル内のバックの色(下地) 
 <align="center"> ← データ(文章)の表示位置  
 <valign="top">  ← データ(文章)の表示を開始する位置

などがありますね。


<table>で実際に文章データを入力して段組みにします。
「文章」には利爺の書いた記事の一部を使用します。


テーブル作成の基本は、下記の
●【HTMLの形式】のような改行無しでの各タグの記入ですね。

「改行無し」の詳細については、上記リンクのページ参照。
  ■ テーブル作成とその応用(1)

【HTMLの形式】
<table border="1px" cellspacing="12" cellpadding="0"><col width="48%><col width="48%><tr><td>中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド</td><td valign="top">ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。</td></tr>></table>

   ↓
【表示1】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


【表示1】はテーブルの作成ですので、罫線が表示されています。

@記事表示領域内におけるテーブルの位置と上下左右の各余白
Aテーブル内の各セルの余白の取り具合を確認して

問題が無ければ
<table border="1px" cellspacing="12" cellpadding="0">
  ↓
<table border="0px" cellspacing="12" cellpadding="0">

赤字の罫線の値を「border="0px"」にするか、削除して罫線を表示しないようにします。

【表示2】

「段組みの表示」
…………
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。
…………

罫線を表示しない段階で
<table>で作る「文章の段組み」の完成です。



【注意すべき点】

【表示1、2】では、文章の送りに微妙な違いがありますね。

【表示1】では<table border="1px">の罫線(1px)が表示されているため、
個々のデータセル内の文章領域から、左右の罫線の太さの「計:2px」のスペースを使っているためです。

わずか「2px」でも、表示に影響がでますので
罫線無しの表示を確認して、文章の切れ目を調整することが望ましいです。

下記の【表示3】【表示4】も同じ理屈です。

<float>で作る段組みより、<table>で作る方が割と簡単に出来ますね。


■ 文章の段組を罫線で囲ってみる。

参考記事や引用記事、あるいは記事を文章を罫で囲んで強調するときがありますね。
罫囲みのタグの組み合わせは
今回の段組を作った<table>要素全体を<div style="margin:>〜</div>で括ることで楽に作成出来ます。

<margin>で指定する外罫(破線)は、<table>の表の外側の罫と同じ位置に引きます。

<table>の表の外側の罫と同じ位置の<margin>指定は
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;">
または
<div style="margin-right:12px; border:border:1px dotted;border-color:blue;">

として、破線の色は「青」にしています。

【HTML】
<div style="margin:0px 12px 0px 0px; border:1px dotted;border-color:blue;"> 【 table 要素 】
</div>

<table>要素を外罫の表示のための<margin>で括ります。
   ↓
【表示3】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


<table>の外罫と<margin>の罫が重なって表示されていますが
破線の色が青のため確認しにくいです。

テーブル内の余白も全て、思い通りの空きになっています。

<table border="1px" cellspacing="12" cellpadding="0>
の「 border="1px"
を削除して、罫線無しにします。
   ↓
【表示4】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ド
ラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


囲み罫の中に、段組みの文章が表示されました。

この例では、ブログの記事表示域内に表示されるように
<col width="48%>
「%」を使い、相対サイズで設定しています。

CSSで定義しているブログの記事域はほとんど「px」の単位で設定しています。

「px」のような絶対サイズで指定する時には、表示域のサイズを超えないように気を付けましょう。

<table>では、各セルのサイズが決まっているため
表示領域内にスムーズに表示できるので「カラム落ち」の心配があまり有りませんね。

    注
   ●カラムとは(column) 縦の列を言い
   ホームページやブログレイアウトのフレームで構成する列数のこと。
   1カラムは1列、2カラムは2列、3カラムは3列の構成となる。

………

以上の形が<table>を使った「段組み」の方法です。
罫線を表示しないことによって、前回確認した<float>の段組みと同じような形になりましたね。

段組みの方法を応用することで
文章と画像、画像の組み合わせなど、適切なレイアウトができます。

ブログの「アフィリエイト」の商品紹介でも、<table>機能を使って、
商品と画像をうまく組み合わせて、訪問した方の目をひいています。

<table>は、いろいろな形に応用ができ、便利な機能を持っていますが
あくまでも表作成が目的だと言う流れです。

段組みに<table>を使うことは、流れに背くようですが

個人的には
代替できるHTMLタグは、タグの使い方を間違えなければ、大いに使っていいと思っています。

……

■ 段組み用のテーブルをCSSに定義する

段組み用のクラス(セレクタ)を
「.dangumi table」  と名前を仮に付けます。
クラス名の最初の「 . 」は必ず付けます。

段組み用テーブル:CSS

.dangumi table{
text-align:left;
vertical-align: top;
cellspacing:12px;
cellpadding:0px;
}

.dangumi td {
text-align:left;
vertical-align: top;
}

⇒classの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セルとセルの間隔
⇒罫線と文章の余白
⇒セレクタ閉め

⇒データセルの呼び出し
⇒文章の開始位置(左揃え)
⇒文章の表記位置(上から)
⇒セレクタ閉め

CSSには
セレクタ(クラス)名に属性(プロパティ)と属性値(値)を記入します。

文字の
●文字の大きさ    
●文字の種類   
●行の高さ(行送り)

⇒ font-size:12px;
⇒ font-weight:bolder;(normal)
⇒ line-height:1.5em;

などは定義しなくてもいいですね。
CSSのセレクタ「body」や「text」で定義しているので、
定義が無ければ形式が継承され適用されます。

段組み内の
表示書体の形状を変えたい時は、上記の要領でCSSに定義しておきます。

今回は
文章を段組みで表示するためのテーブル機能を使用しますので

段組みの表示には、テーブルの罫やセルの罫などの細かい定義は必要ないですが

このクラスを使って統計表などのテーブルを作るだろう
ことを考えてCSSには定義しておきます。


●罫の太さ  
●罫の種類  
●罫の色

⇒ border:1px;
⇒ border-style: solid;
⇒ border-color:#000000;

は統計表などを作る時は必要な要素ですので定義しておきまます。

セルの
●バックの色
 
⇒ bgcolor:#000000;

も必要ないですが、
段組みの強調のために使うことも有りますね。

段組み用HTMLタグの記入

<div class="dangumi table">
<table>
<col width="48%>
<col width="48%>

<tr>
<td>文章@</td>
<td>文章A</td>
</tr>
</table>
</div>

HTMLタグに記入している
●<col width="48%>のセルのサイズは
CSSに定義せずに、

HTMLタグの直接記入で使いましょう。

CSSにサイズを指定しておくと
他のテーブル作成に使う時にも
定義されたセルのサイズで表示されてしまい、応用が難しくなります。

【表示A】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


文章を罫で囲む時は
<div style="margin:0px 12px 0px 0px; padding:12px;border:1px dotted;border-color:blue;">【入れ子】</div>

のタグに
<div class="dangumi table">〜</div>を入れ子にします。
   ↓

【表示B】
中国の「三国志」が好きな日本人は多い。
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公
開された根強い人気の歴史ドラ
マである。
漢(後漢)帝国の末裔、劉備玄徳と、血を分けた兄弟にも類する諸葛亮孔明・関羽雲長・張飛翼徳らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。


以上がCSSを使った「段組み」になります。

テーブルを使った、文章の段組みでは
各セルに文章を行数などを考え、バランスよく入れる
と言う作業があります。

各セルが独立していますので、AセルはAセルに流し込まれた文章を、
BセルはBセル用の文章を表記するようになっています。

ブログでは「組版」をそれほど重要視していませんので、

例えば、
新聞や印刷・出版で人気のある「組版ソフト」の「クォーク・エクスプレス」(QuarkXPress)のように、セルとセルを連結(リンク)しておけば、一連の長い文章を流し込むと、Aセルで溢れる文章は、自動的にBセルに流れていく仕組みがありません。

その仕組みであれば、文章を気にすることなく、左右にセルを配置して、文章を流し込むという簡便な作業で済みますが、HTMLのテーブルでは無理なようです。

    注
   ●IE7やFirefox、Opera、Safariなどでサポートされる
    CSS3の「Multi Column」の機能では可能と言う情報が
    ありますが、未確認です。  

いづれ、ウエブで使うHTMLも、組版の考え方を取り入れる時代が
来るでしょうが、
 
今は
あるがままの機能を応用して十分に使い切りましょう。



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

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



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

2010年06月05日

marginとpadding・応用(1)

■ 5-21 枠内に余白を空ける


ネットで巡回していると
罫線囲みの文章(記事)をそのままベタで入力して表示しているブログが結構目につきます。

罫線と文字が密着して、書いてある記事が読みにくくブログレイアウトに全体的な息苦しさを感じます。

文章を書くことは、
いかに相手に読んでもらえるかに気を使うことが大切です。

読みやすい文意で表現することは勿論のこと、
分かりやすい、親しみやすいデザイン(組み合わせ・組版)にも気を使うべきであり、

アクセスが増えるということは、ブログを発信する側、つまり書き手側が常に相手のことを意識しているかどうかの問題でもあります。

読みやすく、見やすくするために余白を空けることは、ブログの重要な課題であり、
デザイン的には、余白(ホワイトスペース)を生かす感性や技術も必要です。

書籍や新聞でも、文章や画像の配置する「天・地・小口・ノド」などの余白の取り方、画像の段組や断ち切りの、いわゆる一定の考え方を反映した組版の基準があります。

それらの基準は、一言で言うと「いかに読みやすくするか」の考え方です。


■ margin(マージン)とpadding(パディング)

両方とも「余白を取る」タグですね。

●<margin>は、ヘリ、フチの意味で、余白を空ける起点がヘリからになっています。
●<padding>は、英文の(pad)= 当て物、詰め物などの意味で要素の「内側の余白」を指定します。

同じ余白でも
余白を取る基点が「ヘリから」と「内側から」に異なります。




【 margin = はヘリ(縁)からの余白です】

【図1】
m001.png
     ↑ 画像をクリック・元画像が開きます。

ブログなどのウェブサイトでは、記事の表示領域を、仮に400pxの横幅を取っていたとき、その中に文章を表示する場合は、領域の400px一杯を使いませんね。

横幅の左右から、使用文字の半分(半角)から一文字分(全角)の余白を取った範囲内に文章を表示しています。

横幅一杯の表示を避けるため、左右の各ヘリにスペース(空き)を設けていますね。
そのヘリから余白を取るタグが<margin>です。

【margin要素の属性】

margin-top
margin-right
margin-bottom  
margin-left  
margin

⇒ 上の余白
⇒ 右の余白
⇒ 下の余白
⇒ 左の余白
⇒ 四辺の余白

の種類と、上下左右をまとめて記入する <margin:上px 右px 下px 左px;>     
の形式があります。

余白を取る属性値の単位は「px」が多く使われていますが
<px><in(インチ)><pt(ポイント)>などの「絶対サイズ」での指定、または< %><em> などの「相対サイズ」でも指定はできます。




【 padding = 要素の「内側の余白」です】

【図2】
p004.png
     ↑ 画像をクリック・元画像が開きます。

<padding>は文字や文章、あるいは画像・図表などの領域を基点として余白を取るタグです。

内側の基点からの余白のため、その基点を基準に割りと自由に上下左右へ余白が取れます。


padding-top
padding-right
padding-bottom
padding-left
padding

⇒ 上内側の余白
⇒ 右内側の余白
⇒ 下内側の余白
⇒ 左内側の余白
⇒ 四辺の内側余白

の種類と、上下左右をまとめて記入する <padding:上px 右px 下px 左px;>     
の形式があります。

図1<margin>と図2<padding>における
余白の取り方を確認します。

例@
文章段落のベタ入力(margin/padding設定無し)


    注
   ●比較のために枠(破線・点線)を設定して、仮の表示領域とします。

中国の「三国志」が好きな日本人は多い。

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

表示領域(青破線内)へのベタ入力の例です。

文章の上下左右に余白(スペース)が無いために、文字と破線が接触して、文章やレイアウトに窮屈さを感じます。
ネット上のブログでは、画像と文章の組み合わせ、テーブルを使った表示などでその傾向が多く見られます。


例@のパターンに< margin>属性を使用して余白を設定してその形を確認します。

例A-1
<margin>タグを使って文章(段落)の左右に空白を取る。


【HTML】
<div style="margin:0px 24px 0px 24px;">文章</div>
  ↓
中国の「三国志」が好きな日本人は多い。

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

領域の左右に<24px>づつの余白を取りました。

<margin>属性とその属性値は
 <margin-left="24px";>
 <margin-right="24px";>
のように上・下・左・右と単体で一辺づつ記入してもいいのですが

<margin>属性には
<div style="margin: ●px ●px ●px ●px;">文章</div>
のように複数の属性値をまとめて指定するタグの書き方があります。

属性値は左から「 上・右・下・左 」の時計回りの順の値になっています。

このタグを使用するときには
●余白を取りたい各々の箇所に属性値(単位)を記入します。
●余白を取らない所は「0px」のまま省略しないで残しておきます。

タグが長くなる欠点がありますが
形が覚えやすく、指定が簡単で明確ですので使いやすい特徴があります。
<padding>も同じ形式です。

余白を取った分、内側に文章が追われていますね。
ブログではCSSで定義されている記事表示枠の、各ヘリからの余白サイズになりますが、

この例では
分かりやすいように設定した仮想領域の破線部分(青)がヘリになりますので、その位置からの余白になります。

余白を取るとき
文字揃えの考え方から「使用している文字の大きさの倍数」で指定するのが理想的といえます。

例では
使用文字の大きさは「12px」を使用していますので、12の2倍数(24px)の空きを作っています。


例A-2
<margin>タグを使って文章(段落)の上下に空白を取る。


【HTML】
<div style="margin:12px 24px 12px 24px;">文章</div>

例A-1のHTMLに「上」と「下」の余白の値を追加します。
値の挿入箇所は、赤字の箇所(上・下)ですね。

上から12px、下から12pxの空きを作りました。上・下の位置は直前の行からの距離になります。
(例では表示している破線の上下から)
  ↓
中国の「三国志」が好きな日本人は多い。

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


<margin>の範囲の「上・下・左・右」の全てに余白が設定できました。
HTMLをまとめると

【HTML】
<div style="margin:12px 24px 12px 24px;">文章</div>
の形式です。

領域の「 上から12px 右は24px 下からは12px 左は24px 」の余白を取りなさいと言う意味になります。


例A-3
<margin>タグの確認のため、余白の範囲を罫線で囲んでみる。


【HTML】
<div style="margin : 12px 24px 12px 24px ; border:1px dotted;border-color:red;">">

中国の「三国志」が好きな日本人は多い。

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

赤破線で表示した仮想領域のフチから左右に「24px」、上下には「12px」の余白を取り、赤の破線(border:1px dotted) を引いてみました。

罫線を表示してみると、marginの余白がどの位置か分かりますね。

●この囲み罫を生かして、中に文章を表示したいときには罫と文章がくっつきすぎて窮屈ですね。
●読みやすい表示にするため、さらに文章の前後や上下に余白を入れてみます。

文章が枠線内に入っていますので、
余白は囲み罫内に設定する必要がありますね。

ここで「padding」を使います。


<padding >の設定

例B-1
<padding>で、文章の左右に余白を取る。


タグに「padding:●px ●px ●px ●px;」を追加します。

さらに文章の左右(前後)に一文字分の余白を設定します。

<div style="margin:12px 24px 12px 24px;padding: 0px 12px 0px 12px;border:1px dotted;border-color:red;">

中国の「三国志」が好きな日本人は多い。

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


<padding >は<margin> のようにヘリからの余白サイズではなく
文章(段落)を基点として余白を設定するタグです。


例B-2
同様に文章(段落)の上下に余白を取る。


中国の「三国志」が好きな日本人は多い。

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

<div style="margin:12px 24px 12px 24px;padding:12px 12px 12px 12px;border:1px solid;">

罫囲みの文章の上下左右に、各12pxづつの余白が取れましたね。
罫で囲んだ中の文章が、ベタで入力した形より余白を取ったため読みやすくなります。

このタグでは
上下左右の余白を全て同じ値(12px)で空けていますので

<div style="padding:12px;">

のように値をひとつだけ書いてかまいません。<padding>の上下左右の全てから同じ値の余白を取ります。
<margin>のときも、同じ形式です。

例C
<padding>の背景に色(バックカラー)をのせる。


中国の「三国志」が好きな日本人は多い。

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

強調や注意を喚起するため、文章のバック(地)に色を乗せることが有りますね。

タグに
今まで作成したHTMLに
バックカラーの属性とカラーコードの属性値を(background-color:#カラーコード;)を追加します。

挿入位置は記事のバックで<padding>の要素内ですので、下記のHTMLの赤字の箇所です。

赤色の破線表示(border:1px dotted;border-color:red;)は削除します。   

<div style="margin:12px 24px 12px 24px; padding:12px 12px 12px 12px; background-color:#eeeeee;">


色の使い方や配色によって、ブログの与えるイメージが変わりますね。

注意を喚起する意味合いで、バックなどに色を使用するにしても、赤などの強い原色はなるべく避けます。

罫線も太過ぎては見た目が悪いので、デザイン的な面から判断して使用しましょう。


●<margin> や <padding>
を使って左右に余白を取るときに、注意すべき点は

<margin> の余白サイズと< padding> で取った余白サイズの合計が大きすぎると、文章の表示領域が小さくなります。

ブログの記事表示領域の左右サイズを考慮して、余白の数値を調整して設定します。

●記事表示領域の大きさは
CSSで定義されていますので、確認しておきましょう。

このブログは3カラム設定で
記事領域は左右400pxに取られていますので、領域の400pxを越えないように
テーブルや画像・罫囲みなどのサイズを設定しています。

……

<margin > <padding >
を使った罫囲みの文章の表示の一例でした。

この余白を取るタグは、画像の配置、文章の開始位置、表の表示などHTMLでは重要なタグのひとつです。二つのタグを使いきれると、制約のあるブログでもホームページのような表現ができます。

次回は
<padding> の細かい設定の確認と<padding >を使用した文章入力の方法を確認します。




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

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



2010年02月25日

テーブル作成とその応用(3)

■ 5-20 テーブルに画像を使ってホームページ仕様にする


ネットを巡回していると、アフィリエイトを展開しているブログをよく見かけます。

とくに物販をしているブログでは
テーブル機能を活用して、画像と商品説明を上手く組み合わすことで、興味を引くレイアウトをしています。

そのようなアフィリエイトブログに共通するのは、
画像やテキストにリンクを張っていることを「明確に伝えている」と言うことです。

行き先(リンク先)をはっきりと示し、数多くの商品を紹介しているページに誘導しています。

不安を感じさせないように、リンクを上手く使い、安心して商品が確認出来るブログを作り上げることは、アフィリエイトの基本でありかつ理想形といえます。

アフィリエイトには、これが100%という断定的な仕組みは無いと思っていますが、
相手(お客)のことを考えたページを作ることが基本中の基本です。


■テーブルに画像を使いリンクを張る

イラストや写真などの画像をうまく使うと、訪問した方にもブログの特性やイメージを伝えやすくなることは、過去記事の中でも確認してきました。

webでは、PDFやワープロソフトのように、画像をページに直接、貼り込むことは出来ませんね。

画像をテーブル内に貼るには
<img>タグで呼び出し、場所を指定して貼りこみます。記事の中に貼りこむのと同じ方法ですね。

テーブルに画像を貼り込む方法を確認しますが、
物販アフィリエイトでのテーブルの仕組みや、画像の利用方法を例として見て行きましょう。

テーブルに画像を使用するときの注意点。

@画像を配置する前にテーブルの左右サイズを決める。

 ●記事表示領域の左右サイズから、割り出してテーブルサイズを決め
 ます。

A画像の大きさをテーブルの左右サイズに合うように調整する。

 ●テーブルのサイズを指定しても、画像のサイズの方が大きいと、
  自動的に画像の大きさにテーブルのサイズが広がります。
 
 ●テーブルのサイズが重要ですので、画像もそれに準じます。

 ●使用する元の画像は大きくアップロード、表示画像は小さくする。
  (画像を使用するときの基本ですね)

B<table>の該当要素内に画像読み込みのURLを記入する。



@からBの注意点を必ずチェックしましょう。

サンプルテーブルの作成

サンプルテーブルを作るために、商品名・画像・説明記事を用意します。

サンプルテーブル用データ

●商品名
●商品画像
●商品説明




⇒ 沖縄特産油味噌
⇒ テスト用画像(miso-01.jpg)
⇒ ■細かく切った豚肉と味噌を砂糖で味を調整
   した甘辛風の豚味噌です。
⇒ ■内容量 100g
⇒ ■商品価格 500円

テーブル作成のタグ類はしっかり把握していますね。



作成するテーブルは、
@商品名は<th>要素の「行」
A商品画像は<td>要素の「行」
B商品説明も<td>要素の「行」
の「3行」のテーブルですね。

使用するサンプル画像はSeesaaブログに
「miso-01.jpg」
のファイル名でアップロードしています。

テーブル作成のHTMLは
<div class=".samp table">   
<table>
<col width="120">      
<tr>
<th>沖縄特産油味噌</th>
</tr>
<tr>
<td>
(画像:url)
(画像にリンク)
        
</td>
<tr>
<td>       
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品の詳細を見る(リンクurl)</td>
</tr>
</table>
</div>

⇒ CSSの適用

⇒ テーブル横サイズ

⇒ 項目名(商品名)


⇒ データ要素@
⇒ 商品画像
⇒ 詳細ページリンク
 

⇒ データ要素A
  ●商品の特徴
  ●値段などの概説 


⇒ 商品詳細ページへ


⇒ テーブル閉め
⇒ CSS閉め

以上のようなtableタグ組み合わせですね。

画像の表示は、テーブルのデータ要素@の中で
<img>タグを使用して

<td>
<img src=" 画像のurl " width="●" height="●" />
</td>

で呼び出しますね。

この時、同時に画像に詳細ページにジャンプするリンクを貼ります。
リンクは<target="_blank>タグで別ページで開くようにします。

この形式は、記事に画像を使用する時のタグの記入と変わりませんね。

データ要素Aでは商品の特徴を記入します。
訪問した方が興味を持ち、詳細ページに行くかどうかは
ここの表品説明の良し悪しにかかります。

下記のサンプルが出来上がったテーブルです。

【画像1】
特産油味噌
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。
■商品価格 500円
■内容量  100g
⇒ 商品詳細を見る
← <th>要素(商品名)


← <td>要素@

    商品画像
    詳細記事(ページ)へリンク






← <td>要素A
    商品説明
    
    商品価格
 
    詳細記事(ページ)へリンク


画像は、横幅をテーブル(例 width="120")と同じサイズに縮小して表示しています。

文字の表示位置(align)、テーブル罫線と画像の間の空き(padding)
罫線の太さ(border)テーブルのバック色(bgcolor)などを調整して、納得のいく形にしましょう。

この例では、商品名を表示するために、項目用<th>要素(セル)を使っていますが、<th>要素を使用しなくても、テーブルの表示ではエラーにはなりません。

<table>と<td>要素だけでの作成になりますので、案外スッキリした形になります。

試してみて下さい。


■ 画像にリンクを貼り込む

画像にジャンプ先を指定するリンクを張り込みます。
 
画像をクリックすると、他のページにジャンプするHTML形式は
<a href=" 詳細ページurl "></a>ですね。

<td>
<a href=" 詳細ページurl " target="_blank"><img src=" 画像url " width="●" height="●" /></a>
</td>


画像表示の<img …>タグを
<a href …>詳細ページへのリンクタグ(赤文字)で括ります。

この例では、
リンクの行き先を、元画像の表示にしていますが、

リンク先は、
「商品の詳細」を記述したページ、あるいは「商品販売元」のホームページにします。

商品販売元のホームページでは、
より詳しい商品の説明と商品購入用のフォームが設置されていますので、訪問した方をどの様に、そのページまで導くのかが、アフィリエイトの基本になります。

さらに
画像にリンクを張っただけでは訪問した方は迷いますので、
「画像をクリック・商品の詳しい説明ページが開きます」
のような案内文を記入しておきましょう。

商品説明の箇所にも
  「⇒ 商品詳細ページへ」
のように、テキストを用いたリンクも追加しておきます。

⇒ 購入のページへ
の表示はなるべく避けましょう。


案内に使った矢印記号は、その矢印の説明が無くても、
その向きによって利用者は無意識に使い分けると言われていますね。

 →(進む)  ←(戻る)  ↑(トップへ)

の感覚ですね。

矢印の代わりに、
目を引きつけるアイコンを貼り込むのもいい方法です。

テキストだけの商品紹介では、商品イメージを上手く伝え切れません。

ましてやネットでの商品販売ですので、商品のイメージを明確に伝え、クリック率を上げるためにも画像を上手く使う必要があります。

商品販売会社の広告バナーを張り込んだだけのブログをよく見かけますが、

バナー広告では訪問した方は、その商品の詳細が分かりません。
そのバナーをクリックをしたら

●購入させられるのではないか。
●騙されるのでは…。


などの警戒心や不安感があるのもいがめません。

「商品を購入する」「いつでもキャンセル出来ます」
などの表示もよく見かけますが、インターネットを利用しての購入者側の不安感は取り去れませんね。

購入する以前の問題として、ある程度の
「商品のことを知りたい」「他の商品と比較したい」

と訪問した方が思うのは、当たり前のことですので、最低限の
「商品説明」と「商品価格」の表示は無くてはならないものです。

ブログ記事の「続きを読む」と同じです。
導入の部分に興味が無ければ、記事を読まないですね。

アフィリエイトでも導入で失敗すると、
2度と訪問して来ないと思っていいでしょう。


明瞭に簡潔に表示して、
詳しい商品の説明ページに誘導する工夫が必要です。


■ナビゲーション風のメニューを作る。

ブログでよく見られる
ナビゲーションメニュー形式の商品紹介のページを
作ってみます。

紹介する商品は3点、
メインとする商品はテーブルサイズを大きくして、アピール度を高めています。

【画像2】
特産油味噌幸福の星砂琉球もろみ酢

■沖縄で生まれた健康飲料.
常備・健康飲料として大人気商品です。
■容量 900ml
■価格 1500円〜
(キャンペーン価格)
⇒商品の詳細を見る
■細かく切った豚肉と味噌を砂糖で味を調整した甘辛風の豚味噌です。ご飯の友として最適です。

■容量 500g
■価格 500円

 ⇒詳細を見る
■青や赤のカラーサンドと星砂を入れ、お守りやキーホルダーなどの製品にしています。お子様に喜んでもらえます。
■容量 ●g
■価格 150円

 ⇒詳細を見る

サンプルですので、商品の種類がバラバラです。
物販では、1ブログに1品目の商品をまとめ、
1記事に1商品を案内する形式が多いです。

雑多に種類の異なる商品を紹介することは、
訪問した方が、購入したい商品を絞れないことになります。

出来るだけ、種類を絞って
コンビニやスーパーでの商品陳列と同じように、1ブログ(コーナー)に1品目(棚)の形式を作り上げ各ブログがリンクされている形式を目指しましょう。

その形式が内部リンクと外部リンクの充実と言えます。


■商品の詳細サンプルページ。

リンクで開く商品の詳細ページです。
サンプルですので、イメージとして捉えて下さい。

【資料】
商品詳細のサンプルページ





琉球もろみ酢
ダイエット効果にもよく、健康飲料としても大変人気の有る一品です。
■希望価格 ●円(税込み)
■販売価格 ●円(税込み)
(キャンペーン特別価格・25日まで)
■容量 900ml
■発送 受付後4日以内
 ※発送費は当社が負担します
■在庫 50本

(一本から注文できます)
■商品代金のお支払いは、
⇒ 支払い方法のページを確認下さい。

【もろみ酢のほかの商品を見る】←クリック

■もろみ酢は
沖縄の代表的なお酒である「泡盛」の製造過程でみられる「もろみ」から作られます。

もろみには、豊富なアミノ酸とクエン酸が含まれており、疲労回復、抗酸化作用などさまざまな効果が報告されています。
酸味のほとんどがクエン酸由来であるため、一般的なお酢とは異なり、爽やかで、味はまろやかです。

ダイエット効果によく、健康飲料としても大変人気の有る一品です。


この商品詳細のサンプルページは

「テーブル機能」での作成、
あるいは文章の「段落機能」でも作成できます。

テーブル機能での作成は、
列を2個作成して<th>要素は省略、データ要素のみでの作成になり、罫線は表示しません。
左のセル(列)には画像を、右のセルには文章を配置しています。

テーブルの右スペースには、商品の詳細説明を入力して、
1商品を1頁として組み立てています。

段落機能での作成は、
段落を使って、ページの左半分に「画像」を右には文章を表示するように指示します。

段落を使うとブログの構成にも幅が広がり、多彩なレイアウトも可能になります。
使い方は段落のHTMLの時に確認します。

テーブルの使い方のシリーズを何度も確認して、しっかりと取得して下さい。



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

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



2010年02月12日

テーブル作成とその応用(2)

■ 5-19 テーブルの細部設定


ブログは、ホームページと異なって、ページ表現するにも制約があります。

その制約の元で、レイアウト的にホームページのような仕様に近づけるためには、テーブル機能を十分に使いこなすことが必要ですし、欠かせないものになっています。

とくに、物販のアフィリエイトでは、訪問した方に商品の画像を見せたり、商品の詳細を説明するのにテーブル機能が頻繁に使われています。

前回は
テーブル内の改行スペースが外に追い出される現象での、空白行を取り去る方法の

(1)ページの全改行を直接入力。
(2)テーブルタグのみを改行無しでの入力。


解決方法(1)を確認しました。

参照 
テーブル作成とその応用(1)
●統計データなどに使うテーブルを作成する
http://tosiji-dreamafi.seesaa.net/article/140029583.html


テーブル機能を確認して、タグの使い方を確認します。

(2)テーブルタグのみを改行無しでの入力。

テーブル内に自動で入力される改行(空白行)が存在するため、
テーブルの外に改行(空白)が追い出されて、意図もしない場所に空白が表示される結果になる。

と言う現象でしたら、

「テーブルを作るHTMLを、自動改行しなければいい」

と言うことになりますね。

テーブル内の改行を取り払って確認して見ましょう。

確認の前に
「この記事の詳細設定」の項目 ⇒ 「改行を<br/>タグに変換しない」
に設定変更した項目を、初期設定の
  ⇒ 「改行を<br/>タグに変換する
に戻しておきます。

【例1】
<
自動改行有りの入力

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">
ホテルA
</th>
</tr>
<tr>
<td width="110">
宿泊:20,000円 
予約可能
送迎出来ます。
</td>
</table>
</div>

の<br>改行ありの形式で入力していた各タグを
  ↓

【例2】
改行無しの入力

<div class="samp table"><table><tr><th bgcolor="#e0ffff">ホテルA</th></tr><tr><td idth="110">宿泊:20,000円<br>予約可能<br>送迎出来ます。</td></table></div>

の<br>改行なしの形式に変更します。
  ※<br>のタグの表示は見えませんが、自動的に<br>タグが
   入力されています。
  ※記事やタグの入力に邪魔になるので隠されています。

改行を取り払うと言うことは
タグ入力で空白を作らずに「例2」のように連続で入力することです。

テーブルのHTMLをその形式で入力してしまえば、
影響を受けていた記事部分でも「自動改行」を生かしたままでいいと言うことになりますね。

文頭から、改行を直接入力していく流れより、
テーブルの箇所だけの「改行無しの入力」の方が簡単ですね。

「例2」の赤文字で示した<br>
テーブル内での箇条書きのように、改行が必要なところにだけ、直接入力して強制改行をする方法です。

改行が無ければ一行で、また、長いテキストはセル内で「折り返えし」で表示されます。

テーブル作成の時は、
最初は「例1」のように記入したタグが分かりやすい入力の方法で記入して、
HTMLタグが間違いないことを確認してから「例2」のように「改行無し」の形式に変更することが望ましいです。

初めから「改行無し」の形で入力したら、
項目やデータ数の多いテーブルではタグの流れが掴みにくく、余計に煩らわしくなりミスも出やすくなります。

(2)の方法は割と簡単に出来ましたね。

その形式を使って、難しいと思っていたテーブル作成が上手くいきます。


■テーブル作成で比較的によく使うタグ。

テーブルの表示を細かく設定するタグは、数多く有りますが、比較的に使われているタグをまとめてみました。

【資料】
比較的使用されるタグ

【テーブル】
align 
align left
align right
caption
caption align 
【罫線】
border
border-color
border-style
border-collapse

【セル】
width
height
col
cellpadding
cellspacing

colspan 
rowspan  
【背景・背景画像】
bgcolor 
background
【文字】
text-align
font-size
font weight

font-color
font-face
line-height


= テーブルの表示位置(記事内)
= テーブルの回りこみ(右)
= テーブルの回りこみ(左)
= テーブルに名前を付ける
= テーブルの名前の表示位置

= 罫線を表示・罫の太さ
= 罫線の色
= 罫線の種類
= 罫線を重ねる(単線)

= セルの横幅
= セルの縦幅
= セルの横幅(table属性)
= テキスト位置からの余白
= セルとセルの間の空き
= セルの結合(横)
= セルの結合(縦)

= 背景色(各セル毎指定可)
= 背景画像(各セル毎指定可)

= 文字の表示位置
= 文字サイズ
= の字の太さ
= 文字色
= 書体
= 行間(行送り)


各プロパティ(属性)には、属性値が付きます。
属性値はテーブルのデザインを考えて設定するのが望ましいです。

一覧の赤文字で表示してあるプロパティ

基本的にはCSSに組み込み、その他はテーブル作成の時にHTMLとして入力した方が、融通の利く多様なテーブルが作れます。

参照 
テーブル作成とその応用(1)
●CSSのセレクタに、基本的に組み込んだ方がいいプロパティ類
http://tosiji-dreamafi.seesaa.net/article/140029583.html


例えばCSSに「width:100px;」のように、固定したセルの横幅を定義してしまうと、新しくテーブルを作る時にも、そのサイズが反映されたセルが作られてしまいます。

テーブル作成時にHTMLで「<width="●">」(下記:注参照)と入力した方が、応用の利いた、形の異なるテーブルの作成が楽になります。

ただし、項目のセル<th>やデータセル<td>に<width="●">と個々に横幅を設定するよりも、table属性の<col>を使用して
  
   ※ col = column(カラム、欄)

  <table border="1">  ← テーブル全体の罫線
    <col width="100">  ← 1列目の横幅
    <col width="150">  ← 2列目の横幅
     <tr>
     <th>
      ・ 
  </table>    

table要素での指定の方法が一般的です。

同じく
table bgcolor="#ffffff">
の指定では、テーブル全体のバックカラー(background-color・bgcolor)が指定され、

td bgcolor="#ffffff">
だと、該当するセルのみのバックカラーになります。

このことは
<table>要素は、テーブル全体を設定する親要素の役割を持ち、
その中に<tr>や<th><td>の子要素を包括(入り子)していることになります。

また<th>や<td>は<table>の管理の下にあるが
おのおの独立している機能が働くと捉えることが出来ます。


table用のCSSのセレクタは、いろいろな形のテーブルを作成する目的で、
各テーブルが共通、共有出来ることを考えて定義します。

記事を書くごとに新しいtableセレクタをCSSに定義する状態は避けましょう。


■項目数を増やす。
テーブル内の項目数を横に増やすには

【画像1】
komoku01.png
 ↑ 画像をクリック・元画像が開きます。

の形式です。
<tr>〜</tr>で括られた
<th></th>を連続で必要項目数分を追加します。

■データ表示用の行を増やす。
データ入力用の行を下の方に増やすには、

【画像2】
data01.png
 ↑ 画像をクリック・元画像が開きます。

の形式で、
<tr></td>〜</tr></tr>で締められる形の
括り部分を1単位として追加していきます。

■<tr>要素に収めるセルの数は合わす。
項目数が3列のテーブルに、データ列を2個しか設定していないと、列数が合わないことになります。

そのような時のテーブルの表示は、
罫線の無いセルが表示されるか、またはテーブルが崩れることになります。

列数を合わすには
<td></td>で中身(テキスト)の無いセルを作り、その空セルで数を合わします。

空セルで数を合わしても罫線が表示されなければ、
テキストの代わりに「&hbsp;」(小文字入力:非改行スペースの意)を入力します

テーブルにはシンプルなものから、統計表のような複雑なものまでありますので、項目の増やし方、データ部分の増やし方は理解しておきましょう。


■セルの結合
テーブルを作っていると、
セルを2個、3個分横に結合して使いたいとか、あるいは
縦に繋げたいと言うことも出てきます。

セルの結合の仕方は
横結合 = colspan="n"  ←nは任意の数字
縦結合 = rowspan="n"
  
のタグで、繋ぎたいセルの数(n)を入力します。
ただし、セルの数を合わすことに注意して下さい。

【例3】
セルの結合・セルのバックカラー

<div class="samp table">
<table border=1 cellspacing="16" bgcolor="#cccccc"
col width="80"
col width="150"
<tr>
<th>@列</th>
<th>A列</th>
</tr>
<tr align="center">
<td rowspan="2" bgcolor="#cbffff">縦セルの結合とバック色</td>
<td width="100">A</td></tr>
<tr align="center">
<td>B</td></tr>

<tr align="center">
<td colspan="2" bgcolor="#ffff00">横セルの結合とバック色</td>
</tr>
</table>
</div>

【下記のHTMLタグは確認しておきましょう】

「テーブル要素の属性・属性値」
●cellspacing="16"

 
●bgcolor="#cbffff"  
●col width="●"  
⇒ セルとセルの間隔を「16px」空ける。
  ※普通はcellspacing="0"を設定。
   サンプルの為、設定を変えています。
⇒ テーブル全体のバック色。
⇒ セルの横幅。
 
「データ要素の属性・属性値」
●rowspan="2" 
●colspan="2" 
⇒ 縦にセルを2個繋ぐ(数字は繋ぐセルの数)
⇒ 横にセルを2個繋ぐ(数字は繋ぐセルの数)

■「例3」の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■cellspacing="0"の時の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色

■CSS使用の表示例
   ↓

@列A列
縦セルの結合とバック色
横セルの結合とバック色


<table>の属性・属性値を変更することで、
見た目の異なるテーブルが作成できましたね。

とくにCSSを利用したテーブルは、テキストの表示位置から、罫線までの間にスペース(padding)を取っていますので、スッキリした感じの表になります。

今回、確認したことは、
ブログにテーブルを上手く利用して、ページのレイアウトをしていく基本になります。

次回は、ブログで使うことの出来る
物販のアフィリエイトで使用されている
テーブルと画像の組み合わせやリンクの設定を確認します。



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

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



タグ:HTML TABLE TR Th TD 罫線

2010年02月07日

テーブル作成とその応用(1)

■ 5-18 統計データなどに使うテーブルを作成する


■ テーブルを構成する要素(基本)
table(テーブル)とは
表計算ソフトのような「表」のことで、多くのマス目で成り立っています。

項目やデータで使っているマス目をセル(Cell=細胞、蜂の巣の穴)と呼び、用途に合った統計データ表の表記、あるいはそのテーブル機能を応用して、文章の段落やアフィリエイト用の商品紹介ページの作成など、ブログにも多用されています。

セルをまとめてテーブルを作る要素は、下記の四つのタグで構成されています。

【語意】
<table>
<tr>
<th>
<td>


= 表、目録、食卓
= table row ( row:並び、列 )
= table header ( head:頭 )
= table data ( データ )


<table>

<tr>

<th>

<td>



「テーブル(表)全体を定義」。<table></table>の中にテーブルを収めます。
●テーブルの中の「行を定義」。。<tr></tr>の中に<th>や<td>要素を収めます。
「項目を定義」。
<th></th>の中に一件の項目を指定します。
「データを定義」。<td></td>の中にデータを収めます。

の条件のもとで
各タグを組み合わすことでテーブル(表)が作成されます。

■テーブルの基本形


【画像1】
table05.png
 ↑ 画像をクリック・元画像が開きます。

各要素(属性、属性値)の使用方法は
「画像1」の形式になります。

実際に「画像1- 例2」の形式でテーブルを作ってみましょう。
【テーブルタグの形式】

<table border="1">
<tr>
<th>項目名@</th>
<th>項目名A</th>
</tr>

<tr>
<td>データ@</td>
<td>データA</td>
</tr>
</table>


【表示】

項目名@項目名A
データ@データA

シンプルなテーブルが表示されましたね。

HTMLタグの使用方法は

<table>
<tr><th>…</th></tr>
<tr><td>…</td></tr>
</table>

の形式がテーブル作成の基本です。

項目数の増やし方、データの行数の追加の方法は
次回の応用編で確認します。


■テーブルの罫線を調整する

罫線を表示するには<table>要素にborder属性を追加します。
  ※border=へり、ふち(縁)

<table border="1"
  ※border="1"の数字は線の太さを指定します。
   単位はpxですので、この例では「1px」の太さになります。

属性値「border」の指定がないと、文字だけが表示され
罫は表示されません。

表示されているサンプルのテーブルは
セルとセルの間隔が空いて、二重線になって表示されています。

このことは<table><th><td>の各要素

●table要素
●th要素
●td要素

= テーブルの外側
= セルの周囲
= セルの周囲

各要素ごとに別々に罫線を引いた結果です。

罫線の間隔を調整するHTMLタグはありますが
各要素に個別に記入するのは面倒ですので

CSSに新しいセレクタを定義して
HTMLの「table要素」では線の種類や太さなどの
細かい指定をする必要がないようにしましょう。

CSSに定義して適応すれば、テーブルを作るたびに
何度も同じタグを記入しなくてもいいようになります。

また、入力の間違いやソースが分かり難いなど
煩雑で非効率な作業が軽減されます。


■ 新しいtableセレクタをCSSに追加

CSSにはテーブル作成の上で基本的な

●項目やデータを表記する書体
●文字サイズ
●セル内の行送り
●文字の表示位置
●線(罫)の太さ
●線(罫)の色
●線(罫)の表示調整
●セルの内側の余白

を定義して

●セルのサイズ
●セルのバック(下地)色
●文字の色

などは
テーブル作成時に
直接にHTMLで書き込む形式にした方が簡便です。

CSSを適用することは
定義したプロパティを利用することで
形(種類)の異なるテーブルも作りやすい利点があります。

いくつかの形の異なるテーブルを作って表示した時にも
「見出し」や「罫線の太さ・色」「データ」の表示など、統一された見やすいレイアウトになります。

一般的に「table」要素には、細かい設定がされていませんので
CSSに定義して、自由度を広げておきましょう。


●テーブル用のCSSセレクタの記入例
セレクタ名を仮に「samp table」とします。

【CSS】
独自のテーブルセレクタを定義


.samp table {
font-size:12px;
line-height:1.3em;
padding:10px;
border:1px;
border-style:solid;
border-color:#b0c4de;
border-collapse:collapse;
}

.samp th {
font-size:14px;
font-weight:bolder;
text-align:center;
padding:10px;
}

.samp td {
font-size:12px;
font-weight: normal;
text-align:left;
padding:10px;
}


CSSに「class適用」のテーブル対応のセレクタを設定しました。



      参照の「 class・id 属性」は確認しておきましょう。
      CSSの定義で頻繁に使用します。

上記のテーブル用の「独自のテーブルセレクタを定義」のセレクタの記入例では
同じ内容の「プロパティ」「値」を各 class 毎(.samp table/.samp th/ .samp td) に定義していますが

table構造の親セレクタ「.samp table」に
使用書体・大きさ・罫線の太さや色・行送りなど、共通(共用)する定義は、まとめても構いません。


「.samp th」「.samp td」の各セレクタは入り子になりますので、親セレクタと異なる「プロパティ」だけの定義でもいいのです。

上位の「.samp table」の定義がそのまま適用(継承)されます。

CSSを適用して横3列・縦2行の
サンプルのテーブルを作成して見ましょう。

サンプルで作るテーブルのHTMLタグの形式は以下の通りです。

【HTML】

<div class="samp table">
<table>
<tr>
<th bgcolor="#e0ffff">ホテルA</th>
<th bgcolor="#ffe4e1">ホテルB</th>
<th bgcolor="#e0ffff">ホテルC</th>
</tr>
<tr>
<td width="110"
宿泊:20,000円
予約可能
送迎出来ます
</td>
<td width="110"
<font color="cd5c5c">
宿泊:6,300円
12日15日満室
送迎可能です
</font>
</td>
<td width="110"
宿泊:15,000円
週末予約可
送迎車あり
</td>
</tr>
</table>
</div>



「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。


    注
   ●プラウザの「Firefox」では、各要素の罫線が離れて表示
    されます。
    CSSに定義した罫線を重ねて表示するプロパティとその値
    「border-collapse:collapse;」がうまく作用していませんので、
   ●tableのHTMLに直接
    <table style="border-collapse:collapse;">
    を書き込めば、重なって一本の線になります。

「表示例」
  ↓

ホテルAホテルBホテルC
宿泊:20,000円
予約可能
送迎出来ます。
宿泊:6,300円
12日15日満室
送迎可能です。
宿泊:15,000円
週末予約可
送迎車あり。
   

テーブルは上手く作成されていますか。

作成したテーブルの上に数行にわたる空白があり、記事(文章)部分と離れた位置にテーブルが表示されますね。

このことは
teble作成時に自動的に入力された空白(<br>)が追い出された結果です。

見えない空白(<br>)がtableと記事の間に有ることが原因になります。


【空白行を取り去る方法】

空白行を取り去る(表示させない)には

(1)ページの全改行を直接入力。
(2)テーブルタグのみを改行無しでの入力。

の二つの解決方法がありますので、個々に確認します。

(1)ページ内の全改行を直接書き込む

空白行が表示される解決方法の一つで
文書に自動入力される改行<br>を直接入力に変更する方法。

  ⇒ ■ seesaaブログ・ヘルプ
    テーブル作成に関する注意事項


@ブログの「記事入力欄」の下方(※「画像2」参照)「この記事の詳細設定」の項目の
「改行HTMLのタグ変換」

「改行を<br/>タグに変換しない」
のラジオボタンをクリックして、改行タグを直接(手動)で入力する方式に切り替えます。

【画像2】
kizi01.png
 ↑ 画像をクリック・元画像が開きます。

Aブログの入力設定では
キーボードの「エンターキー(Enter)」を押すと自動な改行になっています。

テーブルを作成するときに
自動改行になっているとテーブル内に存在する改行(空白)がテーブルの外側に追い出され
予想もしない位置で改行が働く結果になり、テーブルの表示位置(場所)が大きくずれます。

B「改行を<br/>タグに変換しない」にすると、自動的に実行していた「改行」が無くなります。

「改行」が自動で入力されないことは

●ページの頭から入力した「記事(文章)」も、改行無しのベタ表示になりますので、文章の最初から<br>改行タグを必要な箇所に、直接に入力する必要が出てきます。
●さらに空白行は必要な空白行数分の<br>改行タグを連続で入力します。
●table要素内のテキスト文にも<br>改行タグを直接書き込むまなければなりません。

上記の方法を纏めて見ると

【まとめ】
記事入力設定を「改行を<br/>タグに変換しない」にする。
●文章の改行位置に<br>改行タグを直接に書き込む。
●空白行はその空白行の数だけ<br>改行タグを書き込む。
●テーブル内のテキストにも<br>改行タグを書き込む。

<br>改行タグを直接に書き込む煩雑な入力作業を伴いますが
テーブルを使う利点が大きいので、解決方法の一つとして覚えましょう。

次回は、比較的に簡単な
(2)テーブルタグのみを改行無しでの入力 
  ※アフィリエイト用のテーブルタグが殆どこの形式になっています。
の方法を確認します。



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

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



2010年01月28日

タグで指定するWebで使用できる書体

■ 5-17 Web上の書体について

前回まで
Seesaaブログの記事欄に設置されている
入力用の「アイコン」に含まれるHTMLの要素タグをシリーズとして、確認してきました。

最後のアイコン emoji01.png は「絵文字」になっていますね。

絵文字については、アフィリエイトや情報を提供するブログでは、
あまり必要ではないと思いますので説明は省略します。

記事入力用の各アイコンは
ブログ記事の入力時に、HTMLが分からなくてもアイコンをクリックすることで、必要なタグが使えるように入力を補助するために設置していますね。

基本的にはアイコンを利用せずに
HTMLタグを迷うことなく記入出来れば、今まで確認してきたHTMLの基礎を取得したと言えます。

しかし
便利なツールとして設置してあり、クリックすればタグ入力ができるのですから、大いに使いこなすべきですね。

参照 
記事欄アイコンの使い方
●記事入力枠の上段に表示されているアイコンの
 使い方シリーズ@です
http://tosiji-dreamafi.seesaa.net/article/134496905.html


今回から
ブログでのHTMLを確認するページになります。

「Web上の書体」から確認してみましょう。

ブログやホームページはデザイン的なレイアウトより、公開する情報の信憑性、信頼度が主となっているため書体を気にすることなく記事を書き込んでいます。

書体は
書籍や新聞、チラシなどの広告関係では、その使い方の良し悪しで出版物の形が決まると言うほど重要な要素を占めています。

出版社での編集者は
編集の基本はもとより、書体の使用感覚も最低条件として必要です。

またデザインを本業としているデザイナーは、
書体の「いろは」とその「特質」を知らなければ、職務が成り立たないほどです。

Webの世界と印刷の世界の大きな違いではありますが、

サイトのデザインを考えるとき
ある程度の基本として、書体の使い方を知っておくのも、基礎知識として必要なことです。

Webで使える基本的な書体として
Microsoft Windows日本語版 に標準で搭載されている馴染みの深いMS系の書体

「MS明朝」「MSゴシック」

とその仲間の書体を確認してみます。

MSとは Microsoft の省略で、
その書体は、ワードやエクセルの「日本語」入力の基準となっていて、
プラウザのInternet ExplorerやFirefoxには標準で搭載されていて、wwwに準拠しています。


■ 記事の書体を確認して変更する。

記事の一部の書体の変更、入力時にHTMLタグで指定しますね。


「MS明朝」に書体を変更することにして、その使用方法と表示例を確認してみます。


書体の指定

<div style="font-family:'MS 明朝',serif"></div>


【画像1】
aph01.png
 ↑ 画像をクリック・元画像が開きます。

「画像1」を参照に、
HTMLタグ入力の際の留意点を確認します。


●MS 明朝

@指定するfont-familyの「MS 明朝」
「MS」と「明朝」の間に半角のスペースが入ります。

A使用する書体名を
' 」(シングルコーテーション)または
」(ダブルコーテーション)
で括ります。

B代替フォントの指定。

の3点に注意して、正確に記入する必要があります。
<div style>の style指定形式ですね。

代替フォントとは

「MS明朝」は殆どのプラウザに標準で搭載されていますが、
搭載されていないプラウザも有ります。

搭載されていなければ、指定された書体の表示が出来ません。

搭載されていないプラウザを使用しているユーザーために
表示エラーにならないように、代替のフォントの指定しておきます。

代替の「serif」(セリフ)は明朝体のことです。

「serif」を指定しておけば、該当書体が無いときは
そのプラウザがデフォルトで搭載している明朝系での表示になります。

HTMLタグでの使用文字指定を確認してみます。
【表示例1】

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


明朝書体で表示されていますね。

MS明朝は等幅フォントです。
等幅フォントとは、MS明朝・MSゴシックなどのように、
それぞれの文字の横幅が統一されていて、

原稿用紙の枡目の中に一文字づつ記入したように、
文字幅が綺麗に揃って表示される書体のことです。

日本語漢字は2バイトで表示されますね。
1バイトで表示される漢字は有りませんので、「 」( )などの約物(やくもの)も
等幅の全角が基準になっています。

1バイト系のカタカナ、約物を半角で表示したいときには、入力時に半角の形にする必要があります。
  
    注
   ●約物の半角入力
    キーボードから該当する約物を入力してEnterで確定する前に
    ファンクション「F8」を押して半角に変更。
   

●「MS P明朝」

明朝系には他に「MS P明朝」が有りますね。

    注
   ●「MSP明朝」ではなく「MS P明朝」が正確な表記。
    「MS」と「P明朝」の間に半角のスペースが入ります。

Pはプロポーショナル フォント(proportional font)のことで

   ※proportion = 割合、比率

文字ごとに横幅が調整されています。

英文の組版からの派生で
例えば、アルファベットの「 I 」や「 H 」では
I は H に比べて横幅が小さいですね。

I をHと同時に使用すると
I の横の空きが広すぎて締りのないように見えるので

横幅を調整して小さくしています。

そのような横幅の違いを詰めて表示するのが「Pフォント」で
一般的には表示や見栄えを良くする目的で使用されます。

【表示例2】

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


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



「表示例2」はMSP明朝とMS明朝を比較するための表示です。

MSP明朝では(※MS明朝の黄ベタ部分を参照)

●文字と文字の間を、その形状に合わして調整。
●括弧などの約物を半角に変更(残った半角を取り去る)
●カタカナの字詰め。
● 。、などの句読点の半角表示。
 
文字の送り(字間)を詰めています。

とくに明確に違いが分かるのは
両書体の下方に表示した英文字ですね。

MS明朝とMSP明朝の表示上の、もうひとつの違いは

MS明朝が、
漢字、約物も等幅での表示が基本のため、文頭と文末がきれいに揃って表示されるに対して
MSP明朝は、
約物類(1バイト系カナを含む)が半角の表示のため、文末が揃わないという表示上の違いがあります。

同じ明朝系でも
MS明朝とMSP明朝には、このように大きな違いが有ります。




●ゴシック系の表示。

ゴシック系にも「MSゴシック」「MS Pゴシック」が有りますね。
使用する時のタグの使用方法は同じです。

表示例を見てみましょう。
【表示例3】

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



タグの形式は、先の例と同じですが
<div style="font-family:'MS ゴシック',sans-serif">

代替のフォント名が
ゴシック体を表わす「sans-serif(サンセリフ)」になります。

【表示例4】

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


「表示例3」のMSゴシックと比較してみて下さい。
文字の詰め具合が比較できます。

●明朝・ゴシック以外の書体

【表示例5】

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



【表示例6】

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



その他に使用できる書体は有りますが省略します。
ワードに搭載されている書体は使えるようですので、試して下さい。


■CSSに定義されている書体を変更する。

CSSの定義を書き換えて、
ブログの使用文字を一括で変更する方法を確認します。

まず利用しているブログサービスでの書体を確認しましょう。

CSSを開きます。

seesaaブログでは
メニューの「デザイン」→下段のテンプレート「タイトル」

から入りますね。


SeesaaブログのCSS

body {
font-family:Verdana;
background-image:url(画像url);
margin:0px;
padding:0px;
text-align:center;
}


CSSは

セレクタ  
プロパティ 
      

= body
= font-family
= Verdana

の構造ですね。

このブログでの使用書体は「Verdana」が使用されています。

VerdanaはWeb上で使用する目的で開発された
ゴシック系の書体で、見やすい書体ですので多くのプラウザで使用されています。

ブログの全ての書体を変更するには
このCSSのプロパティの「値」

font-family:Verdana;
  ↓
font-family:'MS 明朝',serif

の書き換えになります。

値の中のserifは記事上段で確認した代替フォントの定義ですね。

セレクタの body の他に「font-family」を指定しているセレクタが
いくつか有りますので、その全てを変更します。

以上がブログの書体を全て変更するときの、CSSを書き換えです。


Web上で使用する書体は、
ブログサービスで設定しているプラウザ対応のもので十分ですが、

●他のブログと差別化をする。
●文字でもって強調する。
●重要な資料を目に付くようにする。

などの目的で変更することも大切な考え方の一つです。




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

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



2010年01月24日

リンクの基本(中級2)

■ 5-16 ブログにリンクを張る(2)

前回の「ブログにリンクを張る(1)では、内部リンクの

●同一記事内の「特定項目へのリンク」
●他のページへのリンク
●他のページの「特定項目」への直接リンク

を確認しました。



リンクしてページを開く特徴には

●今見ているページに上書きしてブログを開く「同窓」
●別の窓を立ち上げて開く「別窓」が有りますね。

例えば、Seesaaブログでは「記事を書く」「確認する」などは同窓で、「ブログを見る」は別窓で開きます。

ほかのブログに訪問して「見やすい」「使いやすい」と感じるサイトは
「同窓」と「別窓」の互いの利便性を上手く使っています。

同窓にすると、
元のブログや最初のページに戻りにくい点がありますが

プロバイダのアドレスバーのアイコンには、ブルダウンの選択メニュー「最近表示したページ」を利用することで、道に迷うことはないようになっています。

別窓にすると
開いた分だけのサイトがモニターに次々と重なって表示されます。

表示サイズを調整することで
複数のサイトを同時に表示して、ページの比較や記事を参照することも可能ですが、
PCのメモリを消費してしまう点など、気になることもあります。

PCやWebには、閲覧している側が
キーボードやマウスを使って「別窓」で開く方法が組み込まれています。

別窓で開く方法

●「Shift」を押しながらクリックして別窓で開く。
●「Ctrl」を押しながらクリック、タブで別窓を開く。
●マウスのホイール(回転ボタン)をクリック、タブで別窓を開く。
●リンクを右クリック「新しいウィンドウで開く」で別窓。

同窓より別窓の方が使いやすいと言う方は試してください。
便利な機能です。

■「戻る」リンクの組み立て

【画像1】
他のページへのリンク構成図の表示。

前回、参照したリンクの略図です。

 ↑ 画像をクリック・元画像が開きます。

「ブログトップに戻る」
「この記事のトップに戻る」

   
●参照するために他のページからジャンプして来た。
●検索エンジンなどから特定のページに訪問してきた。

など
直接にページに訪問した人を「ブログのトップ」に
行けるように案内する「道しるべ」です。

訪問した特定のページだけでなく、ほかの記事も参照して欲しい時によく使われます。

その「戻る」リンクの仕組みを確認します。


■ ブログのトップと記事のトップ
 
ブログは記事を更新したときに、
新しい記事がつねにブログのトップページに表示されます。

この利爺ブログのトップのurlは
  ▲ http://tosiji-dreamafi.seesaa.net/

記事のトップ(最新の記事)のurlは
  ▲ http://tosiji-dreamafi.seesaa.net/article/・・・・・・・・・.html/

の表示形式になっています。


● ブログのトップ

 ● http://ブログURL/

ブログのトップは決められた位置に有ります。

ブログを表示した時
ブログトップには、最新の記事が表示されるので、ブログトップと記事トップは同じに見えますが

ブログは
構成部分と記事部分に分かれた構造になっています。

ブログの構成部分の表示にともなって、最新の記事を判断して
記事部分として合体して表示される仕組みになっています。

このブログの構成の形から分かるように
ブログトップはブログ表示の階層構造の最上段(トップ)にあり
表示する位置、構造形は記事によって左右されませんね。

● 記事のトップ

http://ブログURL/article/記事番号/

記事は
その記事が新しいのか、過去の記事なのかに関係なく絶対的な
記事番号(/article/記事番号/)を持っています。

ブログのトップを表示した時、新しい記事かどうかを番号で判断され入れ替えられます。

また、リンクなどで記事番号を指定した時は、その番号の記事を表示します。


● ブログトップへのリンクと記事トップへのリンク
上記のことから

@ブログのトップに戻るは
構造のトップ位置にある
<a href"http://ブログURL">(記事番号無しの表記)
へのリンクになります。

A記事のトップに戻るは、今見ている記事の番号へのリンク
<a href"http://ブログURL/article/記事番号.html">
となりますね。

記事のトップに戻るは
同じ記事へジャンプさせ、同窓で再び同じ記事を表示させる形になります。

それらの両方のタグを記事の該当箇所に、HTMLで記入してリンクを貼ればいいと言うことです。

しかし記事の更新のたびに内部リンクとして
「ブログトップに戻る」「記事のトップに戻る」と入力して、 リンクurlを書き込む作業は大変な煩わしさです。

■ 戻るリンクを「自動」で表示させる。

「戻る」リンクを記事の末尾に、自動で表示させる方法を確認します。

seesaaブログでは

●ブログの全体の構造を掌る、大本のHTMLと
●記事の構造をみるHTML

の二つのHTMLでブログを構築しています。

「戻る」リンクを置く場所は、更新をする記事内ですので、HTMLの修正は記事の構造をみる
「記事のコンテンツHTML」の書き換えになります。

「メニュー」→「デザイン」→「コンテンツ」→「記事」と進み
「コンテンツHTML編集」

を開きます。

入力するタグは

【資料1】
戻るリンクの設定

●ブログのトップに戻る「タグ」
<a href="<% blog.page_url %>">ブログのトップに戻る</a>

●記事のトップに戻る「タグ」
<a href="<% article.page_url %>">記事のトップに戻る</a>


が基本形です。

【画像2】記事の末尾
hyo01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像2」のように表示位置は
記事の最末尾、タグの語句やSocial BookMark のアイコンが表示されている
すぐ上に表示するようにします。

「コンテンツHTML」での上記戻るタグ追加位置は

<% if:glog.bookmark_service %>
の4行上の

<% if:list_tag %><div class="tag-word">
の前の空白箇所になります。

記事のコンテンツHTMLは長い構文体ですね。
挿入する箇所を特定するため、目で追って探すのは簡単なことではないです。

■ 検索機能を使う。

IEやFirefoxには語句を「検索する」ための便利な機能があります。
ブログを表示しているときやHTMLを開いている時に、検索窓を開くことが可能です。

@「コンテンツHTML編集」を開いた状態で

Aショートカット「Ctrl + F」
で検索窓を開き

B検索する語句「bookmark」を入力。

  ※検索する語句は「list_tag」でもいいです。

【画像3】検索状況
link-kensaku01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像3」のように語句「bookmark」が検索された状態になりましたね。

青ベタで表示されている「bookmark」は検索機能がHTMLを最初からチェックして、初めに探し出した「bookmark」の語句です。

その青ベタより前には、
該当する語句は無いという意味での青ベタになっています。

次に探し出した該当する語句からは
黄ベタbookmarkで表示されます。

青ベタや黄色ベタで表示されている語句をチェックしていけば、
該当するHTMLの列を簡単に探し出せます。

この検索機能はブログやネットのいろいろな箇所で使えますので活用してみましょう。


記事HTML

★ ← ← タグを挿入する箇所
% if:list_tag %><div class="tag-word">…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


<% if:list_tag %><div class="tag-word">……
の上段の空白の部分印の箇所に

a href="% blog.page_url %"ブログのトップに戻る</a>
a href="% article.page_url %"記事のトップに戻る</a>

を直接に入力します。

<a href=" の後ろの
<>は「入れ子」の形式になっていますので、気をつけましょう。


挿入後の記事HTML

a href="% blog.page_url %"ブログのトップに戻る</a>a href="% article.page_url %"記事のトップに戻る</a>
% if:list_tag %><div class="tag-word">タグ…
 ・
<% /if -%>
% if:blog.bookmark_service %
 ・


入力した後
プレビューで確認して記入もれなどのエラーが無ければ「保存」して終了です。
 
 ※「保存」する前に、必ずプレビューで確認しましょう。

このHTMLの追加で、新しく記事を書き上げるたびに
直接にリンクタグを張り込まなくてすみます。


■戻るリンクに「ブログ名や記事タイトル」を自動で表示。

上記の記事HTMLの修正では、
「ブログのトップに戻る」「記事のトップに戻る」のように簡単なリンク表示にしていますが、


ブログ名・記事名の自動表示

@ 「利爺とゆったりアフィリエイト」のトップに戻る。
A 「記事欄アイコン「リンク」(2)」のトップに戻る。


「ブログタイトル」や開いている「記事のタイトル」を表示して、行き先が分かり易いのように表示することも出来ます。

@「ブログ名」を戻るリンクに自動で表示。
前述のタグに
<a href="<% blog.page_url %>"><% blog.title %>のトップに戻る</a>

の赤文字の<% blog.title %>タグを追加します。

A「記事名」を戻るリンクに追加して自動で表示。
ブログ名表示と同じように
<a href="<% article.page_url %>"><% article.subject%>のトップに戻る</a>

に赤文字のタグ<% article.subject%>を追加します。

これら自動表示のタグは「相対指定」の形式になっていますから、
仮にブログ名を変更した時でも、新しいブログ名の表示になります。

更新した新しい記事タイトルにも相対的に対応しますので、
一度、記事の「コンテンツHTML」を修正(編集)して置けばいいということです。

このような「ブログ名 + トップに戻る」の使い方は
ブログ名(例:利爺〜アフィリエイト)が入っていますので
検索エンジン対策にもいいと言われますが、真偽のほどは分かりません。


■戻るリンクに「アイコン」を挿入

【画像4】
hyo02.jpg
 ↑ 画像をクリック・元画像が開きます。

この利爺のブログには、
リンクの頭に、訪問した方の目に付きやすいように
「画像」(アイコン)を使用しています。

画像のURLの挿入箇所は
  <a href="<% blog.page_url %>">ブログのトップに戻る</a>

印のどの箇所でもかまいません。


画像の挿入例

<a href="<% blog.page_url %>"><img src="http://画像URL" />ブログのトップに戻る<a>


HTMLを軽くするためには、アイコン類を使うこともないですが、
参考として下さい。

無料で使えるアイコンがネット上には沢山有りますので、
気に入った物を取得して使って見てもいいでしょう。

独自のアイコンを手元に置きたい方は
シリーズを参照にしてアイコンやファビコンを作ってみて下さい。






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

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



2010年01月19日

リンクの基本(中級1)

■ 5-16 ブログにリンクを張る(1)


link(リンク)の意味は ⇒ 「繋ぐ、絆、輪」を意味し、
ブログやホームページ内に埋め込まれ、他の記事(文書)や画像、あるいは他の人のブログなどと繋ぐHTMLの特徴的な機能の一つです。

その「link機能」を使うことをリンクを張るといい、
Webサイトでは、リンクをマウスでクリックすると、関連先にジャンプするようになっています。

リンクの形式はwebだけではなく
日本語入力ソフトや表計算ソフトでの関連付けの機能として使われています。

Seesaaブログでのリンク指定は、左から12番目、鎖形のアイコンをクリックです。
ki-ic01.jpg
                                 ueya.gif

アイコンのタグは
 <a href="http://… url…>〜</a>
の形式になっています。

リンクタグの

【<a href=" ">】

<a>

<href>
  「h」
  「ref」
<" ">
⇒  anchor(アンカー)「錨、最終走者」を意。
    ウェブページにリンクを作ります。

⇒  hyper(ハイパー)の省略。「超越して、過度の」
⇒  reference(レファレンス)は「参照・参考」
⇒  「" "」内にリンク先のurl記入



<a>タグには
<href>属性にurl・ファイル名を記述することで、リンクを張る機能が働き、属性で指定したリンク先にジャンプする仕組みです。

指定するファイル名は、
大文字、小文字そして拡張子を含めて「完全に一致」させる必要があります。

馴染みのあるリンクには
■内部リンク   ■外部リンク
がありますね。

リンクの使い方には色々な方法がありますが、比較的に使用されている「外部リンク」の仕組みは、詳しいと思いますので「内部リンク」について確認しましょう。

    注
   ● リンクの方法の確認ですので
    相互リンク、バックリンクなどの説明は省きます。


■ 内部リンク種類と仕組み

ブログの同一ページ内へのリンクや、他のページへのリンクを内部リンクといいますね。
 
内部リンクには

●「同一ページ内の特定の項目」にジャンプ。
●「同じブログ内の他のページ」へリンク。
●「同じブログ内の他のページの特定の項目」


にリンクする方法があります。

【図1】
   「同一ページ」             「他のページ」
 hyo05.png
 ↑ 画像をクリック・元画像が開きます。

「図1」は内部リンクのサンプル図です。

図内の@〜Cの仕組みを確認します。

リンクを使うメニューの形には

「最近の記事一覧」なども一般的に使われていますが
その一覧は過去記事を含めた「記事のタイトル」がメインになっています。

記事の中に書いている項目(章・見出し)を案内するメニューにして
記事トップで内容を知らせるナビゲーションも有りますね。


下記の【資料】は
記事トップに用いる章立て(目次)のサンプルです。

実際に、この記事の中でリンクの構造を確認するために
章立てした項目の見出しの箇所にジャンプします。


クリックして行き先を確認してみましょう。

【資料】
目次サンプル
※この記事の章(項目)にリンクしていますのでジャンプします。

 @同一記事内の「特定の項目へのリンク」
 A他のページへのリンク
 B他のページの「特定項目」への直接リンク

各項目にジャンプしましたね。

書籍や雑誌類では、記事の内容をページを順に進めて読んでいきます。

また読者が読みやすいように章や項目分けをして、
筋立てするのが一般的です。

同じことがWebのブログにも言えますね。

ブログの記事内に上記のような「項目メニュー」があれば
書籍や雑誌の目次と同じ働きをして、訪問した方は読みたい記事をすぐ探せます。

Webでは、リンクを使って情報を提供する仕組みがあり、
ブログにおける「カテゴリー」や「最近の記事」もその一種です。

ブログは、新しく更新した記事がメインとなり、
過去記事が重要な内容の情報を含んでいても
トップページからは消えてしまう点があります。

その為、訪問した方はトップページだけに目を通して
帰ってしまうことが非常に多いです。

重要な情報を提供しているページは
トップページだけではありませんね。

多くの情報を提供していることを、訪問した方に明確に伝えるために、
リンクで情報を提供する仕組みにすることは重要なことです。

ページが長い文章で構成されているときは
なおさらリンク機能を生かすべきだと考えています。

リンクの基本は内部リンクも外部リンクも同じ考え方です。


@ 同一記事内の「特定の項目へのリンク」

内部リンクのひとつ
同一記事内の「特定の項目へのリンク」を確認していきます。

【図2】
 同一ページ内の特定項目へジャンプ
link-kom01.png
  ↑ クリック・元画像が開きます。

参考図2のように
メニューから各項目にジャンプさせるのもリンクの一つですね。

記事内項目へのリンクは他のページ出ることなく
同一記事内でのリンクになりますので「リンクの形式」が異なります。

■ リンク先(ジャンプ先)の「項目」につけるタグ

ページ内の特定の位置に移動するには

(1)特定の項目にアンカー名を付ける(リンク先:受け入れ先)
(2)その特定項目にジャンプするようにリンクを張る(リンク元)

の設定が必要です。

▲ 特定項目にリンク先(受け入れ先)であることを示す
アンカー名を付けます。

アンカー名は<a>要素に

「name」属性で指定します。

タグは
<a name="アンカー名">リンクさせる項目名</a>

<a name>の形式で「項目名」を括る(囲む)形式です。

アンカー名は自由に付けて構いませんが、
リンクと同様に使える文字は、半角英数と一部の記号類で
漢字は使えません。

名前が重複しないように、
分かり易い判別のしやすいアンカー名がいいでしょう。


▲ リンク元(リンクを張る箇所)に付けるタグ

リンク元(ここでは記事のトップに置いた目次)には

記事内の「アンカー名」が付いた箇所にジャンプするようにリンクを張ります。
「アンカー」名でリンクすることに気をつけましょう。

<a href="#ジャンプ先の特定項目のアンカー名">目次項目</a>
の形で括る形式です。

一般のリンクと異なるところは
アンカー名の頭に「」が付きます。

この「#」を付け忘れるとリンクになりません。


【記入例】
●リンク元には
ジャンプ先がアンカー名で記入されていることを示す「#アンカー名」
(#が付きます)

  【例】ジャンプする先のアンカー名を仮に「komoku-b」としての
    記入形式は
    <a href="#komoku-b">ジャンプ先の項目名</a>

●ジャンプする(リンク)先の項目には
<a>タグの「name」属性で受け入れる「アンカー名」であることを設定します。

  【例】アンカー名を「komoku-b」
    <a name="komoku-b">ジャンプを受ける項目名</a>
   (#は付きません)で受け入れます。

    注
   ⇒リンク先とリンク元の項目名は同じ名前です。
   ⇒リンク元(リンクを張る項目)には「#」が付きます。
   
   ⇒ 【図2】を参照


実際に使用して気づく点は
●リンク元もリンク先も、<a>要素形式のため、両方ともリンク表示の薄水色の文字色になっています。

●リンク先はリンクを表す文字の色になっていますが、リンクタグとしては働かないので、クリックは出来ません。

リンク先の
文字色を変化させないようにするには、CSSの「class」での定義になります。
CSSの説明のときに確認します。


 ●リンク先の「 name 属性」(アンカー名)の付け方
 ●リンク元の<a href=" #アンカー名 "> 〜 </a>の形式を覚えましょう。

    注
   ●ジャンプした項目から、記事のトップに戻すため
    その章の末尾に「記事のトップへ戻る」と表記して
    戻るリンクを設定することも出来ます。

   ●リンク形式は
    <a href="http:// ブログurl /article/記事番号.html">
    記事のアドレスを記入して、トップに戻します。

    ※詳しくは次回の「リンクの基本(中級2)」で確認します。


A他のページへのリンク

他のページへのリンクは、頻繁に使用されている形式ですね。
使っていないブログを見つけるのが難しいくらいです。

おもにブログ内の記事同士を繋ぐ方法で、形は外部リンクと同じ「絶対指定」です。

数多くの記事の中の特定のページ(記事)へのリンクになりますで、
ページ番号(ページアドレス)が付加されることが特徴的です。

事例として、
このブログの他のページにリンクを張ってみます。

   「使用例」

        ↑
      ※該当ページにジャンプするようにリンクを設定しています。
      ※article/133954766.html が記事番号(アドレス)ですね。

タグは
 <a href="http:// ブログurl /article/記事番号.html" target="_blank">タグの仕組みと基本形</a>

の形式ですね。
 
●article(アーティクル)は「記事、論文、品物」と言う意味。

●/article/記事番号.html 

の記事番号はこの Seesaaブログの記事番号でプラウザのアドレスバーに表示されます。

記事番号の付け方は、
各ブログサービスによって異なっているようですので
使用しているブログサービスの記事番号の附加に準じてください。

この形式で指定されたページにジャンプします。

<target="_blank">は
前述したジャンプ先を「別窓」で開くの意味ですね。  


B他のページの「特定項目」への直接リンク

このリンクの方法は
他のページのトップにリンクするのではなく

「他のページの特定の場所にリンク」する方法です。

形式は

「他のページへのリンク」
「記事内の特定の項目へのリンク」

の二つを組み合わせて使います。

●「他のページへのリンク」のタグ形式 
<a href="http://ブログurl/article/記事番号.html" target="_blank">〜</a>
 
  +

●「同一記事内の特定の項目へのリンク」のタグ形式
<a href="#アンカー名">〜</a>

  ↓


<a href="http://ブログurl
/article/記事番号.html#アンカー名"
target="_blank">〜</a>


/article/記事番号.html#アンカー名
の間には「スペース」や「/」記号などは入れません。
空白無しでの連続記入になります。

他のページであっても該当項目には

@ 同一記事内の「特定の項目へのリンク」と同じように「アンカー名」を付ける必要があります。

さらに、他のページへのジャンプですから、別窓で開く「 target="_blank"」のタグを記入しておき、リンク元のページに戻れるようにします。


「使用例」
このブログの過去記事のページ

●記事欄アイコン「表示位置指定」(画像と文章)の中の特定項目
「画像は左揃え・文章は画像の右(余白有り)」

にジャンプするリンクを作ってみます。
 
<a href="http://tosiji-dreamafi.seesaa.net/article/136498096.html#hi03"
target="_blank">画像は左揃え・文章は画像の右(余白有り)</a>

他の記事の特定項目へのリンク例

  参照 ⇒ 画像と文章を組み合わせる
       項目名 → ●画像は左揃え・文章は画像の右(余白有り)


「該当するページ」の「特定の該当した項目」に直接ジャンプしますね。

    注
   ●内部リンクの項目へのリンク
    リンク先が「項目」だけに限られるのでなく、「段落」や文章の中の
    特定の「文字や語句」あるいは「画像」にも使用できます。

   ●キーワードマッチ(アフィリエイト)でも、外部リンクと共に
    よく使用されています。

……

リンクは数多くあったほうがいいとは言い切れません。
数多くのリンクを張って、逆に迷路になることもありえます。

「アクセスアップの為に」
「SEO対策の為に」

内部リンクを充実させよう。

とよく耳にしますが
アクセスアップやSEOは二次的なもので、

内部リンクの充実は
訪問した方のことを考え、使いやすさに配慮したブログを作り上げること目的にしています。

コンセプトが明確であり、内容も充実して利用しやすい。
「また訪問したい」
という気持ちにさせるブログが、アクセスアップやSEOの対策にも繋がります。

……

●この例では、HTMLとCSSでの内部リンクの形式を確認するのが主な目的ですので
参照画像では説明上、該当ページと他のページの2ページのリンク例にしています。

●参照画像から、全てのページを数多くのリンクで繋いだ方がいいと捉えられる恐れがありますが
「リンクの数は多ければいい」
ということではないですね。

●自身のブログの命題にそった「道筋を示すリンク」をどのように設定するかを考えましょう。


次回は「戻る」リンクを確認します。




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

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


画像類の無断使用を禁止します。必要であれば、確認了承を得る手続きが必要です。

2010年01月13日

色(color)を使う

■ 5-15 カラーイメージを確立しよう


ウェブの世界には、企業や個人のホームページ、ブログが溢れています。

それらの中で、
ビジョン(テーマ)をもって作り上げられたブログやホームページを閲覧していると、
発信している管理者のしっかりとしたコンセプトが感じられて、内容にも信頼感を持ちます。

企業はCI(コーポレートアイデンティティー)に沿ったイメージを確立して、ロゴ、制服、CMなどに統一した戦略を展開しています。
色使いも一つのビジョンであり、コーポレートカラーとして経営戦略の一部を構成しています。

  ※現在ではCIの理念を強化して「ブランディング」と表現をしています。

ホームページやブログの世界でも
背景、テキスト、見出しなど、独自のビジョンに沿った色使いを、どのように生かしていくかがポイントになります。

ブログを「目立たせる」には全体の色合いのバランスも重要ですが、

●文字を大きくする。
●文字に色を乗せる。

ことも、サイトの構成には無くてはならない手法です。

訪問者を記事へ導き、読ませる手法の一つが文字使いや色使いです。

カラーの使い方は、書体の使い方とも連動するもので
文字の大きさに「適度」があるように、色にも「適度」は有ります。

色使いを誤ると
ターゲットユーザーにとっては、読みにくい、馴染まないという結果になってしまいます。

文字で強調する、色で強調する
ブログやホームページのテーマに沿って基準値を決めておくことも、大切なことです。



Seesaaブログでのカラー指定のタグは、左から11番目のアイコンのクリックですね。
ki-ic01.jpg
                             ueya.gif

ブログでは
記事入力時にHTMLの各要素で文字の書体、大きさ、太さ、文字色などを変更しなければ、CSSのセレクタの定義が反映されますね。

記事を入力している時
文章の一部、あるいは文字や語句の色や大きさを変えて強調したい、修飾してアピール度を高めたいと思うことがあります。

HTMLタグで部分的に文字色を変更して、修飾を設定する方法を確認します。

タグの使い方は、文字サイズの変更と同じ方法です。


を確認しておきましょう。

coai01.jpg アイコンをクリックすると

color02.jpg

カラーチャートが表示されます。
このカラーチャートは色指定用としてのセーフカラーの色見本ですね。

カラーにはwwwに準拠した「基本16色」と「セーフカラー216色」が有り、プラウザやOSの異なる環境でも同じ色で表示されるようになっています。

PCやネット、TVでも表現可能なRGBカラーは、その組み合わせによって「1600万色余」の色合いを表現できますが
緻密な細かい色指定をしても、ユーザー環境の違いで表示される度合いは変化します。




●印刷物や広告の制作では「色を多用(乱用)しない」

の原則が有ります。

目立たせようと多くの色を使ってしまうと、肝心なポイントが、逆に目立たない結果になります。

この原則からみると
文字に使用するカラーは、表示されているセーフカラーの色で十分だと言えます。


■ 文字・語句・文章の色指定。

【例1】

文字色・下地色

@ 三国志は歴史を背景
A 三国志は歴史を背景
B 三国志は歴史を背景


@は頻繁に使用される文字の色乗せですね。

単純に色文字にしたい時は、指定したい文字や語句をドラッグして範囲を指定します。

範囲をドラッグすると、下記のように反転した表示になりますね。

【ドラッグ範囲の反転表示】
テキスト

反転させたまま、
入力アイコンのカラーチャートから使用する色を選択してクリック。

仮に赤色 = <#FF0000> を選択すると
  
表記されるHTMLタグは
<span style="color:#FF0000;">テキスト</span>
の形式になっています。
 ↓
「表示」
テキスト
赤色の文字で表示されますね。

このHTMLは
<span style>」の要素名で括った形です。

<span>はとくに意味を持っていませんが
<span>〜</span>で括った範囲の要素にCSSを適用するのに用います。
     ※<span>要素  ← このページ下段を参照

他のHTMLの形<font>タグを使用して表示する方法もあります。

    注)
   ●<font>タグは、現在では使用を推奨しないタグになっています。
   ●CSSを適用する<span>タグの使用が推奨されています。

文字に色を乗せる属性は<color>のみの表記になります。
<font-color>の形は取りません。

形式は
<span style="color:#FF0000;">テキスト</span>
の形を取ります。

属性の<color>は、文字に色を適用することを表し、属性値の<#FF0000>はカラーコード(番号)で、文字に乗せる色を指定しています。

カラーコード<#FF0000>は「赤」を表示しますが
「red、blue」のような「カラー名称」での指定でも構いません。

文字色は比較的、楽に指定できるため、多用する傾向にありますが、一定のコンセプトの中で使うことが望まれます。

コンテンツ毎に文字色が変わったら、色の異なる文字が何のためなのかユーザーは戸惑ってしまいます。

色を使うメリットとデメリットを十分に考え、色の多用は避けるようにすべきです。


■ 文字のバックに色を使う。

A 三国志は歴史を背景

文字のバック(下地)に色を使っています。
seesaaブログのアイコンには
文字のバックに色を使用するタグは用意されていませんので、HTMLの直接入力になります。

HTMLは
<span style="background-color:#dddddd;">テキスト</span>

文字のバックに色を乗せる属性の「background-color」を指定しています。色(属性値)は、この例では<#dddddd>(薄ねずみ色)を指定しています。

例のHTMLには、文字の色が指定されていませんね。
文字色<color>の指定が無ければ、CSS定義のデフォルトの色で表示されます。

デフォルトは「黒」色です。

多くのブログで見かける色を使った強調ですね。

バックに色を乗せる範囲(文字の上下左右の範囲)は
使用文字の大きさ分ですので、基準書体「12px」の文字幅でバックが表示されます。


B 三国志は歴史を背景

は@とAを組み合わせた方法です。
タグの形は
<span style="background-color:カラーコード;color:カラーコード;">テキスト</span>

<background-color>=「バックの色」と
<color>=「文字の色」を同時に指定しています。
   (注:<font-color>の使い方はしない。colorのみ)

バックの色と文字の色が、お互いに干渉しないような配色を考えて指定することが重要ですね。

文字や語句に色を使う強調の方法では、上記の@〜Bまでの使い方が多いようです。

 
■ 文字列(行)や段落を色で強調する。

【例2】

文字列・段落のバックカラー(1)

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

【例3】

文字列・段落のバックカラー(2)

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


文字の色乗せのHTMLは、前述したとおりです。
「例2」「例3」は文字列、あるいは「段落」を強調する方法です。

「例2」では、文字列のバック(下地)にカラーを
<span>要素
で表示しています。

複数行や段落に
<span>要素での指定は、間違った使い方ですが
<span>と<div>要素の違いを確認するための使用例として表示しています。

HTMLタグは「style」指定です。
span style="background-color:カラーコード;">テキスト</span

Aの文字の下地にカラーを使うと同じ形式ですが、
複数の文字列に<span style>を適用しているため、行と行の間(行間)には色が乗っていません。

<span>はインライン要素のため、段落では使用しません。
結果的には表示されますが、構文的には間違った使い方ですので薦める方法ではありません。

しかし見た目では面白い強調ですね。

学生時代に教科書の重要箇所を覚えるために、マーカーで文字に色を太く塗った感じです。

この方法を使うのは若い人に多いように思えますが、バックの色が文字を邪魔しないような配色で指定することが重要です。

「例3」は<div style>で指定しています。

この形式は
div style="background-color:カラーコード;">テキスト</div

文章の「段落」全体の指定になっていますので、複数の文字列をカバーしています。
<div >要素は「ブロック要素」であり、文章の段落にCSSを適応するときに使用します。

●文字、語句、文章の一部には<span style>
段落では<div style>を使うことを覚えましょう。


ブロック要素とインライン要素は
使っているうちに理解できてきますので、当初は間違っていても試して結果をみましょう。

    注)
   ●HTMLの構文上では明確に使い分ける必要があります。
   ●このブログでも、HTMLやCSSは、体系に基づいて正しく使っている
    とは言えません。
   ●一歩でも正確な使い方に近づくようにしましょう。

【例4】

バックカラーの幅の設定

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


「例4」は「例3」と同じ段落強調です。

「例3」では段落の上下左右ぎりぎりにバックカラーが表示されているため、文章に狭苦しさを感じます。

文章の下地の色の表示域を、段落(行列)の幅より大きく表示するため、一定のスペース
(ここでは使用文字の半分の6px)

<div style="padding:6px;background-color:#・・・・;">

を「padding」を使って、元のHTML構文に追加して、同じ色を記事(テキスト)の外側に下地として乗せています。
二重構文になっていますが、レイアウト上では「例3」より下地が広がり、見やすくなっています。

「例3」に比べて
バックカラーはゆとりある表示になっていますね。

スペースや範囲を指定するタグには
「margin」「padding」が有りますが、それぞれ用途が違います。

参照 
■ marginとpadding・その応用(1)~(3)

■(1)=枠内に余白を空ける。
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(2)=余白の考え方
http://tosiji-dreamafi.seesaa.net/article/151906476.html

■(3)=文字や文章の表示位置
http://tosiji-dreamafi.seesaa.net/article/152597959.html


テーブル作成やファレーム作成のとき
この両方のタグの使い方を覚えていた方が、見栄えのいい、形のいいテーブルやフレームが作成できます。

上記の参照ページを確認して見ましょう。

ブログやホームページの読みやすさを考えるとき
重要なものは背景に使用している色と文字の色、
つまり「明度」の差です。


「明度」とは色の明るさをいい、
色の明るい方を「明度が高い」暗い方を「明度が低い」と表現します。

明度の低い色を使った背景に
同じように明度の低い黒色のような文字を使うと、判別がし難く読みにくいことになります。

また逆に明度の高い淡い色に
白のようなさらに明度の高い色を使った文字も読みにくいですね。

明度の高い背景(下地)には、明度の低い文字色を、
明度の低い背景には、明度の高い文字色を

使用するようにしましょう。

色には
「明度」のほかに、
「彩度」= 色の鮮やかさの度合い
「色相」= 色の移り変わり
があり、お互いに相関的な働きをします。




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

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



×

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