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




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


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

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

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


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

2009年12月26日

画像と文章の組み合わせ

■ 5-12 画像と文章を組み合わせる


●ブログやホームページに画像を使用する目的は
文字だけの文章で仕上げた構成では平滑になりやすく、さらに訪問した方の視点が活字に絞られることで、ブログに対する興味が半減してしまう結果になります。

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

●訪問した方は「書かれた文章を読む」ことが中心ですが、それだけではなく「書かれたものを補足する画像」を見て理解を深めます。

●文章で明確に情報を伝え、その内容を画像で補足する。(その逆もあります)

●この双方の利点を生かした構成をすることで、
「伝えたいことを伝える」ことが出来るブログに仕上げることができます。

●文章と画像とをうまく利用する…。
訪問した方の興味を促し継続をさせ、ブログの信頼性を高めることが目的です。


■文章・画像のうまい使い方


文章と画像を組み合わせるにはいくつかの方法が有りますが、
前回で確認した「画像の組み合わせ」の応用になります。



【例1】■ 画像を左揃えに構成
tosiji.jpg

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

左端に画像を表示して、その画像の下段から文章を始める。

ブログで多く見られる表示の方法のひとつで、
右に文章を表示するだけのスペースがないか、デザイン的にスペースを生かしたいときのレイアウトです。

使用している画像の横サイズが、記事表示枠の横幅をいっぱいに使用している時は
どうしてもこの表示方法になりますね。

HTMLは

<img src="http://…表示する画像のurl… />

の形で
画像のurlのみの記入ですから、あまりタグ類を気にすることなく使用できますね。

この表示方法は、画像横の余白部分が大きすぎると、
レイアウト的にはアンバランスになることがありますので、表示する画像のサイズや余白部分のとり方を考えて使用しましょう。

 
【例2】■ 画像は左揃え・文章は画像の右(1)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

画像の右に文章を回り込まして表示する方法。
ブログで多く見かけるレイアウトの一つですね。

例では、画像とその横に配置している文章の行頭が接触して表示されていますね。

画像の版面(はんずら)と文字面(もじずら)の間に余白がなく
くっついて表示されることは、画像の利点を消してしまい、文章も読み難くなります。

間に余白がないため
ゆとりや気遣いの感じられないレイアウトになりますので、避けたい画像と文章の表示です。

印刷やデザイン関係では、やってはいけない表示方法の一つですが
webでは堂々とまかり通っているレイアウトです。

使用タグ形式は
<img src="http://…表示する画像のurl… align="left"/>

属性と属性値 = align="left"

を使っていますが「align」の特性上どうしても面(つら)が接触してしまいますね。


【例3】■ 画像は左揃え・文章は画像の右(2)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

「例2」の属性を変えた文章の回りこみ表示で、画像の右に若干の余白を取り、文章を表記しています。

画像と文章にお互いの干渉が少なく、それぞれの特性が生かされます。

余白の大きさは、
本文で使用している文字の一文字分が適宜なサイズになります。

「見せるための画像」と「読ますための文章」の配置といえます。

タグの形式は
<img src="http://…表示する画像のurl… align="left" style="margin-right:●px" />

属性と属性値 = align="left"
属性と属性値 = style="margin-right:●px"
解除タグ   = <br clear="all">

「揃え」と「余白」を指定する属性を同時に使用しています。

文章の回りこみには、このタグの使用を勧めますので、
タグの形式を覚えてください。


【例4】■ 画像は右・文章は左(余白有り)
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

「例3」の文章の右回り込みの逆、左回りこみですね。

画像を右に表示して文章は左に表示しています。
このレイアウトもブログではよく見かける表示方法です。

デザイン的な効果は「例3」と同じくらいありますが、
画像が右に寄っていますので

ブログ構成が2カラムでサイドが左配置の時には
バランスの取れたレイアウトになるでしょう。

逆に右配置のときは右側が重く見え、
バランスをよく考える必要があります。

このことは、左配置にも言えますが、
訪問した方の目の動き(流れ)からは、画像の右よりは
左配置の方が、まだいいレイアウトになります。

タグの形式は
<img src="http://…表示する画像のurl… style="margin-left:●px" />

属性と属性値 = align="right"
属性と属性値 = style="margin-left:●px"
解除タグ   = <br clear="all">

「align="right」だけの使用だけでも表示は可能ですが、
画像と文章が接触し、行末がうまく揃わない形で表示
されますので、

例のように、画像の左側には決まったサイズの余白を
入れるように設定したほうが見栄えの良いレイアウト
になります。
 

【例5】■ 文章毎に画像は左右交互に。
tosiji.jpg三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。

tosiji.jpg漢(後漢)帝国の末裔「劉備玄徳」と、血を分けた兄弟にも類する「諸葛亮孔明」「関羽雲長」「張飛翼徳」らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。

アフィリエイトのページでは
1ページに商品を2、3点紹介することが有りますね。

何枚かの画像を使用するページを作るときに、全ての画像を
左あるいは右にそろえて表示すると、動きの感じられない構成に
なることが多いです。

ページのレイアウトではバランスを取ることも重要で、
「左に傾きすぎず右に重過ぎず」のバランス表現が必要です。

左右のバランスを取ったレイアウトは比較的に安定感がみられ
グラフィックデザインの世界では、交互に画像を配置する手法も
よく使われます。

機会があれば、この表示法を試してみてください。
バランスとは何かを理解できると思います。

タグの形式は「例3」と「例4」の組み合わせです。

「左画像」
属性と属性値 = align="left"
属性と属性値 = style="margin-right:●px"
解除タグ   = <br clear="all">

「右画像」
属性と属性値 = align="right"
属性と属性値 = style="margin-left:●px"
解除タグ   = <br clear="all">


【例6】■ 画像は左・文章は右・行頭揃え。

tosiji.jpg





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

