HTML・スタイルシート 《 目 次 》 [2008年07月18日(金)]
● 逆引き (目的別の説明)
改行したい [HTML]
文字の色を変えたい [HTML]
文字の色を変えたい [スタイルシート]
文字のサイズを変えたい [HTML]
文字のフォント種別を変えたい [HTML]
FONTタグのまとめ [HTML]
文字を装飾したい(太字・斜体・下線・打消線) [HTML]
リンクしたい [HTML]
マーカーをつけたい [HTML]
● HTMLタグ別 (ABC順)
A HREF − リンク先の指定
A NAME − マーカー
B − 文字の装飾(太字)
BR − 改行
DIV − スタイルシートの記述
EM − 文字の装飾(協調)
FONT − 文字の色・サイズ・フォント種別
FONT COLOR − 文字の色
FONT FACE − 文字のフォント種別
FONT SIZE − 文字のサイズ
I − 文字の装飾(斜体)
P − スタイルシートの記述
S − 文字の装飾(打消線)
SPAN − スタイルシートの記述
STRONG − 文字の装飾(協調)
U − 文字の装飾(下線)
● スタイルシートプロパティ別 (ABC順)
color − 文字の色
● HTMLについて(HTML全般の説明)
HTMLで書いてみよう♪
HTMLってなに?
HTML記述するときの注意点
カラーコードとカラー名
カラーコードの書き方
非推奨要素と非推奨属性
スタイルシートの書き方
10進数⇒16進数対応表 (0〜127)
10進数⇒16進数対応表 (128〜255)
改行したい [HTML]
文字の色を変えたい [HTML]
文字の色を変えたい [スタイルシート]
文字のサイズを変えたい [HTML]
文字のフォント種別を変えたい [HTML]
FONTタグのまとめ [HTML]
文字を装飾したい(太字・斜体・下線・打消線) [HTML]
リンクしたい [HTML]
マーカーをつけたい [HTML]
● HTMLタグ別 (ABC順)
A HREF − リンク先の指定
A NAME − マーカー
B − 文字の装飾(太字)
BR − 改行
DIV − スタイルシートの記述
EM − 文字の装飾(協調)
FONT − 文字の色・サイズ・フォント種別
FONT COLOR − 文字の色
FONT FACE − 文字のフォント種別
FONT SIZE − 文字のサイズ
I − 文字の装飾(斜体)
P − スタイルシートの記述
S − 文字の装飾(打消線)
SPAN − スタイルシートの記述
STRONG − 文字の装飾(協調)
U − 文字の装飾(下線)
● スタイルシートプロパティ別 (ABC順)
color − 文字の色
● HTMLについて(HTML全般の説明)
HTMLで書いてみよう♪
HTMLってなに?
HTML記述するときの注意点
カラーコードとカラー名
カラーコードの書き方
非推奨要素と非推奨属性
スタイルシートの書き方
10進数⇒16進数対応表 (0〜127)
10進数⇒16進数対応表 (128〜255)
[スタイルシート] 文字の色を変えたい [2008年07月18日(金)]
文字の色を、スタイルシートで設定する場合は
COLORプロパティを使います。
COLOR: [カラーコード];
と、なります。
カラーコードについては
カラーコードとカラー名
カラーコードの書き方
を、参照してください。
追記にサンプルがあります。
>>目次
COLORプロパティを使います。
COLOR: [カラーコード];
と、なります。
カラーコードについては
カラーコードとカラー名
カラーコードの書き方
を、参照してください。
追記にサンプルがあります。
>>目次
[HTML] マーカーをつけたい [2008年07月10日(木)]
ページ内にマーカーを付けて、そこにリンクしたい場合は
Aタグの、NAME属性を使います。
<A NAME=(#)[マーカー名]>...</A>
となり、マーカーにリンクする場合は
<A HREF=[ページのURL]#[マーカー名]>...</A>
で、リンクできます。
同じページ内のマーカーにリンクする場合は
ページのURLは省略してもかまいません。
マーカー名の前に、必ず # を付けてください。
(NAME属性のマーカー名の # は省略できます)
マーカー名は、どんな名前でもかまいませんが
半角文字で、アルファベットで始まり
アルファベットまたは数字でつけます。
○ ABC ,abc ,a123
× ABC ,123
追記にサンプルがあります。
>>目次
Aタグの、NAME属性を使います。
<A NAME=(#)[マーカー名]>...</A>
となり、マーカーにリンクする場合は
<A HREF=[ページのURL]#[マーカー名]>...</A>
で、リンクできます。
同じページ内のマーカーにリンクする場合は
ページのURLは省略してもかまいません。
マーカー名の前に、必ず # を付けてください。
(NAME属性のマーカー名の # は省略できます)
マーカー名は、どんな名前でもかまいませんが
半角文字で、アルファベットで始まり
アルファベットまたは数字でつけます。
○ ABC ,abc ,a123
× ABC ,123
追記にサンプルがあります。
>>目次
[HTML] リンクしたい [2008年07月10日(木)]
サイト内の他のページや、他のサイトに
リンクする場合は、Aタグの、HREF属性を使います。
<A HREF=[リンク先URL]>...</A>
となります。
リンク先URLは、通常は絶対パス
(http://などから始まるURL)で設定しますが
同じサーバー内のページであれば、相対パス
(一部を省略したURL)で設定することも可能です。
URLを省略する方法は、追記に書いています。
リンク先URLを書くとき、注意しなければいけないことは
URLは、大文字小文字を区別しますから
正確に書かなければいけない、ということです。
出来れば、リンク先ページを開いて
コピーすることをお薦めします。
上のような書き方だと、現在開いているページと
同じウィンドウ内で、リンク先のページが開きます。
リンク先のページを、別ウィンドウで開きたい場合は
TARGET属性を使います。
TARGET="_blank"
別ウィンドウでリンク先を開きます。
TARGET="_top"
現在のウィンドウでリンク先を開きます。
フレームがある場合は、すべて解除します。
TARGET="abc"
abcという名前のフレームにリンク先を開きます。
TARGET="_self"
現在のフレームにリンク先を開きます。
TARGET="_parent"
ひとつ上の親フレームにリンク先を開きます。
このブログでは、フレームは使われていないので
別ウィンドウで開きたい場合は、TARGET="_blank"
同じウィンドウでいい場合は、省略して構わないでしょう。
追記にサンプルがあります。
>>目次
リンクする場合は、Aタグの、HREF属性を使います。
<A HREF=[リンク先URL]>...</A>
となります。
リンク先URLは、通常は絶対パス
(http://などから始まるURL)で設定しますが
同じサーバー内のページであれば、相対パス
(一部を省略したURL)で設定することも可能です。
URLを省略する方法は、追記に書いています。
リンク先URLを書くとき、注意しなければいけないことは
URLは、大文字小文字を区別しますから
正確に書かなければいけない、ということです。
出来れば、リンク先ページを開いて
コピーすることをお薦めします。
上のような書き方だと、現在開いているページと
同じウィンドウ内で、リンク先のページが開きます。
リンク先のページを、別ウィンドウで開きたい場合は
TARGET属性を使います。
TARGET="_blank"
別ウィンドウでリンク先を開きます。
TARGET="_top"
現在のウィンドウでリンク先を開きます。
フレームがある場合は、すべて解除します。
TARGET="abc"
abcという名前のフレームにリンク先を開きます。
TARGET="_self"
現在のフレームにリンク先を開きます。
TARGET="_parent"
ひとつ上の親フレームにリンク先を開きます。
このブログでは、フレームは使われていないので
別ウィンドウで開きたい場合は、TARGET="_blank"
同じウィンドウでいい場合は、省略して構わないでしょう。
追記にサンプルがあります。
>>目次
スタイルシートの書き方 [2008年07月09日(水)]
スタイルシートは、Webページの画面表示や
レイアウトに関することを記述するための言語です。
スタイルシートの記述には
大きく分けて、3つの方法があります。
1.外部ファイルに設定を記述する
2.Webページのヘッダ(headタグで囲われた部分)に記述する
3.Webページ内に個別に設定する
このうち1と2の場合は、同じ設定を複数の場所から
利用できるという利点がありますが、このカテゴリは
ブログの記事やサイドバーなどを、HTMLで記述する
ということが目的なので、3の個別の設定について
お話ししたいと思います。
1と2については、また機会があれば書きますね。
非推奨要素を、スタイルシートに置き換えるには
SPAN, P, DIV などのタグのSTYLE属性を使って
記述します。
P や DIV などは、段落をまとめるタグなので
長い文章などの全体に対して
スタイルスタイル(色やサイズなど)を
設定する、という場合には良いのですが
文章の中の特定の単語などのスタイルを
設定する場合は、SPANタグを使います。
<P STYLE=[スタイルシート]>...</P>
Pタグは、段落=PARAGRACH の略で
<P>...</P>で囲まれた部分が
ひとつの段落であることを表します。
<P>...</P>の前後に、1行改行されますが
改行のタグではないので、単に改行することが
目的の場合は、BRタグを使ってください。
<DIV STYLE=[スタイルシート]>...</DIV>
DIVタグは、それ自体は意味をもっていませんが
<DIV>...</DIV>で囲まれた部分を
ひとかたまりのブロックとして、表示位置を設定したり
スタイルシートを記述に使われます。
<SPAN STYLE=[スタイルシート]>...</SPAN>
SPANはタグも、それ自体意味をもっていませんが
<SPAN>...</SPAN>で囲まれた部分を
ひとかたまりの範囲として、スタイルシートの
設定に使われます。
スタイルシートの書き方は
プロパティ名: プロパティ値;
プロパティ名の後には、半角の : (コロン)
プロパティ値の後には、半角の ; (セミコロン)
を、必ずつけてください。
プロパティとは、対象(この場合は文字や画像など)の
性質を表す情報のことです。
例えば文字の色を表すプロパティ名は、COLOR
プロパティ値は、カラーコードまたはカラー名なので
COLOR: #0000FF;
これで、文字の色を青にできます。
スタイルシートの文字色変更などの個別の説明は
別の記事でするので、ここではあまり気にしないで
書き方だけ覚えてくださいね。
追記で、P, DIV, SPANを使ったときの
違いについて説明しています。
>>目次
レイアウトに関することを記述するための言語です。
スタイルシートの記述には
大きく分けて、3つの方法があります。
1.外部ファイルに設定を記述する
2.Webページのヘッダ(headタグで囲われた部分)に記述する
3.Webページ内に個別に設定する
このうち1と2の場合は、同じ設定を複数の場所から
利用できるという利点がありますが、このカテゴリは
ブログの記事やサイドバーなどを、HTMLで記述する
ということが目的なので、3の個別の設定について
お話ししたいと思います。
1と2については、また機会があれば書きますね。
非推奨要素を、スタイルシートに置き換えるには
SPAN, P, DIV などのタグのSTYLE属性を使って
記述します。
P や DIV などは、段落をまとめるタグなので
長い文章などの全体に対して
スタイルスタイル(色やサイズなど)を
設定する、という場合には良いのですが
文章の中の特定の単語などのスタイルを
設定する場合は、SPANタグを使います。
<P STYLE=[スタイルシート]>...</P>
Pタグは、段落=PARAGRACH の略で
<P>...</P>で囲まれた部分が
ひとつの段落であることを表します。
<P>...</P>の前後に、1行改行されますが
改行のタグではないので、単に改行することが
目的の場合は、BRタグを使ってください。
<DIV STYLE=[スタイルシート]>...</DIV>
DIVタグは、それ自体は意味をもっていませんが
<DIV>...</DIV>で囲まれた部分を
ひとかたまりのブロックとして、表示位置を設定したり
スタイルシートを記述に使われます。
<SPAN STYLE=[スタイルシート]>...</SPAN>
SPANはタグも、それ自体意味をもっていませんが
<SPAN>...</SPAN>で囲まれた部分を
ひとかたまりの範囲として、スタイルシートの
設定に使われます。
スタイルシートの書き方は
プロパティ名: プロパティ値;
プロパティ名の後には、半角の : (コロン)
プロパティ値の後には、半角の ; (セミコロン)
を、必ずつけてください。
プロパティとは、対象(この場合は文字や画像など)の
性質を表す情報のことです。
例えば文字の色を表すプロパティ名は、COLOR
プロパティ値は、カラーコードまたはカラー名なので
COLOR: #0000FF;
これで、文字の色を青にできます。
スタイルシートの文字色変更などの個別の説明は
別の記事でするので、ここではあまり気にしないで
書き方だけ覚えてくださいね。
追記で、P, DIV, SPANを使ったときの
違いについて説明しています。
>>目次
非推奨要素と非推奨属性 [2008年07月09日(水)]
HTMLタグの中には、非推奨要素と
なっているものがあります。
また、タグそのものは非推奨ではなくても
属性が、非推奨属性になっているものもあります。
HTML4.0が登場したとき、「文書の構造を記述する」
という、HTML本来の目的に戻すため
画面表示やレイアウトに関する、要素や属性が
「できるだけ使わない方が望ましい」と明記されました。
非推奨のタグや属性は、使用を禁止されている
というわけではありません。
「使ってもいいんだけど、将来的は廃止されるかも
しれないから、使わないほうがいいよ〜」
という程度のことです。
XHTML 1.1では、これらの要素は廃止されています。
が、廃止になったと言っても、ブラウザのほうが
互換性を保つためにサポートを続けるので
当分は問題ないと思われます。
非推奨となったタグや属性には、代替えタグや
スタイルシートの使用が推奨されています。
>>目次
なっているものがあります。
また、タグそのものは非推奨ではなくても
属性が、非推奨属性になっているものもあります。
HTML4.0が登場したとき、「文書の構造を記述する」
という、HTML本来の目的に戻すため
画面表示やレイアウトに関する、要素や属性が
「できるだけ使わない方が望ましい」と明記されました。
非推奨のタグや属性は、使用を禁止されている
というわけではありません。
「使ってもいいんだけど、将来的は廃止されるかも
しれないから、使わないほうがいいよ〜」
という程度のことです。
XHTML 1.1では、これらの要素は廃止されています。
が、廃止になったと言っても、ブラウザのほうが
互換性を保つためにサポートを続けるので
当分は問題ないと思われます。
非推奨となったタグや属性には、代替えタグや
スタイルシートの使用が推奨されています。
>>目次
[HTML] 文字を装飾したい(太字・斜体・下線・打消線) [2008年07月06日(日)]
文字を太字や斜体などで装飾したい場合は
個別のタグを使います。
これらのタグは、属性を持たないので
まとめて説明しますね。
文字を太字にしたいときは、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タグを使います。
太字=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 |
機 能 |
強調(太字) |
強調(斜体) |
属 性 |
なし | |
終了タグ |
必須 |
>>目次
[HTML] FONTタグのまとめ [2008年06月27日(金)]
文字の色、サイズ、フォント種別を変えるときの
個別の書き方を説明してきましたが
ひとつのタグに、属性を並べて書くこともできます。
ここで、FONTタグについて、まとめてみましょう。
FONTタグの属性には
COLOR ・・・・・ 文字の色
SIZE ・・・・・ 文字のサイズ
FACE ・・・・・ 文字の種別
があります。
これらの設定を同時にしたい場合は
<FONT COLOR=[カラーコード] SIZE=[サイズ値] FACE=[フォント名]>...</FONT>
このように並べて書きます。
属性の順番は自由で、特に決まりはありません。
必要のないものは、省略してもかまいません。
FONTタグは、訪問者のネット環境、パソコン環境によって
見え方が違ってしまうので、[非推奨要素]
になっています。
文字の装飾には、できるだけスタイルシートを使うように
推奨されていますが、とりあえず簡単に変更する程度なら
このタグで間に合うと思います。
スタイルシートによるフォント変更については
またいつか書きたいと思います。
>>目次
個別の書き方を説明してきましたが
ひとつのタグに、属性を並べて書くこともできます。
ここで、FONTタグについて、まとめてみましょう。
FONTタグの属性には
COLOR ・・・・・ 文字の色
SIZE ・・・・・ 文字のサイズ
FACE ・・・・・ 文字の種別
があります。
これらの設定を同時にしたい場合は
<FONT COLOR=[カラーコード] SIZE=[サイズ値] FACE=[フォント名]>...</FONT>
このように並べて書きます。
属性の順番は自由で、特に決まりはありません。
必要のないものは、省略してもかまいません。
FONTタグは、訪問者のネット環境、パソコン環境によって
見え方が違ってしまうので、[非推奨要素]
になっています。
文字の装飾には、できるだけスタイルシートを使うように
推奨されていますが、とりあえず簡単に変更する程度なら
このタグで間に合うと思います。
スタイルシートによるフォント変更については
またいつか書きたいと思います。
タ グ 名 |
FONT |
機 能 |
文字フォントの色・サイズ・種類 |
属 性 |
COLOR SIZE FACE |
終了タグ |
必須 |
>>目次
[HTML] 文字のフォントを変えたい [2008年06月27日(金)]
文字のフォント種別を変えたい場合は
FONTタグの、FACE属性を使います。
<FONT FACE=[フォント名]>...</FONT>
このように書きます。
フォント名をどんなフォントでも使うことができますが
訪問者のパソコンにそのフォントがインストールされて
いない場合、変化しません。
フォント名は、半角カンマ( , )で区切って
複数のフォントを並べることができ、その場合
先に書かれた順に、訪問者の環境によって
利用可能なものが選択されるようになります。
フォント名の中には、半角スペース、全角スペースを
含むものがあります。
そのようなフォントを設定する場合は、必ず前後を
" " で囲って書いてください。
属性値が文字の場合(数値やコードでない場合)は
" " で囲うように心掛けておいたほうが良いですね。
追記にサンプルがあります。
>>目次
FONTタグの、FACE属性を使います。
<FONT FACE=[フォント名]>...</FONT>
このように書きます。
フォント名をどんなフォントでも使うことができますが
訪問者のパソコンにそのフォントがインストールされて
いない場合、変化しません。
フォント名は、半角カンマ( , )で区切って
複数のフォントを並べることができ、その場合
先に書かれた順に、訪問者の環境によって
利用可能なものが選択されるようになります。
フォント名の中には、半角スペース、全角スペースを
含むものがあります。
そのようなフォントを設定する場合は、必ず前後を
" " で囲って書いてください。
属性値が文字の場合(数値やコードでない場合)は
" " で囲うように心掛けておいたほうが良いですね。
追記にサンプルがあります。
>>目次
[HTML] 文字のサイズを変えたい [2008年06月26日(木)]
文字のサイズを変えたい場合は、FONTタグの
SIZE属性を使います。
<FONT SIZE=[サイズ値]>...</FONT>
このようになります。
サイズ値は 1〜7 までの数値で設定します。
+1 とか -1 のように、現在のサイズからみて
相対的に設定することもできますが
あまりお勧めではないので、説明を省略します。
フォントサイズを設定したとき、表示されるサイズは
サイズ=1
サイズ=2
サイズ=3
サイズ=4
サイズ=5
サイズ=6
サイズ=7
このようになります。
DHCブログで記事編集すると、文字サイズは
小 ・・・・・ サイズ1
指定なし ・・・・・ サイズ2
大 ・・・・・ サイズ3
特大 ・・・・・ サイズ4
に、なるようで、それより大きなフォントは
HTMLで書かなければ使えません。
が、大きなフォントを使うと、文字が
重なってしまうようなので、その場合は
次の行を、1行開けると、綺麗に表示されます。
追記にサンプルがあります。
>>目次
SIZE属性を使います。
<FONT SIZE=[サイズ値]>...</FONT>
このようになります。
サイズ値は 1〜7 までの数値で設定します。
+1 とか -1 のように、現在のサイズからみて
相対的に設定することもできますが
あまりお勧めではないので、説明を省略します。
フォントサイズを設定したとき、表示されるサイズは
サイズ=1
サイズ=2
サイズ=3
サイズ=4
サイズ=5
サイズ=6
サイズ=7
このようになります。
DHCブログで記事編集すると、文字サイズは
小 ・・・・・ サイズ1
指定なし ・・・・・ サイズ2
大 ・・・・・ サイズ3
特大 ・・・・・ サイズ4
に、なるようで、それより大きなフォントは
HTMLで書かなければ使えません。
が、大きなフォントを使うと、文字が
重なってしまうようなので、その場合は
次の行を、1行開けると、綺麗に表示されます。
追記にサンプルがあります。
>>目次
| 次へ