気分は桜色

● 逆引き （目的別の説明）
　改行したい　[HTML]
　文字の色を変えたい　[HTML]
　文字の色を変えたい　[ｽﾀｲﾙｼｰﾄ]
　文字のサイズを変えたい　[HTML]
　文字のフォント種別を変えたい　[HTML]
　FONTタグのまとめ　[HTML]
　文字を装飾したい（太字・斜体・下線・打消線）　[HTML]
　リンクしたい　[HTML]
　マーカーをつけたい　[HTML]


● ＨＴＭＬタグ別 （ＡＢＣ順）
　A HREF − リンク先の指定
　A NAME − マーカー
　B − 文字の装飾（太字）
　BR − 改行
　DIV − スタイルシートの記述
　EM − 文字の装飾（協調）
　FONT − 文字の色・サイズ・フォント種別
　FONT COLOR − 文字の色
　FONT FACE − 文字のフォント種別
　FONT SIZE − 文字のサイズ
　I − 文字の装飾（斜体）
　P − スタイルシートの記述
　S − 文字の装飾（打消線）
　SPAN − スタイルシートの記述
　STRONG − 文字の装飾（協調）
　U − 文字の装飾（下線）


● スタイルシートプロパティ別 （ＡＢＣ順）
　color − 文字の色


● ＨＴＭＬについて（ＨＴＭＬ全般の説明）
　ＨＴＭＬで書いてみよう♪
　ＨＴＭＬってなに？
　ＨＴＭＬ記述するときの注意点
　カラーコードとカラー名
　カラーコードの書き方
　非推奨要素と非推奨属性
　スタイルシートの書き方
　１０進数⇒１６進数対応表 （０〜１２７）
　１０進数⇒１６進数対応表 （１２８〜２５５）

文字の色を、スタイルシートで設定する場合は
COLORプロパティを使います。

COLOR: ［カラーコード］;


と、なります。

カラーコードについては
カラーコードとカラー名
カラーコードの書き方
を、参照してください。

追記にサンプルがあります。


>>目次

ページ内にマーカーを付けて、そこにリンクしたい場合は
Aタグの、NAME属性を使います。