画像の使用範囲を過ぎても、文章は画像の下段に戻らずに
指定された行頭のライン内に表示される方法です。

あまり見られないレイアウトですが、
余白を生かすレイアウトのひとつの手法です。

使用しているタグは、
今まで紹介したタグの形式とは全く異なります。

「table」機能や「float」機能を使いますので、
HTMLの「table」や「float」のときに詳しく確認します。



比較的に簡単に使える
画像と文章を上手く組み合わせる方法を確認しました。

ほかのブログに訪問したとき、
「例1から6」ようなタグを使ったレイアウトに出会います。

「このブログの画像の配置は…を使っているのだ」

と意識しつつ読み進めてみて下さい。
必ず自分でも使えるようになります。

注)
写真などの画像をネットから取得して使うことは
著作権の問題にふれる恐れがありますので注意しましょう。


実際に利爺の身近なところでも著作権や肖像権の問題で
閉じてしまったサイトもあります。



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

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



2009年12月24日

画像の表示位置(2)

■ 5-11 画像を組み合わせる

●ブログやホームページなどのウェブサイトは、全体の構成を考えて、統一性のあるデザインすることが大切です。

●タイトルの文字の大きさ・文字の色、見出し項目、記事で使用している書体、文字の大きさや行送り(高さ)など、一つの流れに沿ったデザインの統一性が重要になります。

●文字の強調や画像の表示も、自分のコンセプトを基にトリミングや配置をすべきでです。

●文字や画像・表などの使用は
大き過ぎず小さ過ぎず、全体のバランスを考えたサイズでの表示がポイントになります。


画像を思った位置に自由に貼り込む方法を、前回、確認しました。
貼り込みは理解できていると思いますので

【複数の画像を組み合わせる、HTMLの使用方法を確認します。



画像を
「横」や「縦」に並べる簡単なHTMLの組み合わせをみてみましょう。

「画像を横に並べる」

画像を横に並べて表示するには、画像img「url」をそのまま改行無しで続けて記入します。

「HTML」
<img src="http://…@の画像url…/><img src="http://…Aの画像url…/>

【例1:横並び画像】
tosiji.jpgtosiji.jpg


「画像を縦に揃える」

画像を縦に並べて表示するには、一枚目の画像img「url」を記入して、その後に「改行<cr>を入れ、2枚目の画像urlを記入します。

「HTML」
<img src="http://…@の画像url…/>● ← 強制改行<cr>を挿入
<img src="http://…A画像urlL…/>

【例2:縦揃い画像】
tosiji.jpg
tosiji.jpg

「例1」や「例2」のように、記入するHTMLタグを
連続で記入するか、改行を入れて記入するかで横並び、縦揃いの表示になります。

「例1」や「例2」で
表示している画像は互いの画像が隙間なく、画像と画像の境目がありませんね。

このように画像同士を隙間なく、境目がないように表示する方法を
デザインや印刷では「毛抜き合わせ]といいます。

何枚かの写真を一枚の様に見せるテクニックは、個人の日記ブログとしては面白いですが、
アフィリエイトの商品の紹介ために使用する画像の配置では、いい使い方ではありません。

組み合わせるために、何枚かの画像を貼り込む場合でも、
相手に分かりやすい画像のレイアウトが必要です。

さらに上記「例1」のタグの使用の方法は、厳密に言えば間違ったタグの使用になりますので、
CSSに準拠した方法を薦めます。


画像を右や左に回り込ますには、それなりのタグの使い方が有ります。

タグの記入形式は「例1」と同じです。
そのタグに「回り込み」のための「属性と属性値」を追加します。

画像を右側に配置する属性には

@「align="left"」 = 右に回り込ますためのalign属性
A「style="margin-right:●px 」 = 右に余白を空けるmargin属性

があります。
属性の使い方でタグは色々な形に変わりますが、使いやすい上記2種を確認します。

「align="left"」

<img src="http://@の画像url… border="0" />

赤丸印の場所に「 align="left"」を追加します。
その後ろには改行無しで、次の使用する画像urlを記入します。

貼り込む画像が「img@・imgA」の2点のときの「 align="left"」属性の追加場所は、
画像<img@●>の要素内「●」の部分です。画像<A>には挿入しません。

「HTML」
<img src="http://@の画像url… border="0" align="left/><img src="http://Aの画像url… border="0" >

2点以上のときは
<omg@●><imgA●>の各要素内に挿入して<imgB>はそのままです。
つまりタグの<img@>にも<imgA>も「align="left"」を書き込み<imgB>には書き込みません。

表示結果は「例1」と同じ結果になりましたが、タグの正式な書き方です。

「 align="left"」は回り込みの属性として使っていますが
右に回り込ますのに属性値は「left」になっています。

感覚的にイメージ的には、
右に表示するのだから「right」ではないのかと思いますね

「 align="left"」の align 
は「揃える・並べる」でしたので、基準の「left」にある画像に揃えるの意味になります。
つまり、
最初の画像の表示位置は「左側」(left)にして、次の画像は「左の画像」に揃えてその「右」に表示という意味で捉えます。

「align="right"」にすると表示が逆になります。

このほかに「align=""」属性の仲間には
「vspace=""、 hspace=""」を付け、位置を指定する方法もありますが、ここでは省略します。


「style="margin-right:●px 」

このタグは
●画像を右側に配置する(回り込み)ための属性 ⇒ 「align="left"」
●余白を指定するための  ⇒ 「style="margin-right:●px 」
属性を組み合わせます。

「align="left"」で右に回りこみ
「style="margin-right:●px 」で指定された余白を取る…。  の形です。  

画像と画像の間に余白のないレイアウトは
ページに窮屈感を当てえますので、画像と画像の間には、見栄えのいいように余白を設定した方がいいでしょう。

●空白を生かすこともデザインの基本ですね。

使用するタグを確認します。

