何の誰兵衛ホームページ

本ページのソースを見ると強制改行するための <br> が多用されています。
実際に改行したいものと、画面を見易くするためのものとがあります。

◇あなたにもホームページは作れる◇

世の中にはいろいろな人が居て
１．「はっきりと理解しないでも、先ず大よそのイメージを掴んでから入る。」
２．２０秒でホ－ムページガ作れる（但しタイトルだけのホームページ）
３．ホームページは難しくない。・・・云々です。

みなそのとおりで決して難しいことではありません。
但し奥が深いことは事実ですが、取り敢えず下記のことを実施すると
１．で言う「はっきりと理解しないでも、先ず大よそのイメージを掴む」ことができます。

始めのうちはあまり考えることもなく、指示どおり実行してみてください。だんだんに要領が分かってくると思います。

ここで作るホームページは「ご自分のパソコン内で、２～３枚仕上げるだけです。２つ目はリンク実証用です。３っつ目のデザインで完成の予定です。
（１Pも３Pも同様な作業です。インターネトに載せるのはその先の話です。）

先ず「ホームページのトップにするフアイル」は必ず「 index.html 」とする決まりになっています。
注１）文字は将来に備えるためと、それに説明も簡単ですので「半角英数小文字」に統一します。
注２．出来上がった資料は保存すると「○○フアイル」と呼ばれます。この場合は「indexフアイル」になります。）

では１枚目の「index1.html」フアイル(１は後で削除)を作りますが、画像を挿入し、midiフアイルが有ればBGMも鳴らせたいので材料の
「サンプル画像フアイル１枚」と「サンプルmidiフアイル１枚（BGM用）」を
予め用意して「My Documents」内の「My Musicフォルダー」に保存して置きます。

(大抵の方はここが空いていそうなので、たまたまそうしました。新規フォルダーの作れる方は、フォルダー名「htmlstyle入門」を「My Dcuments」内に作ってください。）

手順
１．画像フアイル１枚「My Music フォルダー」内に取り込みます。下記から１つで結構です。
方法１「My Pictures」の中にご自分が保存した画像のサイズの小さいもの（１０～４０Kb位）

２．ペイントで何かに絵を書いて「 sample.jpg 」と名前を付けて「My Music フォルダー」内に保存。

３．Windowsが用意している画像を使用する。
Windows Meの場合は、マイコンピュータ→ローカルデスク（C）→Program→Common Files→MycrosoftSharedの中のClipartとStationeryに沢山のおなじみの画像が入っています、この中の一つを「右クリック」で「 My Music フォルダー」へドラッグ＆ドロップしてメニューの「此処へコピーする」を選択してください。以上は、html・スタイルシート以前の「パソコン学習の基礎的部分」です。

ここに書かれているソースの文字は「テキスト」形式で書かれています。
この「テキスト形式」は「文字色・文字サイズ・レイアウト情報のない単純な文字だけのデータ」
で異なるワープロソフトやパソコン同士でもデータのやりとりができるので「世界中で通用」します。

なにより優れていることはインターネット上のページ（Webページ）のコピーにはそのソースからコピーして「メモ帳にペースト」するのがベストです。シンプルで忠実に再現できるからです。（但し画像を取り込みたかったら、WORDに貼り付けると良いでしょう。HPビルダーに貼り付けても取れますが、フアイルがごてごてとついてきます。）

ソースをご覧下さい。<body>から下は body終了形の</body> html終了形の</html>の３っつのみです。（No.1のスタート時点ですが）改行タグの<br>はかなり多用しました。

画面をご覧ください。味も素っ気もないただのワープロ文です。
これを
１．「body部」ではタグという道具で「マーク付け」し、
２．「head部」では、スタイルシートを使用して簡単に大変身させ、また、編集します。

今回の変身目標は、ワードにある、B（太字）I（イタリック）U（下線）文字サイズ、文字色、リストその他リンク、画像等を「h1」「p」「ul」の３要素を適宜配分して「セレクタ」と呼ばれる要素内で設定します。（但しリンク画像は直接設定）
以上が説明部分です。
これからが、本題に入ります。
先ず「htmlフアイル」を作ります。

◇１．「htmlフアイル」の作成◇

方法は、メモ帳を開いて、このページの「ソース全文」をコピー＆ペーストしてください。
メモ帳は（スタート→プログラム→アクセサリ→メモ帳）で開らけます。
このメモ帳を「名前を付けて保存」します。名前は index1.html で「My Music 」フォルダーに保存してください。今後、何かを設定した際「上書き保存」や「名前を付けて保存」しますが、index1.html をindex2.html、index3.htmlというように番号を上げて保存する場合もあります。

◇２．見出し要素[ h1 ]のスタイルを head 部に埋め込む◇

今度は今できた「index1.html」を開き、下の「 h1 」から１３行目の「 } 」までを「1字1句漏らさず完全にコピー」して、
head 部の の間にペーストします。(勿論手書きならなお結構です、理解力が数倍早くなります。若し邪魔なら/* */を含めその間も削除してください。)
大事なことは、