<A NAME=(#)［マーカー名］>．．．</A>

となり、マーカーにリンクする場合は

<A HREF=［ページのＵＲＬ］#［マーカー名］>．．．</A>

で、リンクできます。

同じページ内のマーカーにリンクする場合は
ページのＵＲＬは省略してもかまいません。
マーカー名の前に、必ず # を付けてください。
（NAME属性のマーカー名の # は省略できます）

マーカー名は、どんな名前でもかまいませんが
半角文字で、アルファベットで始まり
アルファベットまたは数字でつけます。

　　○　ABC ，abc ，a123
　　×　ＡＢＣ ，123


追記にサンプルがあります。


>>目次

サイト内の他のページや、他のサイトに
リンクする場合は、Aタグの、HREF属性を使います。

<A HREF=［リンク先ＵＲＬ］>．．．</A>

となります。

リンク先ＵＲＬは、通常は絶対パス
（http://などから始まるＵＲＬ）で設定しますが
同じサーバー内のページであれば、相対パス
（一部を省略したＵＲＬ）で設定することも可能です。
ＵＲＬを省略する方法は、追記に書いています。

リンク先ＵＲＬを書くとき、注意しなければいけないことは
ＵＲＬは、大文字小文字を区別しますから
正確に書かなければいけない、ということです。
出来れば、リンク先ページを開いて
コピーすることをお薦めします。


上のような書き方だと、現在開いているページと
同じウィンドウ内で、リンク先のページが開きます。
リンク先のページを、別ウィンドウで開きたい場合は
TARGET属性を使います。

TARGET="_blank"
　別ウィンドウでリンク先を開きます。

TARGET="_top"
　現在のウィンドウでリンク先を開きます。
　フレームがある場合は、すべて解除します。

TARGET="abc"
　abcという名前のフレームにリンク先を開きます。

TARGET="_self"
　現在のフレームにリンク先を開きます。

TARGET="_parent"
　ひとつ上の親フレームにリンク先を開きます。

このブログでは、フレームは使われていないので
別ウィンドウで開きたい場合は、TARGET="_blank"
同じウィンドウでいい場合は、省略して構わないでしょう。


追記にサンプルがあります。


>>目次

スタイルシートは、Webページの画面表示や
レイアウトに関することを記述するための言語です。

スタイルシートの記述には
大きく分けて、３つの方法があります。

１．外部ファイルに設定を記述する
２．Webページのヘッダ（headタグで囲われた部分）に記述する
３．Webページ内に個別に設定する

このうち１と２の場合は、同じ設定を複数の場所から
利用できるという利点がありますが、このカテゴリは
ブログの記事やサイドバーなどを、ＨＴＭＬで記述する
ということが目的なので、３の個別の設定について
お話ししたいと思います。
１と２については、また機会があれば書きますね。

非推奨要素を、スタイルシートに置き換えるには
SPAN, P, DIV などのタグのSTYLE属性を使って
記述します。

P や DIV などは、段落をまとめるタグなので
長い文章などの全体に対して
スタイルスタイル（色やサイズなど）を
設定する、という場合には良いのですが
文章の中の特定の単語などのスタイルを
設定する場合は、SPANタグを使います。


<P STYLE=［スタイルシート］>．．．</P>

Pタグは、段落=PARAGRACH の略で
<P>．．．</P>で囲まれた部分が
ひとつの段落であることを表します。
<P>．．．</P>の前後に、１行改行されますが
改行のタグではないので、単に改行することが
目的の場合は、BRタグを使ってください。


<DIV STYLE=［スタイルシート］>．．．</DIV>

DIVタグは、それ自体は意味をもっていませんが
<DIV>．．．</DIV>で囲まれた部分を
ひとかたまりのブロックとして、表示位置を設定したり
スタイルシートを記述に使われます。


<SPAN STYLE=［スタイルシート］>．．．</SPAN>

SPANはタグも、それ自体意味をもっていませんが
<SPAN>．．．</SPAN>で囲まれた部分を
ひとかたまりの範囲として、スタイルシートの
設定に使われます。


スタイルシートの書き方は

プロパティ名: プロパティ値;

プロパティ名の後には、半角の ： （コロン）
プロパティ値の後には、半角の ； （セミコロン）
を、必ずつけてください。

プロパティとは、対象（この場合は文字や画像など）の
性質を表す情報のことです。
例えば文字の色を表すプロパティ名は、COLOR
プロパティ値は、カラーコードまたはカラー名なので

COLOR: #0000FF;

これで、文字の色を青にできます。
スタイルシートの文字色変更などの個別の説明は
別の記事でするので、ここではあまり気にしないで
書き方だけ覚えてくださいね。


追記で、P, DIV, SPANを使ったときの
違いについて説明しています。


>>目次

HTMLタグの中には、非推奨要素と
なっているものがあります。
また、タグそのものは非推奨ではなくても
属性が、非推奨属性になっているものもあります。

HTML4.0が登場したとき、「文書の構造を記述する」
という、HTML本来の目的に戻すため
画面表示やレイアウトに関する、要素や属性が
「できるだけ使わない方が望ましい」と明記されました。

非推奨のタグや属性は、使用を禁止されている
というわけではありません。
「使ってもいいんだけど、将来的は廃止されるかも
しれないから、使わないほうがいいよ〜」
という程度のことです。
XHTML 1.1では、これらの要素は廃止されています。
が、廃止になったと言っても、ブラウザのほうが
互換性を保つためにサポートを続けるので
当分は問題ないと思われます。

非推奨となったタグや属性には、代替えタグや
スタイルシートの使用が推奨されています。


>>目次

文字を太字や斜体などで装飾したい場合は
個別のタグを使います。
これらのタグは、属性を持たないので
まとめて説明しますね。

文字を太字にしたいときは、Bタグを使います。
太字=BOLDの B です。

<B>．．．</B>

Bタグは非推奨要素ではありませんが
スタイルシートの使用が推奨されています。
また、強調することが目的の場合は
<STRONG>タグの使用が推奨されています。

<STRONG>．．．</STRONG>


文字を斜体にしたいときは、Iタグを使います。
斜体=ITALICの I です。

<I>．．．</I>

Iタグも非推奨要素ではありませんが
スタイルシートの使用が推奨されています。
また、強調することが目的の場合は
<EM>タグの使用が推奨されています。

<EM>．．．</EM>


文字に下線を付けたいときは、Uタグを使います。
下線=UNDER LINEの U です。

<U>．．．</U>

Uタグは非推奨要素です。
下線を引くときは、出来るだけ
スタイルシートの使用が推奨されています。


文字に打消線を入れたいときは、Sタグを使います。
打ち消し=Strike Outの S です。

<S>．．．</S>

Sタグは非推奨要素です。
打消線を引くときは、出来るだけ
スタイルシートの使用が推奨されています。

スタイルシートによる文字装飾については
またいつか書きたいと思います。


ひとつの文字列に、複数のタグを使うこともできます。
追記にサンプルがあります。

タ グ 名	B	I	U	S
機　　能	太字	斜体	下線	打消線
属　　性	なし
終了タグ	必須

タ グ 名	STRONG	EM
機　　能	強調（太字）	強調（斜体）
属　　性	なし
終了タグ	必須

>>目次

文字の色、サイズ、フォント種別を変えるときの
個別の書き方を説明してきましたが
ひとつのタグに、属性を並べて書くこともできます。
ここで、FONTタグについて、まとめてみましょう。

FONTタグの属性には

COLOR ･････ 文字の色
SIZE　･････ 文字のサイズ
FACE　･････ 文字の種別

があります。

これらの設定を同時にしたい場合は

<FONT COLOR=[カラーコード]　SIZE=[サイズ値]　FACE=[フォント名]>．．．</FONT>

このように並べて書きます。
属性の順番は自由で、特に決まりはありません。
必要のないものは、省略してもかまいません。

FONTタグは、訪問者のネット環境、パソコン環境によって
見え方が違ってしまうので、［非推奨要素］
になっています。
文字の装飾には、できるだけスタイルシートを使うように
推奨されていますが、とりあえず簡単に変更する程度なら
このタグで間に合うと思います。
スタイルシートによるフォント変更については
またいつか書きたいと思います。

タ グ 名	FONT
機　　能	文字フォントの色・サイズ・種類
属　　性	COLOR　SIZE　FACE
終了タグ	必須

>>目次

文字のフォント種別を変えたい場合は
FONTタグの、FACE属性を使います。

<FONT FACE=[フォント名]>．．．</FONT>

このように書きます。

フォント名をどんなフォントでも使うことができますが
訪問者のパソコンにそのフォントがインストールされて
いない場合、変化しません。
フォント名は、半角カンマ（ , ）で区切って
複数のフォントを並べることができ、その場合
先に書かれた順に、訪問者の環境によって
利用可能なものが選択されるようになります。

フォント名の中には、半角スペース、全角スペースを
含むものがあります。
そのようなフォントを設定する場合は、必ず前後を
" " で囲って書いてください。
属性値が文字の場合（数値やコードでない場合）は
" " で囲うように心掛けておいたほうが良いですね。


追記にサンプルがあります。


>>目次

文字のサイズを変えたい場合は、FONTタグの
SIZE属性を使います。

<FONT SIZE=[サイズ値]>．．．</FONT>

このようになります。

サイズ値は 1〜7 までの数値で設定します。
+1 とか -1 のように、現在のサイズからみて
相対的に設定することもできますが
あまりお勧めではないので、説明を省略します。


フォントサイズを設定したとき、表示されるサイズは

サイズ＝１

サイズ＝２

サイズ＝３

サイズ＝４

サイズ＝５

サイズ＝６

サイズ＝７


このようになります。


ＤＨＣブログで記事編集すると、文字サイズは

　 小 　 ･････ サイズ１
指定なし ･････ サイズ２
　 大 　 ･････ サイズ３
　特大　 ･････ サイズ４

に、なるようで、それより大きなフォントは
ＨＴＭＬで書かなければ使えません。
が、大きなフォントを使うと、文字が
重なってしまうようなので、その場合は
次の行を、１行開けると、綺麗に表示されます。

追記にサンプルがあります。

>>目次