@の画像urlの赤丸印の場所に
「align="left" style="margin-right:●px」
と入力します。

<img src="http://@の画像url… align="left"
style="margin-right:●px"/>
<img src="http://Aの画像url… "/>

の形式です。

画像を表示して見ましょう。

【例3】
tosiji.jpgtosiji.jpg

画像と画像の間に●px分の隙間が空きましたね。
●pxの単位を調整することで、余白の大きさを自由に設定できます。

「style="margin-right:●px 」を使用するときは
「align="left"」の属性がなくても結果は同じですが

属性の使い方を取得するためにも、意味の通じる使い方に慣れた方がいいでしょう。

ブログのレイアウトのために、このタグ形式を覚えましょう。

そして
@「align="left"」
A「style="margin-right:●px 」

の属性を使用した後は、属性解除のタグ
<br clear="all">
を入れます。

解除タグを入れることによって、右や左の回りこみが解除され
次からは、元通りの初期設定(文章や画像の左揃え)に戻ります。

【例4】
tosiji.jpgtosiji.jpgtosiji.jpg

「例4」は3枚の画像を横一列に配置した例で「例3」の応用です。

タグの使用方法は前述したとおりで、使用画像が増えているだけです。

【例A】
tosiji.jpg

tosiji.jpg

「例A」は「例2」と同じですが
上の画像と次の下の画像の間には空白行(改行)が挿入されています。

空白のサイズは、記事の行の高さ(行送り)を定義したCSSに準拠しています。、
定義した「line-hight:●px」の値が基準になります。

一行や二行分の空きは
改行(空白行)=<br>の数で調整するのが一般的です。



次回は
回り込みのタグ用いて「画像と文章」の組み合わせを確認します。



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

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



2009年12月22日

画像の表示位置(1)

■ 5-10 画像の表示位置を指定する


●見出しや文章の一部を強調する。
●文章や画像の表示位置もブログ全体の視覚的効果を考えて設定する。
などは、ブログの大切な要素のひとつですね。

伝えたいことを訪問した方に明確に伝えることの出来るサイト。
ブログやホームページ発信の大きな目的の一つです。

見出しや文章の一部を強調することや、画像の使用などは、
その明確に伝えたい効果を助けるためのものです。

簡単な文章の表示位置については前回確認しました。
今回は画像の表示位置の設定を確認してみす。

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

画像の表示位置に使うアイコンも、文章のときと同じ三つのアイコンです。 

表示に必要な画像urlを呼び出し、そのurlを選択してアイコンをクリックする方法ですね。



使用する画像のサンプルは「利爺のロゴ」を使用します。
  (アップロードした画像を記事面に貼りこみ、その画像のurlをマウス
  で指定して反転表示したら、必要なアイコンの選択してクリックですね)

左揃えに表示して見てみましょう。

【表示例】
tosiji.jpg

左揃えアイコンをクリックして画像を表示しました。

使用しているHTMLは

【HTML】

<div style="text-align:left;"><img src="http://…使用画像url…/>
</div>




の形式で括られます。

青文字
<div style="text-align:left;">〜</div>
は画像の表示位置を表し

<img src="http://・・・・ />
が画像呼び出しのurlで、入れ子の形です。

赤文字で示している属性が「text」になっていますが、あまり気にする必要はありません。
画像を「text」の一つとして見ても構わないのです。

どうしても気になる方は
text  →  img(イメージ:画像)や margin(マージン:余白)
に変更します。
正式なHTMLの記入です。

論理的には文章のタグと同じ構造です。

「左端」「中央」「右端」への配置は
文章の表示指定と同じですので、詳しくは前回の「文章の表示位置を指定する」で再確認しておきましょう。

この左端配置の表示を見ると
枠内の左の罫線にピッタとくっ付いていますね。
レイアウトの観点から見ると上手な配置とは言えません。右端も同じです。

このような配置は窮屈感を与えますので、使用文字の1文字程度の空きを左端に作って表示するのがレイアウトの基本です。


■画像の自由位置への貼りこみ

アイコンを使っての表示位置指定は、左端・中央・右端などと簡単な位置の指定ですが
貼り込みたい場所を自由に指定して、画像を表示させるタグを確認します。

【画像の左の余白を指定する】
  ※罫線の右側に余白を指定する… 同じ意味です。

【表示例】
tosiji.jpg

表示画像は左から1文字分(12px)の余白を設定しています。

タグは
<div style="margin-left:12px"><img src="http://…使用画像url…/></div>
 
このタグは、画像や文章の開始位置を指定するために、比較的によく使われている形式です。

 「margin(マージン)」は  ⇒ 縁、フチ、余白の意味です。

属性  ⇒  margin-left(左からの余白)
属性値 ⇒  12px(余白の長さ)

左の縁(margin-left)から「12px」の余白を取って、その位置から画像(または文章)を表示しなさい。
という意味になります。

属性を「 left、right、top、bottom 」に差し替えて使用します。
今まで使用したタグと同じ形ですから、覚えやすいですね。

【marginの上・下・左・右の余白をまとめて指定する】

<margin>タグは属性として、<margin-left: margin-right: ・・>の様に、単体で使うほかに

 <div style="margin:@px Apx Bpx Cpx;">


の形式で
「ひとつの属性に複数の属性値」をまとめて指定する方法があります。

<margin>に@からCまで指定した空白を取りなさいというタグです。

    注)
   ●@やAなどの数字は説明の必要上、表記していますので
    タグ使用の際は@などの数字を書き込む必要はありません。

指定方法に、leftとかrightのような細かい指定の属性値を入れる必要が無く

<"margin:@px Apx Bpx Cpx;">

 @ = 上(top)
 A = 右(right)
 B = 下(bottom)
 C = 左(left)

表示の指定は@の上から始まり
「時計回りの順」で位置が決まっていますので、必要な箇所に指定したいサイズを書き込みます。