１．一つの「セレクタ」（ここでは「 h1 」)に対して上に「 { 」下に「 } 」の２つの括弧が必ずついていること、

２．一つの項目（属性と値で構成される）に「:」コロンと「;」セミコロンが必ず有ることです。

  h1   { 
         color: red;　　　　　　　　　　 /*文字色赤色*/
         font-size: 20pt;　　　　　　　  /*文字サイズ*/
         font-family: ＭＳ 明朝;　　　　 /*書体*/
         text-align: center;　　　　　　 /*テキスト中央*/

         background-color: #fc9;　　　　 /*領域色（背景色）*/
         height: 37px;　　　　　　　　　 /*領域枠高さ*/

         padding-top: 10px;　　　　　　　/*領域枠と文字列の上の間隔*/
         padding-bottom: 5px;　　　　　　/*領域枠と文字列の下の間隔*/
         margin-left: 5px; 　　　　　　　/*領域枠の幅の設定で画面の端からの距離*/

         border-size: 20px;　　　　　　　/*枠線の幅*/
         border-style: outset; 　　　　　/*領域枠の形式で、内容浮き出し感の立体感*/
       }

◇３．body内の特定箇所に「 h1 タグ」を植付ける◇

「index1.html」のソースを開いて、<body>内の「◇あなたにもホームページは作れる◇」の左◇の前に<h1>を、右の◇の直後に</h1>を半角で記述してください。（お目当てのところ即ち「内容部分」をタグで囲むのです。）

その上で「必ず</h1>の後に<p>タグを、このページでは書くことにしましょう。」
その理由は、</h1>の後のようなブロックレベルタグが終了すると、新たな局面に入りますので、何等かのタグ付けが必要になります。h1タグ以外でも同じことがいえます。
また、<p>タグ記述に限ったことではないのですが、説明の簡単化するため一応ここでは、そうします。

上書きで保存しますと「index1.html」で残ります。

２．と３．で何を行ったかと言いますと、もう既に「見出し h1 部分に就いて、１１種のスタイルシートを設定した」ことになります。(スタイル設定は第２章にあります。、また、次ページではh2タグに領域枠･色の設定があります。）
あとは左側の[ : ]コロンと[ ;] セミコロンの間にある、数値、カラー名等をあやつれば目に見えて変化します。

以上body以内で使用したタグは<h1> １つのみですが、実はこのh1の「属性」と「値（数値や名称）」をいろいろ変えて半日位実証すると、タグにはテーブルのような「領域枠」があって、背景色、枠、枠形状、文字の左右上下位置、余白の取り方など基本的なことと「スタイルシートのイメージ」が掴めます。
属性と値の用語10個位は確実に身に付きますのでお薦めいたします。
（『用語に就いてはhead部「セレクタｐ」にあらかた載せてあります。また「スタイルシート入門から属性と値』」をご覧ください。）

私もこの枠のコントロールでヒントを得たお陰で、理解しにくかったスタイルシートにやっと入門を果たすことができたのです。１年半前に購入した入門書や最新html辞典が読めるようになったのです。）

参照：領域枠の形状等はスタイルシート入門からteble 編をご覧ください、しかも枠についてはテーブルを使わなくても同じことができることが分かります。ブロックッレベルタグと呼ばれるタグはみんなこの性質を持っているのです。）
注）/* */内は、スタイルシートのメモ書きで画面に表示されません。

◇４、要素「p」の勢力範囲に「スタイル」を設定◇

画面上で、下記 p 以下全部をコピーしてから「ソースを開き」「 h1 」の最後の「 } 」の下に「ペースト」してください。随分ありますが、「h1」の/**/内のメモであらかた想像ができると思います。また、その都度解説いたします。

[p]で設定した主なものは、文字色color:#000090;文字左寄せtext-align:left; 斜体font-style:italic;太字font-weight: bold;文字サイズfont-size: 12pt; 書体font-family: ＭＳ明朝；アンダーラインtext-decoration:underline;位です。後はノーマルとか未設定で空かせてあります。

