※今書いてるページと同じフォルダ内で （フォルダがそれ以上深くも浅くもない）並列にあるページ。
この位置関係は『同じ階層』とも呼ばれます。
janの1st.html を書いてる途中、同じjanの3rd.html へリンクさせたいなら、
<a href="3rd.html">3日へ</a> （タグ間の言葉はこれ以外でも可・以下同じ）
アドレス部分にはファイル名だけで大丈夫です。
見た目には、3日へ と現れます。 ←注意：行けないリンクです。
|
０．注意 １．見出し ２．段落と改行 ３．文字 ├３－１．色（古い方法） ├３－注a．スタイルシートを使った色表現 ├ページの一部分 ├1ページ全体 └複数のページを外部ファイルで ├３－注b．色は必ず表現されるとは限らない ├３－２．大きさ ├３－注c．スタイルシートを使った文字サイズ指定 ├３－３．主な論理的文字修飾 ├３－注d．物理的な（見た目の）文字修飾 ├３－４．使用注意の文字 （機種依存文字と半角カナ） └３－５．特殊な文字を実体表示で表現する ４．リンク ├４－１．同一フォルダ内（並列）のページへのリンク ├４－２．フォルダの中へ入って行くリンク ├４－３．フォルダを外へ出るリンク ├４－４．ページの途中へのリンク ├４－５．よそ様のHPへのリンク └４－６．メールを送れるようにする |
５．画像 ├５－注a．画像は常に表示されるとは限らない └５－注b．W3C勧告に物申す・画像のサイズとalt属性 ６．ページの背景 ├６－１．背景の色を変える（古い方法） ├６－２．背景に画像を使う（古い方法） ├６－注a．スタイルシートを使った背景指定（ページ全体・部分） ├６－注b．背景色と文字色のコントラスト ├６－注c．背景に画像を使っていても背景色の指定を └６－３．部分的に背景を変える ７．横の位置 ８．横に罫線を引く ９．形を整える（整形済み要素） 10．使用厳重注意の表現 ├10－１．スクロール＝流れる文字 （marqueeタグ） └10－２．点滅 （blinkタグなど） 11．リスト ├11－１．順序のないリスト ├11－２．順序のあるリスト ├11－３．定義型リスト └11－４．リストの中のリスト（入れ子） 12．コメントを入れる（表に出さない文章） |
|
<html> <head><title>タイトルだよ</title></head> <body>中身だよ</body> </html> |
見出しには、h1からh6まであります。
h1は大見出し、h2は中見出し、と、数字の順番が見出しの格
を表します。
見た目には、数字が大きくなるほど、字は小さくなります。
h1・地球 （h1タグで挟んだ）h2・アジアh3・日本h4・北海道h5・札幌市h6・北区 |
段落は、pタグで挟みます。
但し多くの場合、pタグで挟まず直接書いても、特に不自由はありません。
（まあ、お作法としては使っておきましょう）
pタグで挟むと自動的に、前の行および後の行との間がそれぞれ一行空きます。
改行は、改行タグ <br> を入れます。
このタグは普通と違って、終了タグは不要です。
電子メールやHPなどの文章は、本などの印刷物や手書きの文章と違って、
行と行の間が大変狭いのが特徴です。
文章の内容にもよりますが、5～6行程度書いたら、1行分スペースを開けると、
或いは、5～6行程度の量を一つの段落としてpタグで挟むと、
自分もみんなも読みやすくなります。
※このHPでは、スタイルシートで行間を少し空ける設定にしてます。
色を変える時は、<font color="***"> と </font> で挟みます。
色名で指定出来る色には、140色あります。
Internet Explorer を始め大体のブラウザで、表現してくれます。
（全てのブラウザで ではありませんが）
●たりら●
<font color="red">●たりら●</font>
●りらり●
<font color="darkgreen">●りらり●</font>
どんなブラウザで見るかに関係なく確実に色を表現して欲しい場合、
また、140色以外の色を出したい時は、
""の所に、RGB値（# から始まる十六進数6ケタの数字）を入れます。
ただし、基本の16色なら、色名だけでどんなブラウザでもまず確実に表現されます。
詳しくは、色調別・色見本 のページをご覧下さい。
●らりら●
<font color="#ff1493">●らりら●</font> （色名deeppink）
●りらら●
<font color="#df1473">●りらら●</font>
文字を１ページ全体で統一して色指定したい時は、
最初の bodyタグの開始タグの中に、色々属性を盛り込みます。
今ご覧のページbody.html では、以下のように指定しています。
<body text="#080808" link="#0800e0
" alink="red" vlink="#800080">
text＝本文のこと、ここでは限りなくblack＝#000000に近い色に指定。
このページの本文は全て黒い文字になります。
link＝まだ行ってない未読リンク、ここでは限りなくblue＝#0000ffに近い色に指定。
alink＝今現在使っているアクティブリンク、ここではredに指定。
vlink＝もう行った既読リンク、ここでは紫に指定。
なお、前述のように部分的に色指定すれば、ページ全体の色指定よりもそちらが優先されます。
３－１．で述べた（古い方の）色の表現方法は、
2014年10月にW3C勧告されたHTML5では廃止されましたが、
それでも現在は多くのブラウザで使われています。
この表現方法が通用しない・HTML5に完全に準拠したブラウザが多数派になるには、
まだ年月がかかると思われます。
長く保存しない消え物のページでは、古い方の色表現方法でも十分と思われますが、
長い年月残すであろうページでは、スタイルシートでの色表現をお勧めします。
以下の説明は、スタイルシートを使う時の最低限必要な説明ともなっています。
文字色以外にも、背景色や文字の大きさや位置など色んな方法に応用が可能です。
私個人のお勧めは、よく使う文字色にclassを使い
外部ファイルで指定する方法です。
例えば、強い強調のstrongタグおよび特定の場所を文字色redにしたい場合、
外部のcssファイルに
strong,.akaji { color: red} と書き込み、（strongカンマドットakaji）
各ページの該当する箇所のタグ（spanやdivを含む）の開始タグの中に、
class="akaji" と書き込みます。（class名は何でもいいです）
strongタグには何も書き込まなくていいです。
後で色を#f00000やdarkredなどと微調整するのが簡単ですし、
各ページで何かどこかを書き換える必要がなく、
1箇所の書き換えだけで全てのページの変更が出来ます。
ちなみに、背景を黒くするための代替スタイルシートなら、
strong,.akaji { color: yellow} と設定すればいい訳です。
色盲や色弱など色覚障がいのある方もいます。
また、パソコンには、もともと色を表現しない機種もあると言います。
パソコンの色調は、見る人各々の機種や設定や機械の調子によって、かなりの差があるものです。
同じ一つのパソコンで、色の見え方が違う時もあります。
画面を見る角度や部屋の照明によっても、色の見え方は変わります。
色だけで他との区別を表現する方法では、見る人が解らない事も多いです。
色での区別だけでなく、形などでの区別も加えると確実でしょう。
| ★は注目部分 ★ ★ ★ ★ ★ ★ |
| ★は注目部分 ● ● ★ ● ★ ● |
もしも、■と ■の区別が付かない場合でも、 下の例なら区別が付けられます。
bigタグで一回挟むと一回り、二回挟むと二回り、文字が大きくなります。
←こっちは古い方法です
smallタグで一回挟むと一回り、二回挟むと二回り、文字が小さくなります。
←こっちはOKです
bigタグとsmallタグを組み合わせる事も出来ます。
あいうえお＝ <big><big>あいうえお</big></big>
あいうえお＝
<big>あいうえお</big>
あいうえお＝ 通常の大きさ
あいうえお＝
<small>あいうえお</small>
あいうえお＝
<small><small>あいうえお</small></small>
あいうえお＝
<small><small>あいう<big>え</big>お</small></small>
現時点では、文字の大きさを変える時、<font size="+?"> と </font> で挟むのが主流です。
（?には数字が入る、+ なら字が大きく、- を使うと小さくなる）
しかしこのやり方は将来、ブラウザが理解してくれなくなる可能性があると言われます。
今から big/smallタグに慣れておくと、後々便利でしょう。
但し、掲示板や日記など、長く残らない「消え物」の文章なら、どちらでも構いません。
注；後日談
fontタグとともにbigタグも、HTML5では廃止されました。
（現状では少なくともあと数年は使えるでしょう）
smallタグは、補足事項や注釈を示すためのタグとして、HTML5で採用されました。
個人的にはbigタグは、画数の多い見にくい漢字を見やすくしたり、
旧字体や異体字の漢字を見分けやすくしたり、或いはそういう注意を促すタグとして、
またはsmallタグを部分的に解除するタグとして、是非残しておいて欲しいと思いますが…
旧・島根県邇摩郡にまぐんとか、
髙（「高」の異体字・通称「はしごだか」）とか
字を大きくしたい時は、スタイルシートを使います。
（もちろん、小さくしたい場合にも使えます。）
ページ全体の基本の文字サイズは、指定していなければ自動的に
mediumになっていますが、この場合、
その部分を一回り大きくしたい場合は、
<span style="font-size: large">と</span>で挟みます。
二回り大きくしたい場合は、
<span style="font-size: x-large">と</span>で挟みます。
その部分がすでに他のタグで挟まれている場合は、そのタグの開始タグの中に、
style="font-size: ****" と書き加えても良いでしょう。
ページ全体の文字を大きくしたい場合は、ページのヘッダ部分や外部のcssファイルに、
body { font-size: ****} と加えます。body { }の中に既に他のものが入ってる場合は、
body { color: black; font-size: ****} のように、
セミコロンと半角スペースで区切ってから入れます。
基本的な手順は、
３－注a. スタイルシートを使った色表現と同じです。
文字の大きさは数値やパーセントでも指定できますが、
キーワードで指定する場合は、
xx-small、x-small、small、medium、large、x-large、xx-large
の7段階があります。
また、元々の指定より一回り小さくするのにsmaller、
一回り大きくするのにlargerも使えます。
なので、例えばページ全体の文字サイズをsmallと指定している場合、
特定の部分を一回り大きくするには、mediumまたはlargerを使います。
（largeを使うとsmallに比べて二回り大きくなってしまいます）
強調＝emタグで挟む
うふふえへへ♪ （自動的に斜めの字体で表現される）
より強い強調＝strongタグで挟む
うふふえへへ♪ （自動的に太字になる）
削除＝delタグで挟む
うふふえへへ♪ （自動的に取消線で消される）
挿入＝insタグで挟む
うふふえへへ♪ （自動的に下線が付く）
上付文字＝supタグで挟む
xn（xのn乗） タグはx<sup>n</sup>
他にも「大人の2」とか（殴）
「変態仮面3」とか（殴殴殴）
下付文字＝subタグで挟む
CO2 タグはCO<sub>2</sub>
なお、それぞれのタグの開始タグの中にtitle属性を書き込むと、
そこにポインタを置いた時に吹き出しで文字が現れます。
江差線 タグは
<del title="去年廃止されました">江差線</del>
現時点で主流なのは、
斜めの字体にするのに iタグで挟む、
太字にするのに bタグで挟む、
取消線で消すのに sタグで挟む、
下線を付けるのに uタグで挟む 等でしょう。
しかしこれらは、文章の論理構造とは全く関係ないものとして、
将来ブラウザでのサポートが危ぶまれているものです。
論理的タグの方に今から慣れておくと、後々便利でしょう。
しかし勿論、長く残さない「消え物」文章では、どちらでも構いません。
以上4つのタグは今まで、非推奨の（使えなくはないけどお勧め出来ない）要素
とされてきました。しかし、
iタグは、強調する意味はないけど他と区別する部分のタグとして、
bタグは、より強く強調する意味はないけど注目させる必要がある部分のタグとして、
HTML5では非推奨が取り消され、採用されました。
sタグとuタグはHTML5で廃止されました。
削除や挿入の意味はないけど取り消し線や下線を付けたい場合は、スタイルシートを使います。
text-decoration: line-through 取り消し線
text-decoration: underline 下線
style="text-decoration: ****" として
spanタグやその他のタグの開始タグの中に書き込んだり、
$$ { text-decoration: ****} として（$$はそれを付ける場所）
ページのヘッダ部分や外部のcssファイルに加えたりします。
基本的な手順は、３－注a. スタイルシートを使った色表現と同じです。
文字の中には、特定の機種でしか表現されないものもあります。
それを、機種依存文字または環境依存文字と呼びます。
代表的なものでは、Windows限定の丸囲み数字、Mac限定のハートマークなど。
携帯メール限定の顔マークなども、一種の機種依存文字と言えるでしょう。
「WinならWin同士」など、同じ機種どうしでのみ理解されるものです。
それ以外の機種では、空白や「・」や「｜」のような記号で表示されます。
従って、みんなの見るHP（HTMLファイル）を作る時や、
BBS（電子掲示板）では、
気を付けて使用する必要があります。
機種依存文字ではありませんが、半角カナもあります。
これは、ご自分のパソコン内だけで使う分には大丈夫ですが、
メールを送った時やBBSに書き込んだ時など、文字化けを起こし、
（半角カナの部分だけでなく）
普通に書かれた他の文章まで読めなくなる場合があります。
使っている機種には関係なく、
使用を禁止されている場面が多いです。
BBSでは、半角カナの使用を禁止している所が大半です。
もちろん、みんなの見るHPでの使用はお勧めできません。
（メールやHPでは）使ってはいけない文字 （←「ず's home page」より）
メモ帳（テキストエディタ）にそのまま書いただけでは、
場合によってはHTMLファイル上でうまく表現されなくなる文字もあります。
その場合は、「半角アンドマーク
＋その文字のキーワード＋半角セミコロン」を書くと、
HTMLファイル上でちゃんと表現されます。これを実体表示と言います。
「&」＋「その文字のキーワード」＋「;」 & ＝ & " ＝ " < ＝ < > ＝ > 半角スペース ＝ |
また、メモ帳（テキストエディタ）の中でもちゃんと表現されない、
しかし、英語以外の言語や発音表記などでは必要不可欠な
特殊なアルファベットも、この方法で表記できます。（çやÖやæなど。）
実体表示で表せる特殊な文字・一覧
（←「The Web KANZAKI」より）
<a href=""> と </a> で挟みます。挟むのは文字でも画像でも良いです。
"" の間には、行きたいHTMLファイルのある場所プラスそのファイルの名前、
即ちアドレスを書きます。
開始タグと終了タグの間には、
行き先のページの内容を解りやすく手短かに
表した言葉を入れるのが基本です。
ページAに書いてあるリンクからページBに飛ぶ時、
ページAをリンク元、
ページBをリンク先と言います。
|
左の例では、 00sという名のフォルダの中に、 1枚のファイルindex.html と、1個のフォルダ2003 が入ってます。 2003フォルダの中には、 1枚のファイルtuunen.html と、3個のフォルダjan、feb、mar が入ってます。 janフォルダには、3枚のファイル 1st.html、2nd.html、3rd.html が、 febフォルダには、3枚のファイル 15th.html、16th.html、17th.html が、 marフォルダには、1枚のファイル 31th.html が 入ってます。 |
※今書いてるページと同じフォルダ内で
（フォルダがそれ以上深くも浅くもない）並列にあるページ。
この位置関係は『同じ階層』とも呼ばれます。
janの1st.html を書いてる途中、同じjanの3rd.html へリンクさせたいなら、
<a href="3rd.html">3日へ</a>
（タグ間の言葉はこれ以外でも可・以下同じ）
アドレス部分にはファイル名だけで大丈夫です。
見た目には、3日へ と現れます。
←注意：行けないリンクです。
また、title属性を書き込んでおくと、
そこにポインタを当てた時に吹き出しでその内容が現れます。
ページの正式なタイトル、読み方、注意事項などを伝えるのに便利です。
本当は、上記のリンクのタグはこうなっています。
<a href="3rd.html title="注意：行けないリンクです！">3日へ</a>
00sフォルダ内のindex.html を書いてる途中、
00sフォルダ内の2003フォルダ内のjanフォルダ内の1st.html へリンクさせたいなら、
タグは、<a href="2003/jan/1st.html">2003年1月1日へ</a>
フォルダ名およびファイル名を / で仕切りながら書いていきます。
（/ はスラッシュと読むらしい）
「リンク元・00sのindex.html」から見た「リンク先・00sの2003のjanの1st.html」、
この位置関係は『二つ下の階層』とも呼ばれます。
2003のjanの1st.html を書いてる途中 janフォルダの外の、2003のtuunen.html へリンクさせたいなら、
タグは、<a href="../tuunen.html">2003年通年へ</a>
ドット二つとスラッシュを書けば、
janフォルダを出たことになります。
その後は、1st.htmlファイルが2003フォルダにあるものと仮定して、リンクを書いて行きます。
「リンク元・2003のjanの1st.html」から見た「リンク先・2003のtuunen.html」、
この位置関係は『一つ上の階層』とも呼ばれます。
同じ要領で、janの1st.html から marの31th.html へのリンクなら、
タグは、<a href="../mar/31th.html">3月31日へ</a>
※この方法では、フォルダを2個以上外に出る事は出来ません。
下の「４－４．よそ様のHPへのリンク」と同じに考えましょう。
フォルダをもう一つ外に出たい時は、ドット二つとスラッシュをもう1回書きます。
<a href="../../index.html">00年代目次へ</a>
分量の多いページなどで、ページの頭を飛ばして途中にリンクさせたい時は、
そこに idを付けます。
そのリンク先のh*タグやpタグの開始タグの中に idを書き込みます。
janの2nd.htmlの<h2>21時</h2> にリンクさせたい場合、
<h2 id="21h">21時</h2>
他のページを書いてる途中でそこにリンクさせたい場合は、
aタグに書いたアドレスの後に#とidを付けます。
<a href="2nd.html#21h">2日21時へ</a>
（同じ階層のファイルの場合）
同じページ内でのリンクなら、#とidだけを書きます。
同じ2nd.html内のどこかから<h2>21時</h2>に飛ばせたい場合、
<a href="#21h">21時へ</a>
idはどんな名前にしても良いですが、
使える文字にはファイル名やフォルダ名と同じ注意があります。
1箇所に一つのidを付けたら、同一ページ内ではその同じidを他の箇所には付けられません。
（リンク先が複数あったら混乱するっしょ）
idは h*タグやpタグやdelタグやリンクや画像、色んな所に付けられます。
また、文章の一部など、特にタグで挟まれてない部分にidを付けるには、
範囲を指定するタグ・spanタグで挟んで、その開始タグの中に書きます。
ネット上にある他のページへのリンク
検索エンジン・グーグル
タグは、<a href="http://www.google.com/intl/ja/">検索エンジン・グーグル</a>
アドレス部分を http:// から書きます。
この書き方を絶対パスと呼びます。
反対に、上の４－１から４－４までの書き方を相対パスと呼びます。
HPを作り続ける中で、自分のHP内でのページやフォルダの移動もあるでしょうし、
またはHPそのもののお引っ越しも有り得るでしょう。
それを考えると、リンクは出来るだけ相対パスで書いておく方が便利なようです。
ご自分のメールアドレスgero5p@****.ocn.ne.jp にメールをもらいたい時
←注意：存在しないアドレスです。
お便り待ってるわ☆
タグは、<a href="mailto:gero5p@****.ocn.ne.jp">お便り待ってるわ☆</a>
ページを見ている人がここをクリックすると、自動的にメールソフトが起動し、
gero5p@****.ocn.ne.jp にメールを送る準備が出来ます。
<img src=""> というタグを書きます。
"" の間には、その画像のある場所（と画像ファイルの名前）を入れます。
src内の書き方は、リンクと同要領です。
このタグも普通と違って、終了タグは不要です。
画像です。
↑タグは、<img src="heart1.jpg">
今ご覧のページbody.html と同じフォルダ内にある、heart1.jpg という名前の画像です。
imgタグの中に色々な属性を書き込んで、表現を色々変える事が出来ます。
↑このタグは、
<img src="heart1.jpg" width="60" height="40"
border="2" alt="画像を拡大した例"
title="大きなはぁと">
width＝横の大きさ（ピクセル数）
height＝タテの大きさ（ピクセル数）
※ちなみに元々は、横20ピクセル×タテ20ピクセルの大きさ（約1cm四方）の画像です。
※画像の大きさを知るには、画像を右クリックし「プロパティ」を選択、
大きさの所に、横×タテのピクセル数が書いてあります。
border＝画像の縁取りの太さ（ピクセル数）、0にすると無くなる。
alt＝画像が表示されない時に代わりに表示される文字、
画像の内容を解りやすく手短かな言葉で説明します。
※Internet Explorer なら、ポインタを当てると吹き出しでその内容が出て来ます。
title＝その画像にポインタを当てた時に表示される文字
ブラウザには、もともと画像を表示しないように作られている物もあります。
視覚障がいの方用に、ページの内容を音声で読み上げる音声ブラウザもあります。
また、人によっては、ページの読み込みを早めるため、
画像を表示しない設定にしている事もあります。
そうでない場合でも、パソコンのトラブルや回線の混雑などで、
画像の表示が出来なかったり大幅に遅れたりは、きっと皆さんも良く体験しているでしょう。
その時のために、alt属性には、画像の内容の代わりとなる文章を入れて置く事が推奨されています。
特に、デザインした文字や記号を画像にして使っている場合は、
画像が表示されないと意味が全く通じなくなるケースが非常に多く、alt属性はことさら重要です。
という画像なら、もし画像が表現されない時に、
alt属性が書かれてなければ全く意味が解りませんが、
（こういう風に見えているHPが非常に多いです）
画像のタグの中に alt="入り口" と書いておけば意味が通じます。
また、ポインタを当てると「入り口」と現れます。
HPのアクセスしやすさを検討したW3C勧告では、
画像では必ず、横×タテの大きさを指定するように言われています。
画像が表示される前と後では、特に画像が大きい場合、
文章の位置などページの他の部分のレイアウトが違って見えるからだそうです。
しかし、alt 内に書かれた文章に比べ、画像のサイズが小さい時は、
画像が表示されない場合でも、alt で書かれた説明文が全く読めなくなる場合も多いです。
ページのレイアウト以上にこっちの方が、バリアフリー的にははるかに問題に思えます。
←画像の大きさを指定しない場合
←画像の大きさを指定した場合
（30ピクセル四方）
『画像の大きさは必ず指定しましょう』という教えは、かえって、
ユニバーサルデザインの考えにそぐわないように思います。
指定した方がよい場合と、指定しない方がかえって良い場合と、両方あります。
HTMLファイルの背景を変化させたい場合は、
最初の bodyタグの開始タグの中に、属性を書き込みます。←古い方法です
※前述の文字色関連の属性も、背景関連の属性も、
どちらも一つのbodyタグの開始タグの中に書き込みます。←古い方法です
タグ内で属性を並べる順番は、どうでも良いようです。
<body text="**" link="**" alink="**" vlink="**" bgcolor="**" background="**">
今ご覧のページbody.html では、以下のように指定しています。
<body bgcolor="#e8ffee">
bgcolor＝背景の色、ここでは#e8ffeeに指定。（#f5fffa＝mintcream よりちょっと濃い目の色）
背景を画像にする事も出来ます。 背景に画像を使った例
<body background="kuri.jpg">
background＝背景の画像、その画像を置いてある場所（と画像ファイルの名前）を入れます。
ここで使ったのは、kuri.jpgという名の画像（大きさ約2cm四方）です。
bodyタグの中のbgcolor属性とbackground属性は、HTML5では廃止されました。
（ただし、fontタグでの文字色指定と同じく、少なくともあと数年は使われるでしょう。）
スタイルシートで
文字色****と
背景色\\\\と
背景画像####.jpgを
指定するには、
1ページのみなら、headタグの間のstyleタグの間に、
body { color: ****; background: \\\\ url("####.jpg") }
と書き込みます。（そのHTMLファイルと####.jpgが同じフォルダ内にある場合）
複数ページなら、これを外部のcssファイルに書き込みますが、
url("")の中には、そのcssファイルから見た背景画像のアドレスを書き込みます。
colorの後とbackgroundの後はコロン＋半角スペース、
****の後はセミコロン＋半角スペース、\\\\とurlの間は半角スペースです。
大まかな手順は、
３－注a. スタイルシートを使った色表現と同じです。
色の種類や書き方については、色調別・色見本
のページをご覧下さい。
ちなみに、 background-color: \\\\; background-image: url("####.jpg") と、
分けて書く方法もあります。
また、スタイルシートを使うと、ページの一部分の背景を変える事が簡単に出来ます。
いわゆるインライン要素・段落pタグや見出しh*タグなどの一部分、delタグやspanタグなどで挟んだ部分を、
たとえば背景色yellow、縁取りの色navyにしたいなら、その開始タグの中に、
style="background-color: yellow; outline: solid 1px navy" と書き込みます。
solidの代わりにdoubleなら二本線、dashedなら破線、dottedなら点線になります。
1pxの所で数値を変えると太さが変わりますし、
thin＝細い、medium＝普通、thick＝太い の中から選ぶ事も出来ます。
なお、線種と太さの両方を指定しないと、太さゼロになってしまいます。
いわゆるブロック要素・pタグ全体やh*タグ全体やdivタグで挟んだ部分を
たとえば背景色yellow、縁取りの色navy、横幅200ピクセルにしたいなら、その開始タグの中に、
style="background-color: yellow; outline: solid 1px navy width: 200" と書き込みます。
widthはパーセントでも指定出来ますが、何も指定しないと横幅がページいっぱいに広がってしまいます。
他にも、
; margin: *px 縁取りと外の間の余白（ピクセル数）、
; padding: *px 縁取りと中身の間の余白（ピクセル数） などを加える事も出来ます。
パソコンで表現される色調は、機種や設定や機械のコンディションによって違いがあります。
自分の所で見ている色合いが、他の人の所でもその通り表現されるとは限りません。
従って、背景色と文字色には十分なコントラストが求められます。
（ちなみに私のパソコンでは、調子が悪い時は、画面の白い部分がマゼンタ（紫がかったピンク）になります。）
参考までに、（色盲や色弱など）色覚障がいの方やそのご家族のHPより；
黒の背景に見えにくい文字色、
私の苦手な色の組み合わせ
（以上、藹藹倶楽部より）
カラーバリアフリーガイドver1.01
画像は、全部が表示されるのに大変時間がかかる場合があります。
背景に画像を使ったページでは、背景色と文字色が似た色だと、
たとえ、「画像の色調」と文字色に十分なコントラストがあっても、
画像が表示されるまで文字が全く読めない場合があります。
画像が全く表示されない場合も同様です。
| 日記 | 日記 | 日記 |
左＝背景の画像がちゃんと表示されている場合
中＝背景の画像が表示されず、背景色も設定していない場合
（↑こういう風に見えているHPが非常に多いです）
右＝背景の画像は表示されないが、画像の色調と似た背景色を設定している場合
たとえ背景に画像を使う場合でも、
画像の色調と似た背景色を指定しておくと良いでしょう。
画像の色調と似てなくても、文字色との区別が付く背景色なら良いです。
背景色を指定してない例
←背景画像488KB、お暇な方はどうぞ（黒笑）
セル一個のテーブル（表）を作ります。
←古い方法です
※セル（cell）＝表を構成する最小単位の一マス一マス。
ちなみに英語のcellには独房の意味もあります。
その部分を他と区別させたい時、
ページ全体の背景に画像を使っても文字は読みやすくしたいという時などに便利です。
|
<table bgcolor="#00ffff"> <tbody> <tr><td>ここに色々書きます</td></tr> </tbody></table> |
bgcolor属性の""の間に、好きな色を入れます。
（ここでは#00ffff＝aquaにしましたが、もちろんお好きな色で結構です。）
<td>と</td>の間に、必要な内容を入れます。
上の例の場合、以下のようになります。
※実際のこのページのタグでは、文字色に細工をしてます。
（代替スタイルシート対策）
| ここに色々書きます |
|
<table bgcolor="#00ffff" background="kimono.jpg"
align="center" width="40%" height="100" border="2" cellspacing="4" cellpadding="10"> <caption>例その２</caption> <tbody align="right" valign="top"> <tr><td>属性を増やしました</td></tr> </tbody></table> |
上の例の場合、以下のようになります。
※実際のこのページのタグでは、文字色に細工をしてます。
| 属性を増やしました |
以下のものは全て、省略可です。
※注；デフォルト＝既定値のこと。
省略した場合は自動的にこの値になる
tableタグの属性（開始タグの中に書き込む）
background＝お好みの背景画像。背景色も同時に指定しておく。
align＝そのページの中でのテーブルの横位置。left、center、rightから選択、デフォルトはleft。
width＝横の大きさ、ピクセル数。（画面の横幅に対する）パーセント指定も可。（ここでは40％）
height＝タテの大きさ、ピクセル数。
border＝セルの枠の太さ、ピクセル数。デフォルトは0。
cellspacing＝セルとセルの、およびセルと外枠の間隔、ピクセル数。デフォルトは2。
cellpadding＝セルの中身と枠のすき間、ピクセル数。デフォルトは2。
captionタグ＝そのテーブルのタイトル
横位置は自動的に、テーブルの中央に来ます。横位置を変えたい場合は、
<caption><span align="left">タイトル</span></caption>
align属性の""の間の値を、left、center、rightから選択します。
tbodyタグの属性（開始タグの中に書き込む）
align＝セルの中での中身の横位置。left、center、rightから選択、デフォルトはleft。
valign＝セルの中での中身のタテ位置。top、middle、bottomから選択、デフォルトはmiddle。
センタリングしました。
<div align="center"> と </div> で挟みました。
右に寄せてみました。
<div align="right"> と </div> で挟みました。
余り使いませんが、左寄せ。
<div align="left"> と </div> で挟みました。
文章ばかりでなく、見出しや画像や表（テーブル）などにも使えます。
なお、見出しなら <h? align="center"> と </h?> で挟んだり、（?は1～6の数字）
段落なら <p align="center"> と </p> で挟んでも表現できます。
right、leftも同じ要領です。
上記のalign属性は、HTML5では廃止されました。
（あと少なくとも数年は使えます。）
スタイルシートでセンタリングするなら、
<div style="text-align: center"> と</div>で挟みます。
style="text-align: center" を他のタグの開始タグの中に書き込む事も出来ますし、
文章のみならず画像にも使えます。right、leftも同じ要領です。
横に水平に線を引きたい時はhrタグ <hr> を書きます。終了タグは不要です。
表を作るほどではないがページ内を簡単に整理したい時などに、軽くて簡単で重宝します。
↓引いてみました。
ピクセル数またはパーセント指定で長さを変えたり、横の位置を変えたりも出来ます。
上から、
ピクセル数で指定
<hr width="200"> ←古い方法、
<hr style="width: 200">
←スタイルシート
パーセントで指定 この場合はご覧の画面の横幅の丁度半分
<hr width="50%"> ←古い方法、
<hr style="width: 50%">
←スタイルシート
右寄せ
<hr width="50%" align="right">
←古い方法
<hr style="width: 50%; margin-right: 0px">
←スタイルシート
左寄せ
<hr width="50%" align="left">
←古い方法
<hr style="width: 50%; margin-left: 0px">
←スタイルシート
※右寄せ/左寄せをスタイルシートで表現する方法は、
Internet Explorer11では使えません。
FireFox、Google Chrome、Opera、Safariでは表現されます。
また、色や太さを変える事も出来ます。上から、
色をtealに指定
<hr color="teal">
←古い方法、
<hr style="border-color: teal"> ←スタイルシート
太さを15ピクセルに指定
<hr size="15">
←古い方法、
<hr style="height: 15px">
←スタイルシート
色をteal、太さを15ピクセルに指定
<hr color="teal" size="15">
←古い方法、
<hr style="background-color: teal; height: 15px">
←スタイルシート
テキストエディタ（windowsメモ帳など）やメールソフトなどに書いたものをそのまま載せたい場合は、
preタグで挟みます。preタグで挟むと、
メモ帳（テキストエディタ）にこう書いてあるものを
21日￥198 22日￥105 合計￥303 | |
preタグで挟むと
21日￥198 22日￥105 合計￥303 |
preタグで挟まないと 21日￥198 22日￥105 合計￥303 |
| preタグを使わずにこの形を表現しようとすると タグをこう書く必要がある 21日￥198<br> 22日￥105<br><br> 合計￥303 | |
preタグで挟むと
#123456 #AAAAAA #aaaaaa #BBBBBB #IIIIII |
preタグで挟まないと（改行タグのみ使用） #123456 #AAAAAA #aaaaaa #BBBBBB #IIIIII |
数式や簡単な表でケタを揃えたい時は、table（表）を使うよりも軽くて簡単で重宝します。
ちなみに、絵文字にも使えます。
以下の二つの手法は、特に一部の人たちにとっては深刻な問題を引き起こします。
どちらも、現時点では見る人の側で制御が出来ないものです。
（停止/一時停止/開始/スロー再生/コマ送り 等）
今や多くの解説書で、ハッキリと使用禁止にされていますし、
かつては取り入れていたブラウザでも、新しいバージョンではすでに使用を取りやめていたりします。
同時に、これらの手法は、特に障がいのない人たちにとっても、大変目を疲れさせるものです。
目立ちはするものの、だからと言って、見る人からの人気は決して高くありません。
Internet Explorer では、marqueeタグで挟むと、文字が右から左に流れます。
（方向や速度を変える方法もあります）
しかし、認知障がいのある方々にとっては、その流れる部分を読もうとすると
頭が混乱したり、その後の流れない普通の文章すら読めなくなってしまう事もあるそうです。
視覚に障がいのある人にとっては、殆どまたは全く読めなくなります。
同時に、特に障がいのない人でも、文章を追うのに一苦労しますし、読むと目が疲れるものです。
Netscape Navigator では、blinkタグで挟むと、文字が点滅するそうです。
Internet Explorer でも、点滅させる別の方法があるそうです。
しかし、光過敏性てんかんのある方々にとっては、
この点滅がてんかん発作を起こす引き金にも成り得ると言います。
（点滅する範囲の大きさや、点滅部分と背景との色のコントラスト、
点滅する速度によっても違うそうですが）
光過敏性てんかんのある人は、特に１秒間に20回の点滅をピークとする
１秒間に４～59回(Hz)の点滅や（ストロボの光りのような）
暗いものから明るいものへの急激な変化に対し、
その明滅やフラッシュがきっかけとなって発作を引き起こすことがあります
（ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 より）
また、例えてんかんではなくても、
小さな子供の場合は、てんかん発作を引き起こす可能性が高くなるでしょう。
以前のポケモン問題がそうでした。
そしてこの手法もまた、特に障がいのない人でも、見ると目が疲れるものです。
なくても何とかなるものの、あると便利で使用頻度の高い技の代表格です。
<ul>と</ul>の間に、
liタグで挟んだ項目をいくつでも書き込んで行きます。
インデント（字下げ）され、各項目の頭には自動的に・（黒丸）が付きます。
<ul>
<li>もんすけ</li>
<li>onちゃん</li>
</ul>
この場合は以下のように現れます。
また、<ul>または<li>の中にtype属性を書き込むと、
各項目の頭に付く記号を変える事が出来ます。
←古い方法です
disk＝黒丸、circle＝白丸、square＝黒い四角
リストの中のtype属性はHTML5では廃止されましたが、スタイルシートでは開始タグの中に、
style="list-style-type: ****" と書き込みます。
<ul type="square">
<li>ポリー</li>
<li>ベルたそ</li>
<li type="circle">ドアラ</li>
<li>つばみ</li>
</ul>
<ol>と</ol>の間に、
liタグで挟んだ項目をいくつでも書き込んで行きます。
インデントされ、各項目の頭には自動的に1から番号が振られます。
<ol>
<li>くまモン</li>
<li>ひこにゃん</li>
<li>メロン熊</li>
</ol>
<ol>の中にtype属性を書き込むと、各項目の頭に付く種類を変える事が出来ます。
←古い方法です
1なら算用数字、aならアルファベット小文字、Aならアルファベット大文字、
i（アルファベットのアイの半角小文字）なら
ローマ数字の小文字（ⅰ、ⅱ、ⅲ、ⅳ）（i、ii、iii、iv）、
I（アルファベットのアイの半角大文字）なら
ローマ数字の大文字（Ⅰ、Ⅱ、Ⅲ、Ⅳ）（I、II、III、IV）。
olのtype属性もまた、HTL5では廃止されましたが、スタイルシートなら<ol>の中に、
style="list-style-type: ****" と書き込みます。****は、
decimal＝算用数字、decimal-leading-zero＝頭に0をつけた算用数字、
lower-alpha＝アルファベット小文字(lower-latinでも可)、
upper-alpha＝アルファベット大文字(upper-latinでも可)、
lower-roman＝ローマ数字小文字、upper-roman＝ローマ数字大文字、などなど。
また、<ol>の中にstart属性を書き込むと、始まる数字や文字を指定出来ます。
算用数字で始まる場合に限り、ゼロやマイナスの整数からも始められます。
<ol type="A" start="3">
<li>から始まる</li>
<li>中山美穂よー</li>
<li>浅香唯じゃないわよー</li>
</ol>
注．
ローマ数字は、Windowsのパソコンなら、
カナ漢字モードで算用数字を入力して変換すると候補の中に現れます。
しかしそれらは全て全角文字で、おまけに機種依存文字です。
タグを書く時に使えないのはもちろんですが、
みんなの見るHTMLの本文や、ネット上の掲示板やEメールでも気をつけて使う必要があります。
<dl>と</dl>の間に、
定義する項目をdtタグで挟んで、その項目の説明をddタグで挟んで、書いていきます。
dtはインデントされず、ddはインデントされて表示されます。
<dl>
<dt>onちゃん</dt>
<dd>HTBのマスコット</dd>
<dd>知名度全国区かも</dd>
<dt>らっぴぃ</dt>
<dt>もんすけ</dt>
<dd>チャンネル1番、人気は2番（泣）</dd>
</dl>
タグを入れ子にして、リストの中にリストを作る事も出来ます。
中に入るリストを作り、それを、
元となるリストのliタグまたはddタグで挟んで書いていきます。
<ol>
<li>紅茶</li>
<li>ハーブティー
<ul>
<li>ミント</li>
<li>ローズヒップ</li>
</ul>
</li>
<li>コーヒー</li>
</ol>
この場合は以下のように現れます。
HTMLファイルを書いてる際、ページの表面には出したくない内容を書き込むには、
<!-- と -->の間に書き込みます。
<!--「ここまでやった、後は来月」--> と書き込むと、
「」の部分はページには現れません。
同様に、スタイルシートで使うCSSファイルでは、読み込まれたくない内容を
/* と */の間に書き込みます。
/*「文字色をcolor: hotpinkから変更」*/ と書き込むと、「」の部分はスタイルシートに影響しなくなります。
「」の部分をそのまま書いたり<!-- と -->で挟んで書いたりすると、この場合、
color: hotpinkが読み込まれて文字色やどこかの色がhotpinkになってしまう事もあります。