使い慣れている言葉「上下左右」の順ではないのですね。

よく使用されるタグで、CSS(スタイルシート)を開いたときにもよく目にします。

使い方の例は

●上から12px の余白
●右はなりゆき(指定無し)
下に12pxの余白
左から 108px の位置

に画像を表示したい場合は

【HTML】
<div style="margin:12px 0px 12px 108px;">

の属性値の記入順(文字色別)になります。
  ↓
【表示例】
tosiji.jpg

余白が必要のないところは、
そのまま 「 0px  」として残しておきます。

サンプル画像のような「小さい画像」の表示例の場合は
「右の余白」の指定は必要ないですね。
小さい画像ですので、左から余白を取って画像を貼り込んだら、右のサイズは余っているサイズです。

そのことをデザイン用語では「なりゆき」と言います。「成り行きのままのお任せサイズ」の意味です。

「margin」タグは、表示位置指定の自由度が高いため、
慣れてきたら使いやすいタグになります。


この利爺のブログでは、
文字の大きさの単位を「px」で使っていますので、余白を指定する単位も統一する上で
「px」を使っていますが、「pt」など使いやすい別の単位で指定しても構いません。

ただし使用文字の単位を「px」にしていれば、画像の単位も「px」で、marginnなどの単位も「px」
で指定するようにした方が楽です。

使っている単位を統一しておくことが理想です。

余白サイズも、自分のブログで使用している基本的な文字サイズが12pxでしたら
12pxの倍数で指定した方が、文章と画像の面(ツラ)が揃ってスッキリします。

文字の大きさ「12px」の2個分の余白なら(12×2=24:余白24px)という使い方になりますね。
余白は使用文字の「×個数」で計算できるようしておきましょう。


●属性「margin」に

<div style="margin:●px;">

のように指定を一つだけにしますと、上・右・下・左の全ての余白を同じサイズに指定した意味になります。


「margin」属性と同じような
余白指定をする「padding(パディング)」と言うタグがあります。

「margin」と「padding」は厳密に言えば、ペアで使って、余白を調整するタグです。
両方のタグをうまく使えれば、色々な形の画像の配置や文章の表記が出来ます。

「margin」   ⇒ 要素の外側の余白
「padding」  ⇒ 要素の内側の余白

その使用法を一緒に覚えることが理想的ですので、余白のHTMLの時に再度詳しく確認します。



次回は、
ブログの表示上で重要な役割を果たす、画像の組み合わせを確認します。



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

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



2009年12月21日

文章の表示位置

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


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

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

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

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

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

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

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

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

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

の三つのアイコンです。

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

【左揃え】

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


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

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

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

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

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

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

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

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

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

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


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

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



使い方の応用例

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

    ↓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

【中央揃え】

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


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

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

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

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

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

【右揃え】

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


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

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

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

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



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

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

2009年12月19日

引用:<blockquote><q>

■ 5-8 文章に引用を設定する


ほかの人の文章を自分の書いている記事に引用して、参考にしつつ自論を展開し記事を纏めていく方法は
ときとして重要な場合がありますね。

引用して文章を書き上げる手法は、学会誌などを中心とした、お硬い世界だけの
専売特許に見られがちですが、

気軽に発信できるブログでも、
「引用の方法を誤らなければ」
使ってもいい手法であり、悪いことではないのです。

「引用」タグについて確認します。

Seesaaブログでの引用タグの使用は、
左から5番目のアイコンのクリックです。
ki-ic01.jpg
             ueya.gif

Seesaaブログが引用タグをとして使用している
このアイコンの形は
日本語入力ソフトのワードでは「インデント」用のアイコンとして使用されていますので、ワープロを頻繁に利用している方には間違えやすいですね。

   インデント ⇒ 後述のインデント記事にジャンプ

引用タグの使い方を確認してみましょう。

下記の例は文章を引用したときの表示例です。

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

漢(後漢)帝国の末裔「劉備玄徳」と、血を分けた兄弟にも類する「諸葛亮孔明」「関羽雲長」「張飛翼徳」らを中心としたストーリーの展開には、この利爺の年代でも心沸き立つものがある。

引用のタグは<blockquote>ですね。

ほかの人が書いた文章を、そのまま自分のブログ記事で使うときに
「引用です」と表示する意味合いで使います。

<blockquote>タグは長めの文章を引用する時に使用します。

「block」はブロック・塊。
「quote」は引用する。
  ↓
「blockquote」= 長い文章を引用するの意味になりますね。

短い文章を引用する時には、quoteの省略形<q>タグで行います。

<blockquote>はブロック要素、
<q> はインライン要素として用います。


例のように
タグ<blockquote>で囲まれた記事は
IEやFirefoxのプラウザではブログ本文より、引用した文章の行全体の開始位置を下げて、さらに文章を枠で囲んで表示しています。

引用した範囲を示す記号には

「 ' 」(引用符:シングルクォーテーション)や
「 ”」( 二重引用符:ダブルクォーテーション )

を用いて表示するプラウザも有るようです。

この表示形式は符号(引用符・二重引用)の名前のとおりで
書籍や論文などで、ほかの文章を引用したときによく使われています。

ほかには
『』  「」  ()  <>が一般的によく使用されています。

親しんでいる新聞では
会話や語句の引用に  「」  『』  ” ” を用い、
” ”はどうしても必要な場合に使い、乱用はしないことになっています。

引用した他の記事(文章)をもとに、自分のブログを構成していくことが一般的な使用ですが、引用ためには気を付けるべき注意事項があります。

例文で引用している記事は
利爺の管理しているブログ記事の一部です。

利爺の文章ですから引用しても特に問題は発生しませんが、

引用の多くは、ほかの人の文章を利用するのですから
確認しなければいけない事柄が多々あります。