◇５、body内の特定箇所に「 p タグ」を植付ける◇

「世の中にはいろいろな人がいて」の頭の「世」の前に<p>を記述してください。以上で h1とｐの２つの要素について一部ではありますが、スタイルシートを適用したことになります。下線がうるさいのでtext-decoration:underline;のunderline;をnone;にして上書きで保存します。「index1.html」で残ります。（このように、裏方の部分で操作編集をします。）

また、<p> タグは、現時点では終了形の </p> を省略できますので、そうします。というのは、途中に<hn> 、<div>、 <ol>などで「タグ付け」をした場合に自動的に解消され説明が易しいからです。近い将来には付けることになります。
もう一つ例えば、<p> は山括弧に挟まれているので明らかなタグですが、「p」タグと言ったり、head部では「p」セレクタと言ったりしますが、みな「p」要素にかかわることと理解してください。

◇６．更に「セレクタ」の編集です◇

６－１、head部「p」の斜体font-style:italic;と太字font-weight: bold;のitaricとboldをnoneにする。
（注）「：」と「；」は消さないで必ず残して置くこと。

６－２、◇１．、◇２．、◇３．、◇４．、◇５．、◇６．の夫々の文字列を<h1> と </h1> タグで挟んでください。
更に</h1>の後に（むしろ改行して下の方が一般的使用法）<p>タグを記述します。（新しい要素で始まることになります。）
後で「h2」に変更するする予定です。それまで「h1」にしておく。

６－３、◇６、内の「セレクタ」をブルーにします。「セ」の前に<span style="color:blue;">を、そして「タ」の後ろに </span> を書いてください。

６－４、利根町商工会ホームページにリンクをはります。

名前の左側に<a href="http://www5.ocn.ne.jp/~tones/">を、右側は</a>のタグでで挟みます。

６－５、下のｐ以下は御用すみです</body> </html>を残して全部削除してください。、メモ帖を終了する際に「名前を付けて保存」を選択「 index2.html 」にしてください。

私のトップに戻って体験２に「index2.html」が載っています。この形になっていれば、以上のこと全部終了です。

次から「index2.html」に追記します。この辺で水平線を引きます。
<hr>を記述してください。これでＯＫです。長さの設定もできますが後にします。

◇７．要素「div 」の使用。（殆ど「p」と同様だが上下空白なし）◇
以下の文字に何の変化もありません。そこで、ソースを開いて「見出しの５．◇・・・の後半の
「また、～から近い将来には付けることになります。」の両端を <div> と </div> で囲み、</div>の後または改行して<p>を記述してください。

その上で、画面上から下記「 div ～ } 」をコピーして、また、ソースを開いてhead部の「p」の最後の「 } 」の次にペーストしてください。「div」の文字色を赤色に、フォントサイズを１０ptに、書体(font-family:)をＭＳ明朝に,、背景色をpと同じに設定しました。これを読むと原因がわかります。

お分かりになりましたら、上の見出し◇１．・・から下の◇６．・・の６箇所の </h1> すぐ下に <p> が有る事を確認してください。
また、見出し◇７と◇８は<h1>と</h1>で挟んでありませんので「◇７．要素・・・◇」を挟みまた、「◇８．今までの主な点の整理◇」を挟んだ上、その」の次に<p>を記述してください。
それでなんとなく形が整い読み易くなるはずです。

ソースを開いたり画面上からとか、忙しいですが、要領が分かればソースだけの記述で全部できます。
そのために、「ｐ」のところに、４０～５０個の「記入のためのキーワード」を書いて置いたのです。
この中から適当な設定項目を拾い出し、「新しいセレクタ（例えば今回の div がそれです。）」に貼り付け「値」を記述すれば済むことです。
これだけあれば大抵のことはできます。使いなれるよういろいろ試すことが肝心です。
「値については、私のホームページ→スタイル入門→要素と属性一覧→および値」を参照ねがいます。

◇８．今までの主な点の整理◇
８－１．上のdivで説明いたします。div はhtml構造上のhead部では「セレクタ」と呼ばれる「要素名」で丸裸で記述します。

８－２．一種類の「セレクタ」に１つか複数の何かを設定する場合には必ず開始括弧「{」と終了括弧「}」を使い、その中に、「属性：」半角スペース「値；」の形で記述することで「スタイル」が設定せきるのです。

