恥ずかしながら、私のホームページを紹介します。
私のパソコンでブラウザを立ち上げた時のページですので、私のホームページです。
サンプルですが・・・・
私のホームページを作成したのは、ブラウザの 『 お気に入り 』 が一杯になり収拾がつかなくなって来たので、ブラウザを立ち上げたページで、お気に入りの一覧表が表示されれば便利だと思い、
と条件を付けて作成しました。因みに、私のパソコンの使用環境は、
最大化 
を使用しないで、画面一杯に表示しています。
このホームページの作成過程を 『 サンプル１ 』 〜 『 サンプル１４ 』 で、順を追って説明していきます。
あくまでもサンプルですので、リンク切れは勘弁して下さい。
リンク切れについてです。折角ウェブサイトを立ち上げて、色々なサイトを紹介していても、リンク先が閉鎖されていたり、URIが変更されていたら閲覧できません。定期的に確認しましょう。
また、自サイト内でも、リンク先が未だ完成してなく、『 工事中 』 などのページを時々見ますが、これもリンク切れと見做されます。この様な場合は、最初からリンクを張らないようにしましょう。
私がこのサイトの作成を始めたのは、2004年です。それから幾星霜、その間、友人、知人、天狗に雀、いろいろ批判を受けながら数度の内容の変更を行い、やっとサイトを一般公開する事になりました。
パソコンの世界では、５年の月日は二昔も前になります。私のパソコンもWIN９８からWIN-７に世代が変わり、使用しているディスプレイも15インチCRTから17インチ液晶に変わりました。
現在では、ブラウザも進化し、新しいブラウザも発表されNNは、終焉を迎えました。このサイトの内容は、WIN-９８の操作も含まれていますが、基本操作はそんなに変わっていないと思います。臨機応変に対応して下さい。
<（_ _）><（_ _）>
サンプル１を開いて、ソースを見て下さい。
表示したいサイトのURLとサイト名をグループ分けして、羅列しているだけです。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja-JP" xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>中年おっちゃんでも出来たホームページ作成講座 with ? mark - サンプル01</title>
</head>
<body>
<!--=====検索サイト=====-->
<h1>検索サイト</h1>
<p><a href="http://jp.msn.com/">MSN Japan</a></p>
<p><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a></p>
：
</body>
</html>１行目は、XML宣言です。
２行目は、文書型宣言です。Transitional-DTDを使用しています。
HEAD要素の内容
BODY要素の内容
<!--
<!--コメントの内容-->
このホームページはお気に入りの一覧表ですので、A要素 を使い、リンク先のURIと名前を記述して行きました。A要素 はインライン要素なので、BODY要素の子要素としては使用出来ません。ブロック要素である P要素 の内容として使用しています。
以下、同様に見出しとリンク先を記述しています。
そうして出来上がったＨＴＭＬが正しいかどうかのチェックが必要です。私は、Another HTML-lint さんのゲートウェイサーヴィスやＷ３Ｃの Markup Validation Service を使用しています。
もうお分かりですよね。何らかの理由でそのページのリンク先を抽出/編集した時に、リンク先の名前が ここ や クリック では、何ら意味が有りません。
前節で、A要素の内容は移動先の説明と書きました。勿論リンク先のサイト名でも良いでしょう。しかし、上記の場合は、
と置き換えるだけで、問題が解決しますし、視覚的にもすっきりすると思います。
また、上記１では、もう一つの問題もあります。Ｂの説明とＣの説明は当然違うURIになる訳ですが、URIに対する移動先の説明が同じ ここ になっています。
逆も又真で、同じURIで異なった移動先の説明を記述しても混乱の元になります。移動先のURIと説明は、統一しましょう。
視覚系のブラウザでは、リンク先を続けて記述すると混乱の元になります。
”,” やスペース等を使用してリンク先を区別する事も必要です。
サンプル２を開いて、ソースを見て下さい。
レイアウトを決めて行く為に各要素をスタイルシートで修飾して行きますが、作業がし易いように、要素の範囲を色付けしました。
参照 色指定
HEAD要素の内容の変更箇所
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>中年おっちゃんでも出来たホームページ作成講座 with ? mark - サンプル０２</title>
<style type="text/css">
h1,p { background-color : #ccf ; }
</style>
</head>意味は、『 H1要素とP要素の背景色 (background-color) を #ccf にする 』 です。
スタイルシートは、セレクタ（selector）で選択された要素をプロパティ（property 属性）のプロパティ値（corresponding value）で修飾します。
| セレクタ | プロパティ | プロパティ値 |
| h1,p | background-color | #ccf |
サンプル３を開いて、ソースを見て下さい。
縦１列だった表示を５列表示にました。各列の幅は、表示可能な巾の２０％です。
（ 100% / 5 = 20% ）
参照 巾や高さの単位
スタイルシート内の変更箇所
<style type="text/css">
h1,p { background-color : #ccf ; }
.posi { float : left ;
width : 20% ; }
</style>表示巾を表示可能領域の割合で指定する事により、表示可能領域の表示巾が変わっても横のレイアウトは相対的に変化します。
BODY要素内の変更箇所
|
|
サンプル４を開いて、ソースを見て下さい。
H1要素とP要素の表示サイズを変更しました。
ブラウザは、スタイルシートの先頭から解釈を開始します。同一要素やクラスの記述があった場合、プロパティとプロパティ値が同じなら無視をし、新しいプロパティやプロパティ値が記述してあると、そのプロパティを反映します。
参照 巾や高さの単位
スタイルシート内の変更箇所
<style type="text/css">
h1,p { background-color : #ccf ; }
h1 { font-size : 120% ; }
p { font-size : 95% ; }
.posi { float : left ;
width : 20% ; }
</style>font-sizeプロパティは、文字サイズの指定。基準は親要素です。
文字サイズをたった５％下げただけで、P要素の表示が見づらくなってしまいました。P要素の文字サイズ指定９５％はやめます。
P要素の場合、スタイルシートで修飾しなければ、親要素の文字サイズで表示します。親要素から文字サイズ等のスタイルを受け継ぐ事を、継承 ( inherit ) といいます。