引用に関する注意事項や著作権に関する点が

  参照 ⇒ フリー百科事典『ウィキペディア(Wikipedia)』 「引用」

に纏められていますので、参考にしてください。

軽々しく引用して、
相手とトラブルを起こさないように気を付けましょう。

相手に対する気遣いがもっとも大切で、もっとも重要です。

………

インデントとは

文章を書くとき、一般的には一文字分を下げて書き始めますね。 
 ※小説などで見かける二字や三字を下げる編集方法もあります。

ある程度の文章を書いたら「改行:(Enter)」で文章を一つの段落として締めますが、次の段落の書き始めも、また一字下げで書き出します。

文章はその繰り返しです。

ワープロソフトでも、一字下げで入力する形式を、
初期で設定しておくと、文頭の字下げは自動的に行なわれますね。

この文頭の字下げをインデントと言います。

HTMLの初期のころ、インデントの代替タグとして
上記の引用のためのタグ<blockquote>が使用されていたと言われています
(HTML4.0以前?)

Seesaaブログでの引用のためのアイコンが
ワードなどでインデント用として使用しているアイコンと同じものになっているのは、代替で使用した名残ではないかと、個人的には思っています。

現在ではインデントの設定のためには
CSS(スタイルシート)に書き込むことを推奨しています。

その記入方法はCSSの説明のときに確認します。

しかし、文字入力のときにインデントをいちいち設定しなくても

頭一文字に空白(スペース)を打ち込むか、
テンキー近くの矢印キー(→)でカーソルの位置を進める方が簡単ですね。

この方法が簡単で
慣れていれば、設定に悩むよりそれらの方法で入力した方がいいでしょう。

規則に縛られて
HTMLは難しい、あるいは文書入力には難しい定義があると考えるより
自分なりの方法を考え、ある程度理解したときに摺り合わせをし
その段階で比較して理解したほうが、まだまだ先に進めます。



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

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

2009年12月15日

取り消し線:<del><strike><s>

■ 5-7 文章に取り消し線を引く


文章の重要な箇所を強調することは、
書いている当人の意思を伝える手法にもなりますね。

文章に取り消し線を引くタグについて確認しましょう。

seesaaブログの取り消し線を引くアイコンは
入力枠上部のアイコン一覧の「」ですね。
ki-ic01.jpg
          ueya.gif


文章に取り消し線

「例1」  ⇒   利爺です
「例2」  ⇒   利爺です
「例3」  ⇒   利爺です


例の1〜3まで、
全て取り消し線のタグを使っています。

タグの使用例は

「例1」  ⇒  <del>利爺です</del>
「例2」  ⇒  <strike>利爺です</strike>
「例3」  ⇒  <s>利爺です</s>

結果の表示は同じですね。

取り消し線は、
語句や文章の文字の中央部分に引かれた線のことで「消し」を意味します。

記事内容の取り消しをする目的で用いられますね。

一般的に記事内容が誤っていたり、公開した情報を訂正することに使用され、修正しましたという意味合いで、訂正した語句や文章を削除するのではなく線を引いて残して置く時に使用されます。

ワープロソフトのワードなどでも、
取り消し線を文字飾り機能として利用できるようになっています。


●「例1」 <del>利爺です</del>

例1は<del>の使用です。
使い方の一部の説明は、前回のアンダーラインタグの使用のときに述べていますので参照して下さい。


<del>は delete の略で、削除を意味します。

文章を修正するとき、どの部分が削除(修正)されたのかを示したい場合にこのタグを使用します。

IEやFirefoxでは取り消し線で表示されますが、サポート(対応)していないプラウザもあるようです。

このタグは使用する場所により
ブロックレベル要素、インライン要素としても機能します。

seesaaブログの
入力アイコンでは、この<del>タグを使用しています。


<del>タグは強調する意味合いを含めて使用しますが、
下記の<s><strike>タグ類とともに、
ブログでは逆に、
デザインの組み立て上、乱雑に見られる恐れがありますので
個人的には、使用を勧めるタグではありません。

   参照 ⇒ 記事欄アイコン「下線」


●「例2」⇒ <strike>利爺です</strike>
●「例3」⇒ <s>利爺です</s>


<strike>は
「目立つ」「人目を引く」の「striking」から来ているタグでしょう。 
<s>はその省略形です。

今日では<strike><s>の両方とも推奨されていないタグになっていますので
いずれは使用できないタグになるでしょうが、現時点では取り消し線用のタグとして使えます。

HTMLも時代とともに改善を重ねて、より使いやすくなり、論理的にも整理されていますが、バージョンアップしたHTMLや以前のバージョンが入り乱れて使用されています。

Aのプラウザは新バージョンで、Bでは旧バージョンと
まだまだ統一された使用にはなっていません。

各プラウザではHTMLの多くのバージョンにも対応できるように、
タグ類をなるべくCSSで設定して使うように推奨しています。

CSSでの使用例を確認してみましょう。


CSSでの取り消し線

プロパティ  ⇒ 「text-decoration」 に
  値     ⇒ 「line-through」 を指定。

■使用の例
<span style="text-decoration:line-through">利爺です</span>
  ↓
■表示の例
利爺です


例で使用している「値」は「text-decoration」に対する一つの値です。

CSSでは、同じ「プロパティ」で「値」を変えることによって色々な表現が出来ます。

none 
line-through 
underline 
overline  
blink

⇒ 初期値(何も表示しない) 
⇒ 取り消し線(今回の記事)
⇒ 下線(前回の記事)
⇒ 上線
⇒ 点滅

このように、タグの直接使用よりは、むしろCSSで定義して、数多くあるプラウザに対応する使用の方法が望ましいとされ推奨されています。

タグの使用方法やCSSでの定義の基本が理解できれば
ブログやホームページの作成がスムーズになり、かつ楽しく発信が出来ます。

CSSの利用の方法は
CSSのシリーズで確認します。



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

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