書き方は、横一列並びでも縦並びでもさしつかえありません。スペースは付けても付け忘れても大丈夫です。（ただし、全角スペースは駄目で半角スペース使用なら障害はありません。その原因は半角スペースならいくら使って幅を広げても最初の１つしか認識しないから平気なのです。それで、上のdivのように自由に並べられるのです。）

８－３．<span> タグについて。或る局部的箇所「内容と言います。」に、何かを設定したい時に何処にでも自由に何回でも使用でき、便利です。

上の例では、<h1> タグの中に使って青字にしました。この場合はブロックレベルタグのh1の中での使用です。ｐタグやdivタグその他ブロックレベルタグの（参照：上記案内の要素と属性一覧）中で使用するのが正しいっ使用法です。なぜなら、これから、学習する内に分かることですが、画像のimgやspanはインライン要素と言われ、必ずブロックレベル要素の中で使用されなければならない規則があるからです。

８－４．「body」内でのスタイルを用いたhtml記述では、
<要素 style＝”属性：値；">　内容　</要素>
の形になり、属性：値；は何種類並べてもＯＫです。この形式と青文字のところのソースを比較してください。同じ形のはずです。
上書き保存してください。続きます。今度はデザインで完成させます。

上書き保存されたフアイルのindex2.htmlが、このように見えればＯＫです。この先の操作もそんなに難しくはありませんので急行します。スタイルシートならではの早業です。

○ラインを引く○
ソースを開いて body 内の「また、ラインを引きます。」の下に <hr> タグを書きます。
また、head 内に hr セレクタを設けます。方法は画面上から
hr {background-color: green; width:80%; height:5px;}
をコピー、 --> の上にペーストします。先に引いたラインにも影響し同様に変わります

この場合は、山括弧もダブルコーテーションも無いので、ソースからでも、画面上からのどちらでも同じことになります。これが「実体参照」の問題なのです。
見出しを整理します。
タイトルの見出しを

◇超簡単！スタイルシート１日体験◇

に設定しました。そこで、
１．「◇あなたにもホームページは作れる◇」以下の <h1> を全部<h2> に直してください。終了形も</h2>に、そうして、

２．head部のセレクタh1関係{ }を含めてコピーしてすぐ下にペースト。

３．そのh1をh2に改めます。h2の内容はh1よりひと回り小さいものにし、色も替えます。

　　color:green; font-size:17pt; height: 30px; background-color: #cccc00; text-align:left;にして

　　次に、枠表示の属性関係２項目border-size: 20px;と border-style: outset;は削除します。

◇超簡単！スタイルシート１日体験◇をh1タグ終了タグ共に<body>のすぐ下へ書き換え移動してください。「に設定しました。そこで、」は不要になりました。削除して、編集に置き換えます。

「◇スクロールバーの色の設定◇」　の両端をh2タグと同終了タグで囲み<p>を記述。
画面から下記をコピーし、ソースのhead部セレクタh1の上にペーストしてください。face-color:の変更が顕著に現れます。いろいろ試してください。

◇リンク文字列のに色付けし斜体にする。◇
上を<h2>と</h2> で囲み<p>を記述。
画面上の下記をコピーして、ソースのhead部の<!-- のすぐ下にペーストしてください。

◇番号付きリスト「ol」「li」を使います。◇
上を<h2>と</h2> で囲んでください。
画面上端の３項目に設定します。

手順１．画面で下記をコピーして、ソースで１．２．３．とある１．の上にペーストします。
ソースで<li>３行の夫々に１，２，３、の番号を除いた文章のみをペーストし夫々</li> で閉じます。</ol>の後に<p>を記述。

１．「はっきりと理解しないでも、先ず大よそのイメージを掴んでから入る。」
２．２０秒でホ－ムページガ作れる（但しタイトルだけのホームページ）
３．ホームページは難しくない。・・・云々です。

手順２．画面で下記をコピーし、ソースのhead部の--> のすぐ上に、ペーストしてください。

◇index1.htmlにリンクを張る◇
上を<h2>と</h2> で囲み例のとおり<p>を記述。
リンクには　<a href="リンク先のフアイル名">画面上の内容</a>を使用します。
下記になります。画面をコピーして、ソースで</body>の上にペーストしてください。
<a href="index1.html">index1フアイルへリンク</a>
リンク文字列がオンマウスで斜体にそして背景色がつけばＯＫです。

ここでまた名前を付けて保存しましょう。「index3.html」にしてください。

保存した⇒「index3フアイル」が、このようになっていれば、此処まではＯＫです。次回は装飾を施します。