2009年12月09日

下線を引く:<u><ins>

■ 5-6 文字・文章に下線を引く


ブログ記事の重要な語句や文章が的確に示され、記事中でも邪魔にならない程度に強調を使い
全体に気を遣って書き上げられた記事は、読んでいても気持ちのいいものです。

重要な箇所を強調することは、読者に対する気遣いでもあります。

ポイントを明確に示し、読みやすく分かり易いように書いている記事は
その内容も、書いている本人にも信頼がもてますね。

語句や文章に下線を引くタグについて確認しましょう。

seesaaブログの下線を引くアイコンは、
入力枠上部のアイコン一覧、左から3番目の「」ですね。
ki-ic01.jpg
        ueya.gif

前回の<strong>や<em>と同じように様に、下線を引くタグにも種類と各々の使い方が有ります。


文章・語句や文字に下線

 「例1」   ⇒   利爺です
 「例1」   ⇒   利爺です


例1・2もやはり見た目は同じ表示です。

使用しているタグは
「例1」 <ins>利爺です</ins>  ← アイコンでの入力。
「例2」 <u>利爺です</u>     ← 直接入力。
です。

●<ins>タグの使用例

<ins>は = insert(挿入) の略。

<ins>タグで囲まれたテキスト部分が、訂正のため後から挿入されたものであることを明示するためのタグで、IEやFirefoxでは下線付きの文字で表示されます。

<ins>は<del>(入力アイコン「 」)と一緒に使われることが多いタグです。


■使用の例
沖縄県の人口は概算で<del>120万人</del><ins>130万人</ins>です。
  ↓
■表示例
沖縄県の人口は概算で120万人 130万人です。



一般的には訂正する文章を 120万 横線で消し、その箇所を明確して、新たに修正文を書き込み、130万 のように下線で強調して表記する方法です。

論文や学会誌などでよく見られますね。

よく目にする広告チラシなどでも
時間限定の割引サービスなどで金額を修正してお客にアピールし、集客をする手法として結構使われていますね。

個人的には文章の表記上では、使用を控えたいタグです。

一旦書き上げた記事に、訂正のための横線を引き
修正後の文字を追加した形は、記事やその内容が乱雑に見えます。

論文ではないのですので、間違えた文章は書き換えた方がスッキリして
読者にも分かり易い文章になります。

その方がブログも記事も落ち着きます。

seesaaブログでは、下線を引くためのタグに<u>ではなく
<ins>タグを使用しアイコンに納めています。


<ins>が<u>より論理的強調をするタグであれば
検索エンジンの対策を取れるタグになりますが、そのへんは不確実です。

●<u>タグの使用例

<u>は = underline(下線)の略です。

語句や文章を強調するときによく使われます。

見た目のアンダーラインには、<u>と<ins>のほかに、
リンクの下線がありますね。

語句や文章の下線は<u>や<ins>タグの使用で表示しますが、リンクの下線は自動的に表示されます。
リンクの下線は、下線を表示しないようにCSSのプロパティを再定義しない限り消せません。

リンクの使い方や書き換えの方法は、ここでは詳しい説明は省略します。
予定しているCSSの調整で、詳細に確認していきます。


<u>タグは
文章にアンダーライン引く機能です。

読者にとって強調してある語句や文章には、
目が行くもので、的確に強調された文章には読みやすさや信頼感があります。

一頁の記事の中に下線を引いたり、太い文字を使ったり、文字を大きくしたりと乱雑に使うと、逆に読み難い感じをあたえます。

読者に対して「この文は重要です」という意味で使うのが
本来の使用方法であり、文章の飾り付けで使うのではないのです。


下線と同じような文の強調には

「利爺です」・・・・

のように横書きは語句の上に、縦書きでしたら語句の右側に点(・・)を打つこともあります。
タグは<ruby>です。

雑誌や書籍などでよく見かけますね。
(注:プラウザのFirefoxは未対応ですので、点が表示されません)



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

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

2009年12月06日

強調タグ:<em><i>

■ 5-5 emタグ

文章(記事)を強調するのに用いるタグに
表示上では同じに見える<strong>タグと<b>タグの比較をしました。

今回も
見た目には同じように表示される<em>と<i>タグの性質を確認してみましょう。

ki-ic01.jpg
     ueya.gif

左から2番目のアイコンの「」です。
イタリック体は斜めに傾いた書体のことで、本来はアイコンの印「」はイタリック体を表しています。

【強調の表示】

文字強調の例

「例1」  ⇒  利爺です
「例2」  ⇒  利爺です


「例」の表示の見た目は「1、2」も同じですが
全く異なるタグを使用しています。

「1」は <i>〜</i>のタグ「イタリック体」を
「2」は <em>〜</em>タグ「論理的強調」の使用です。

<i>タグは
文字の形状を表すタグで、イタリック体で表記するタグになります。

プラウザが標準で持っている「書体」は明朝・ゴシック体が基本ですね。

デザインの世界や印刷業界では業務の性質上
「明朝」「ゴシック」を主に「極細」「細」「中」「太」「極太」「角」「丸」などと
各ファミリーの形状や太さの異なる書体を数多く揃えて、パンフレット、ポスター、雑誌、書籍などの製作に対応しています。

それら書体を使い分け、組み合わせうことによって文字を強調しています。
イタリック体もその仲間に入ります。

webの世界では
文字の使い方や見栄えよりも、情報をいかに速く正確に伝えるかが主な目的です。
各プラウザが書体に対応でき、使用できる書体もある程度限られています。


そのらがWWWに準拠した書体です。

数少ない書体を使用して書き上げた記事を
読者にいかに強く印象付けるかの手段のひとつが文字の強調ですね。

雑誌や新聞などの出版物に比べて、使用出来る文字が制限されているwebのブログでは
「文字や文章を強調する」ことの意義は大きな役割を持っています。

「1」の強調は「見た目の強調」

正体で書かれた記事の中に、形の異なる斜体(イタリック)で文章や語句が表示されていると
読者の目線は、そのイタリックで表示されている文章を追いますね。

明確に読んで欲しい記事の部分や
その章の中の重要なポイントを、書体を変えることで喚起する方法です。

<bold><bolder>のタグで文字を太く表示したり、文字の大きさを変更したり
文字に色を乗せ注意を引くのも、同じように強調と言いますが
ここでは注意を引く程度の「見た目の強調」です。


「例2」は
<em>〜</em>のタグを使っています。

    em  =(emphasis : emphasize)=強調、強調する意。

<strong>と同じような論理的強調する時に使用します。

IEやFirefoxのブラウザでは斜体で表示されますが、対応していないブラウザもあるようです。

強調の度合
は<strong>タグの方が強く<em>はそれに続きます。

この<em>は<strong>とは異なり文字を太く表示しません。

あえて太字にしたいならタグを「入れ子」にして使用します。

   【タグ形式】                  【表示例】
<b><em>利爺です</em></b>  ⇒ 利爺です
<b><i>利爺です</i><b>      ⇒ 利爺です

<b>タグ、<em>タグも
インライン要素ですから、同時に使用することが出来ます。

seesaaアイコンの形は「I」ですが
<em>タグで文章を括るようになっています。


<strong>タグの時にもふれましたが、SEO上の対策かも知れません。

イタリック体は最近の傾向では、文章の中の語句を強調するときに使われるほかに、引用文などに使われる例が多くなっています。
そのような時に使うタグは論理的強調の<em>タグではなく、イタリックの<i>タグです。

記事入力の際に入力用アイコンで<em>タグを使うか
または直接入力で<i>タグにするのかは本人の自由です。

出来るなら論理強調の<em>タグの方がいいのですが、
論理的強調はSEOでどのようにうまく使用するかが重要になります。

一記事の中にに10個も20個も強調タグを多用することは
検索エンジン対策上は、逆にマイナス(スパム)要因だと言われています。

文章構成をよく見て、SEO対策上に重要だと思う語句や文章を
確認して適度に、ほどほどに使いましょう。



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

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


2009年12月04日

強調タグ:<stong><b>

■ 5-4 strongタグ


seesaaブログに記事入力用のアイコンの使用について、下記の引用文の説明があります。

記事の入力項目である「内容」を装飾するには、通常HTMLを使ったサイト構築では、自分自身で1つ1つタグを入力して行く必要がありました。例えば、文字を強調したい場合には<strong>といったタグを利用するといった具合です。

しかしながら、シーサーブログでは、その手間を省くべく・・タグ打ちの部分については、対象とする文字を選択し、アイコンをクリックするだけで、文字の装飾等が出来るようになっています。
  …以上seesaaヘルプより引用… 

参照 


seesaaブログのヘルプを開いてみて、何か違和感を感じますね。

ヘルプで入力用アイコンの使い方を説明しているとき用いているアイコンと、
記事欄上部の入力用アイコンの形が異なっています。

【画像1:ヘルプのアイコン】
se-hp01.jpg
 ↑ 画像をクリック・元画像が開きます。

【画像2:記事欄アイコン】 
kij-01.jpg
 ↑ 画像をクリック・元画像が開きます。

記事欄上部のアイコンは、マイクロソフト・オフィスなどと
同じようなアイコンが使われています。

しかし、
ヘルプで説明のために使用しているアイコンと
記事入力を簡便にする目的のために設置しているアイコンが、同じものでないと混乱しますね!


記事入力で使う頻度の高いアイコンを少し詳しく確認してみます。

■強調=strongタグ

ki-ic01.jpg
  ueya.gif

左端の「B」印は文字を太く(強調)するタグの入ったアイコンです。

「利爺とゆったりアフィリエイト〜」のような記事入力の段階で
「利爺とゆったり」の語句の部分を強調して太く表示したいときに、その語句の部分をカーソルでなぞると、反転して「白抜き」表示になりますね。

その反転した状態で、上段の「B」アイコンをクリックすると、
「strong>利爺とゆったり</strong>
のように、指定をした範囲は<strong>タグに囲まれ、自動的にタグが記入されます。

seesaaヘルプで言う

「・タグ打ちの部分については、対象とする文字を選択し、アイコンをクリックするだけで、文字の装飾等が出来るようになっています。」

アイコンを使用した「文字の装飾」方法です。

各アイコンの用途は異なりますが
カーソルでの範囲の指定、アイコンで該当するHTMLタグを入力する方法は同じです。

アイコンを使って
HTMLタグを自動で入力する方法になりますので覚えておきましょう。

アイコンの「B」をクリックすると、文字や文章が太く表示されますが、
「B」の中身は語句や文章を強調するときに使う強調の<strong>タグですね。


文字強調の例

「例1」 ⇒ 利爺です
「例2」 ⇒ 利爺です
「例3」 ⇒ 利爺です


例の1、2も表示上は同じ文字にみえます。
  
見た目は同じでも…

「例1」は<strong>〜</strong>の強調タグを

「例2」では<b>〜</b>の太字タグ

を使用しています。

ブラウザでの表示はどちらも太字で、見た目は同じですが、
「bold」「strong」タグが持つ意味は異なります。

<b>タグは
「bold」の意味で、他の文字と比べて書体の太さの違いを出す時に使うタグで、見た目の強調です。

<strong>タグは
文章の論理的な強調を表すタグと言われます。
他の文章と比べて、強調したい表現などとき使用するタグになります。

検索エンジンは<strong>タグを重視していて、
文章の中に<strong>で強調された文章や語句があれば、
重要な語句として取り上げると言うことを聞きます。
(真偽は分かりません)

「bold」には次のランクのさらに太い文字にする「bolder」が有りますが
「strong」はそれ以上の太字には出来ません。

seesaaブログが文字(文章)修飾のため、強調用のアイコンの形が「bold」を表す「B」形であっても
そのアイコンを使用したとき、入力されるHTMLに「strong」タグを使っている背景には、
字や文章をただ単に太くすることを目的にしているのではなく、
強調を表す「strong」を使用して、検索エンジン対策としているのが根底には有るのかも知れません。

例のように
見た目は同じでも、意味の異なるタグが有ります。

今後はいろんなパターンが出てくると思いますので、両方の意味を頭の片隅にでも入れていてください。

例3
利爺です

のように文字を強調して、さらに文字に色を乗せる時は、どの様な順序でタグを配置しますか。

@<span style="color:#0000FF;"><strong>利爺です</strong></span>

A<strong><span style="color:#0000FF;">利爺です</span></strong>

両方とも表示の形は同じですね。

<strong>タグの例でも述べたように、
検索エンジンが<bold>より<strong>を重要視しているという
観点からすれば

個人的には
@の「対象(利爺…)の直前」にある<strong>タグの使い方の方が
Aの「タグ類の先頭」に<strong>を置く組み合わせよりは
良いのではと思っています。

@では、強調するテキストの直前にあり、強調すべきのが「利爺」であると分かりますが、

Aは、要素全体の前に強調タグが置かれているため、強調するのは文字色もテキストも含むと考えられます。

強調には優劣は無いと思われ、あまり気にすべき問題ではないでしょうが、論理構成上は気になります。

検索エンジンのアルゴリズムやシステムの専門ではないので
到底理解できる問題ではないですが、個人的な感覚での使用順序の見方です。




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

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif

2009年12月02日

記事欄アイコンの使い方

■ 5-3 記事入力用のアイコン


エントリー記事を入力しているとき
入力欄の上部に設置されているアイコンや記号類が気になります。

【画像:記事入力用アイコン】 
kij-01.jpg
 ↑ 画像をクリック・元画像が開きます。

ブログサービスでは
入力時にHTMLやCSSのタグ類を気にしなくても、
文字の装飾が出来るように便利なツールを設置していますね。


 seesaaヘルプ
 参照 ⇒ 記事内容を装飾する方法


記事を書きつつ
文字を修飾するためにタグを直接記入する方法だと、記事を書くことがめんどくさくてイヤになりますね。

文章の中で修飾を必要とする文字や語句・文章にHTMLタグが簡単に入力出来るように、対象とする文字を選択し、アイコンをクリックするだけで目的とするタグが挿入され、装飾等が出来るような仕組みが入力用アイコンです。

同じ仕組みが日本語入力ソフトにもあります。

その目的は同じですが、多少の違いがあります。

★ブログでは
入力した文章を、赤文字の表示にしたければ
赤文字を指定するタグで、該当する「文章」を括らなければ表示しないです。

そのタグの働きにによって、赤文字に表示されます。

一方の日本語入力ソフトでは仕組みは同じですが、タグは文章を入力している人には見えません。

結果だけが目の前のPCに表示されます。

日本語入力用ソフトの命令形が「タグ」を使用しているかどうか、分かりませんが、専用のツールを使用すると、PCの画面にその結果が即表示されます。


【画像:ワープロでの入力した文書】
wor01.jpg
 ↑ 画像をクリック・元画像が開きます。

【画像:HTMLでの入力】
blg02.jpg
 ↑ 画像をクリック・元画像が開きます。

このことは、

ワープロでの入力・出力は文書の作成が目的であり、作成している文書の中にタグ類が表示されないような仕組みになっていて、使用者の見た目どおりの表示にするのが基本になっています。

タグ類は、ソフトのプログラム内で処理され、使用者の目に付くことはないです。

HTMLと同じようにタグ類が表示されていたら
すごく煩わしいですし、使い勝手の悪いソフトになります。

web上のHTMLの仕組みも同じですが
表示の段階が異なっていることです。

ワープロでは入力時に
HTMLでは一旦webでwwwが処理してから結果の表示になっています。

ブログはプラウザを通して、読み込んだタグの指示通りにネットを利用している人を対象に表示するのが目的です。

プラウザの種類も異なり、利用しているブログサービスも違いますが、
HTMLという共通のマークアップ言語を使って、ホームページやブログがwebで表示される仕組みです。

タグを媒介にしてネットで文書を公開することを主目的ですので
文書内にタグが無ければWWWは何も実行(表示)しないのは、その仕組み上の結果です。

HTMLの構文を理解して無くても、
記事入力用の便利なアイコンを使って、充実したブログ作成の世界を楽しむため
アイコンの中身を確認して行きます。

………

利爺がコンピュータのソフト開発を学んでいたころ
ワープロ文書の入出力もメーカー毎に異なっていて

Aメーカの機器で入力した文書は、Aメーカーの機器でしか
開けず、Bメーカーでは開けないと言う互換性の無い時代でした。

互換する機器を相手が持っていなければ
フロッピーディスクに保存してピーデータファイルで渡すことも
通信で送ることも不可能でした。

営業用の文書や企画書はプリントアウトした紙の文書で届けるのが当たり前でした。

街には入出力専用店があり、データでもらった文書は入力した機器のメーカー名を伝えて
出力してもらうというのも一般的でした。

その時代からみると、技術の進歩は著しく
とくにWWWに準拠したHTML文書はプラウザを選ばず
ネット上の共通言語として、素晴らしい仕組みだと思っています。

将来はHTMLの世界も、ワープロの世界のようにタグ類を気にすること無く、
レイアウトの見た目の通りに表示されるような簡便な世界になるのではと思っていますが、

今の時代ですので、今のHTMLを確認するため
次回から具体的な実例を使って、文書の装飾やタグの使い方を確認しましょう。



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

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


×

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