世の中にはいろいろな人が居て
みなそのとおりで決して難しいことではありません。
但し奥が深いことは事実ですが、とりあえず下記のことを実施すると
1.で言う「はっきりと理解しないでも、先ず大よそのイメージが掴む」ことができます。
始めのうちはあまり考えることもなく、指示どおり実行してみてください。だんだんに要領が分かってくると思います。
ここで作るホームページは「ご自分のパソコン内で、2〜3枚仕上げるだけです。2つ目はリンク実証用です。3っつ目のデザインで完成の予定です。
(1Pも3Pも同様な作業です。インターネトに載せるのはその先の話です。)
先ず「ホームページのトップにするフアイル」は必ず「 index.html 」とする決まりになっています。
注1)文字は将来に備えるためと、それに説明も簡単ですので「半角英数小文字」に統一します。
注2.出来上がった資料は保存すると「○○フアイル」と呼ばれます。この場合は「indexフアイル」になります。)
では1枚目の「index1.html」フアイル(1は後で削除)を作りますが、画像を挿入し、midiフアイルが有ればBGMも鳴らせたいので材料の
「サンプル画像フアイル1枚」と
「サンプルmidiフアイル1枚(BGM用)」を
予め用意して「My Documents」内の「My Musicフォルダー」に保存して置きます。
(大抵の方はここが空いていそうなので、たまたまそうしました。新規フォルダーの作れる方は、
フォルダー名「htmlstyle入門」を「My Dcuments」内に作ってください。)
手順
1.画像フアイル1枚 「My Music フォルダー」内に取り込みます。下記から1つで結構です。
方法1「My Pictures」の中にご自分が保存した画像のサイズの小さいもの(10〜40Kb位)
2.ペイントで何かに絵を書いて「 sample.jpg 」と名前を付けて「My Music フォルダー」内に保存。
3.Windowsが用意している画像を使用する。
Windows Meの場合は、マイコンピュータ→ローカルデスク(C)→Program→Common Files→MycrosoftSharedの中のClipartとStationeryに沢山のおなじみの画像が入っています、この中の一つを「右クリック」で「 My Music フォルダー」へドラッグ&ドロップしてメニューの「此処へコピーする」を選択してください。
以上は、html・スタイルシート以前の「パソコン学習の基礎的部分」です。
ここに書かれているソースの文字は「テキスト」形式で書かれています。
この「テキスト形式」は「文字色・文字サイズ・レイアウト情報のない単純な文字だけのデータ」
で異なるワープロソフトやパソコン同士でもデータのやりとりができるので「世界中で通用」します。
ソースをご覧下さい。<body>から下は body終了形の</body> html終了形の</html>の3っつのみです。(スタート時点ですが)改行タグの<br>はかなり多用しました。
画面をご覧ください。味も素っ気もないただのワープロ文です。
これを
1.「body部」では
2.「head部」では、スタイルシートを使用して簡単に大変身させ、また、編集します。
今回の変身目標は、ワードにある、B(太字)I(イタリック)U(下線)文字サイズ、
文字色、リストその他リンク、画像等を「h1」「p」「ul」の3要素を適宜配分して「セレクタ」と呼ばれる要素内で設定します。(但しリンク画像は直接設定)
以上が説明部分です。
これからが、本題に入ります。
先ず「htmlフアイル」を作ります。
方法は、メモ帳を開いて、このページの「ソース全文」をコピー&ペーストしてください。
メモ帳は(スタート→プログラム→アクセサリ→メモ帳)で開らけます。
このメモ帳を「名前を付けて保存」します。名前は index1.html で「My Music 」フォルダーに保存してください。今後、何かを設定した際「上書き保存」や「名前を付けて保存」しますが、index1.html をindex2.html、index3.htmlというように番号を上げて保存する場合もあります。
今度は今できた「index1.html」を開き、下の「 h1 」から13行目の「 } 」までを「1字1句漏らさず完全にコピー」して、
head 部の <!-- と -->の間にペーストします。(勿論手書きならなお結構です、理解力が数倍早くなります。若し邪魔なら/* */を含めその間も削除してください。)
大事なことは、
1.一つの「セレクタ」(ここでは「 h1 」)に対して上に「 { 」下に「 } 」の2つの括弧が必ずついていること、
2.一つの項目(属性と値で構成される)に「:」コロンと「;」セミコロンが必ず有ることです。
h1 { color: red; /*文字色赤色*/ font-size: 20pt; /*文字サイズ*/ font-family: MS 明朝; /*書体*/ text-align: center; /*テキスト中央*/ background-color: #fc9; /*領域色(背景色)*/ height: 37px; /*領域枠高さ*/ padding-top: 10px; /*領域枠と文字列の上の間隔*/ padding-bottom: 5px; /*領域枠と文字列の下の間隔*/ margin-left: 5px; /*領域枠の幅の設定で画面の端からの距離*/ border-size: 20px; /*枠線の幅*/ border-style: outset; /*領域枠の形式で、内容浮き出し感の立体感*/ }
「index1.html」のソースを開いて、<body>内の「◇あなたにもホームページは作れる◇」の左◇の前に<h1>を、右の◇の直後に</h1>を半角で記述してください。(お目当てのところ即ち「内容部分」をタグで囲むのです。)
その上で「必ず</h1>の後に<p>タグを、このページでは書くことにしましょう。」
その理由は、</h1>の後のようなブロックレベルタグが終了すると、新たな局面に入りますので、
何等かのタグ付けが必要になります。h1タグ以外でも同じことがいえます。
また、<p>タグ記述に限ったことではないのですが、説明の簡単化するため一応ここでは、そうします。
上書きで保存しますと「index1.html」で残ります。
2.と3.で何を行ったかと言いますと、もう既に「見出し h1 部分に就いて、11種のスタイルシーとを設定した」ことになります。 あとは左側の[ : ]コロンと[ ;] セミコロンの間にある、数値、カラー名等をあやつれば目に見えて変化します。
以上body以内で使用したタグは<h1> 1つのみですが、実はこのh1の「属性」と「値(数値や名称)」をいろいろ変えて半日位実証すると、タグにはテーブルのような「領域枠」があって、背景色、枠、枠形状、文字の左右上下位置、余白の取り方など基本的なことと「スタイルシートのイメージ」が掴めます。
属性と値の用語10個位は確実に身に付きますのでお薦めいたします。
(『用語に就いてはhead部「セレクタp」にあらかた載せてあります。また「スタイルシート入門から属性と値』」をご覧ください。)
私もこの枠のコントロールでヒントを得たお陰で、理解しにくかったスタイルシートにやっと入門を果たすことができたのです。1年半前に購入した入門書や最新html辞典が読めるようになったのです。)
参照:領域枠の形状等はスタイルシート入門からteble 編をご覧ください、しかも枠についてはテーブルを使わなくても同じことができることが分かります。ブロックッレベルタグと呼ばれるタグはみんなこの性質を持っているのです。)
注)/* */内は、スタイルシートのメモ書きで画面に表示されません。
画面上で、下記 p 以下全部をコピーしてから「ソースを開き」「 h1 」の最後の「 } 」の下に「ペースト」してください。随分ありますが、「h1」の/**/内のメモであらかた想像ができると思います。また、その都度解説いたします。
[p]で設定した主なものは、文字色color:#000090;文字左寄せtext-align:left; 斜体font-style:italic;太字font-weight: bold;文字サイズfont-size: 12pt; 書体font-family: MS 明朝;アンダーラインtext-decoration:underline;位です。後はノーマルとか未設定で空かせてあります。
「世の中にはいろいろな人がいて」の頭の「世」の前に<p>を記述してください。以上で
h1とpの2つの要素について一部ではありますが、スタイルシートを適用したことになります。下線がうるさいのでtext-decoration:underline;のunderline;をnone;にして上書きで保存します。「index1.html」で残ります。(このように、裏方の部分で操作編集をします。)
また、<p> タグは、現時点では終了形の </p> を省略できますので、そうします。というのは、途中に<hn> 、<div>、 <ol>などで「タグ付け」をした場合に自動的に解消され説明が易しいからです。近い将来には付けることになります。
もう一つ例えば、<p> は山括弧に挟まれているので明らかなタグですが、「p」タグと言ったり、head部では「p」セレクタと言ったりしますが、みな「p」要素にかかわることと理解してください。
6−1、head部「p」の斜体font-style:italic;と太字font-weight: bold;のitaricとboldをnoneにする。
(注)「:」と「;」は消さないで必ず残して置くこと。
6−2、◇1.、◇2.、◇3.、◇4.、◇5.、◇6.の夫々の文字列を<h1> と </h1> タグで挟んでください。
更に</h1>の後に(むしろ改行して下の方が一般的使用法)<p>タグを記述します。(新しい要素で始まることになります。)
後で「h2」に変更するする予定です。それまで「h1」にしておく。
6−3、◇6、内の「セレクタ」をブルーにします。「セ」の前に<span style="color:blue;">を、そして「タ」の後ろに </span> を書いてください。
6−4、利根町商工会ホームページにリンクをはります。
名前の左側に<a href="http://www5.ocn.ne.jp/~tones/">を、右側は</a>のタグでで挟みます。
6−5、下のp以下は御用すみです</body>
</html>を残して全部削除してください。、メモ帖を終了する際に「名前を付けて保存」を選択「 index2.html 」にしてください。
私のトップに戻って体験2に「index2.html」が載っています。この形になっていれば、以上のこと全部終了です。
次から「index2.html」に追記します。この辺で水平線を引きます。
<hr>を記述してください。これでOKです。長さの設定もできますが後にします。
以下の文字に何の変化もありません。そこで、ソースを開いて「見出しの5.◇・・・の後半の
「また、〜から近い将来には付けることになります。」の両端を <div> と </div> で囲み、</div>の後または改行して<p>を記述してください。
その上で、画面上から下記 「 div 〜 } 」をコピーして、また、ソースを開いてhead部の「p」の最後の「 } 」の次にペーストしてください。「div」の文字色を赤色に、フォントサイズを10ptに、書体(font-family:)をMS 明朝に,、背景色をpと同じに設定しました。これを読むと原因がわかります。
div { color: #ff0000; font-size: 10pt; font-family: MS 明朝; text-align: left;
background-color: #fffff6; }
お分かりになりましたら、上の見出し◇1.・・から下の◇6.・・の6箇所の </h1> すぐ下に <p> が有る事を確認してください。
また、見出し◇7と◇8は<h1>と</h1>で挟んでありませんので「◇7.要素・・・◇」を挟みまた、「◇8.今までの主な点の整理◇」を挟んだ上、その」の次に<p>を記述してください。
それでなんとなく形が整い読み易くなるはずです。
ソースを開いたり画面上からとか、忙しいですが、要領が分かればソースだけの記述で全部できます。
そのために、「p」のところに、40〜50個の「記入のためのキーワード」を書いて置いたのです。
この中から適当な設定項目を拾い出し、「新しいセレクタ(例えば今回の div がそれです。)」に貼り付け「値」を記述すれば済むことです。
これだけあれば大抵のことはできます。使いなれるよういろいろ試すことが肝心です。
「値については、私のホームページ→スタイル入門→要素と属性一覧→および値」を参照ねがいます。
8−1.上のdivで説明いたします。div はhtml構造上のhead部では「セレクタ」と呼ばれる「要素名」で 丸裸で記述します。
8−2.一種類の「セレクタ」に1つか複数の何かを設定する場合には必ず開始括弧「{」と終了括弧「}」
を使い、その中に、「属性:」半角スペース「値;」の形で記述することで「スタイル」が設定せきるのです。
書き方は、横一列並びでも縦並びでもさしつかえありません。スペースは付けても付け忘れても大丈夫です。(ただし、全角スペースは駄目で半角スペース使用なら障害はありません。その原因は半角スペースならいくら使って幅を広げても最初の1つしか認識しないから平気なのです。それで、上のdivのように自由に並べられるのです。)
8−3.<span> タグについて。或る局部的箇所「内容と言います。」に、何かを設定したい時に何処にでも自由に何回でも使用でき、便利です。
上の例では、<h1> タグの中に使って青字にしました。この場合はブロックレベルタグのh1の中での使用です。pタグやdivタグその他ブロックレベルタグの(参照:上記案内の要素と属性一覧)中で使用するのが正しいっ使用法です。なぜなら、これから、学習する内に分かることですが、画像のimgやspanはインライン要素と言われ、必ずブロックレベル要素の中で使用されなければならない規則があるからです。
8−4.「body」内でのスタイルを用いたhtml記述では、
<要素 style=”属性:値;"> 内容 </要素>
の形になり、属性:値;は何種類並べてもOKです。この形式と青文字のところのソースを比較してください。同じ形のはずです。
上書き保存してください。続きます。今度はデザインで完成させます。
上書き保存されたフアイルのindex2.htmlが、このように見えればOKです。この先の操作もそんなに難しくはありませんので急行します。スタイルシートならではの早業です。
◇各種のスタイル設定です。◇
また、ラインを引きます。
○ラインを引く○
ソースを開いて body 内の「また、ラインを引きます。」の下に <hr> タグを書きます。
また、head 内に hr セレクタを設けます。方法は画面上から
hr {background-color: green; width:80%; height:5px;}
をコピー、 --> の上にペーストします。先に引いたラインにも影響し同様に変わります
この場合は、山括弧もダブルコーテーションも無いので、ソースからでも、画面上からのどちらでも同じことになります。これが「実体参照」の問題なのです。
見出しを整理します。
タイトルの見出しを
h1 { color: red; /*文字色赤色*/ font-size: 20pt; /*文字サイズ*/ font-family: MS 明朝; /*書体*/ text-align: center; /*テキスト中央*/ background-color: #fc9; /*領域色(背景色)*/ height: 37px; /*領域枠高さ*/ padding-top: 10px; /*領域枠と文字列の上の間隔*/ padding-bottom: 5px; /*領域枠と文字列の下の間隔*/ margin-left: 5px; /*領域枠の幅の設定で画面の端からの距離*/ border-width: 5px; /*枠線の幅*/ border-style: outset; /*領域枠の形式で、内容浮き出し感の立体感*/ }
に設定しました。そこで、
1.今までの <h1> を全部<h2> に直してください。終了形も</h2>に、そうして、
2.head部のセレクタh1関係{ }を含めてコピーしてすぐ下にペースト。
3.そのh1をh2に改めます。h2の内容はh1よりひと回り小さいものにし、色も替えます。
color:green; font-size:17pt; height: 30px; background-color: #cccc00; text-align:left;にして
次に、枠表示の属性関係2項目border-size: 20px;と border-style: outset;は削除します。
◇超簡単!スタイルシート1日体験◇をh1タグ終了タグ共に<body>のすぐ下へ書き換え移動してください。「に設定しました。そこで、」は不要になりました。削除して、編集に置き換えます。
の両端をh2タグと同終了タグで囲み、<p>を記述。
画面から下記をコピーし、ソースのhead部セレクタh1の上にペーストしてください。face-color:の変更が顕著に現れます。いろいろ試してください。
BODY { /*スクロールバー色の設定はbodyで行います*/ scrollbar-face-color: yellow; /*▼と▲印ボタン部及びバー表面の色設定*/ scrollbar-arrow-color: red; /*上下の矢印の▲と▼の色設定*/ scrollbar-highlight-color: #cff; /*ボタンとバーの外枠内側の上と左の色設定*/ scrollbar-shadow-color: blue; /*ボタンとバーの外枠内側の右と下の色設定*/ scrollbar-3dlight-color: blue; /*ボタンとバーの外枠外側の上と左の色設定*/ scrollbar-darkshadow-color: white; /*ボタンとバーの外枠外側の右と下の色設定*/ scrollbar-bace-color: white; /*全体を同色に設定。単独使用で単純明快です*/ margin-bottom: 10pt; /*テキストのセンタリングとマージンです*/ background-color: white; /*body全体の背景色は白色です*/ }
上を<h2>と</h2> で囲み<p>を記述。
画面上の下記をコピーして、ソースのhead部の<!-- のすぐ下にペーストしてください。
a:link { color: #00f; text-decoration: none; } /*未リンク状態の文字色*/ a:visited { color: #00f; text-decoration: none; } /*既にリンク済みの文字色*/ a:active { COLOR: #f0f; font-style: italic; } /*リンク最中の文字色と斜体*/ a:hover {background: #0f0; color: #f00; /*オンマウスで背景色緑色、赤文字*/ text-decoration: underline; font-style: oblique; } /*オンマウスの際斜体で下線が表*/
上を<h2>と</h2> で囲み<p>を記述。
画面上端の3項目に設定します。
手順1.画面で下記をコピーして、ソースで1.2.3.とある1.の上にペーストします。
ソースで<li>3行の夫々に1,2,3、の番号を除いた文章のみをペーストし、夫々を</li> で閉じます。</ol>の後に例のとおり<p>を記述し、旧文章は削除してください。
そうしないと2重表示になります。
原稿が全角の数字でしたが、半角の数字で表示されました。
●リストタグの種類と性質
このページでは <ol>(箇条書き:通し番号有り)の1つを使用しましたが、他に <ul> (箇条書き:通し番号でなくマーク表示)タグも有ります。また、<dl> という「定義語(辞書風見出しの使い方をします。)」例えば、<ol>リストの中に<dl>リストを入れて更に細分したリスト表示もできます。すると「字下げで表示」されます。このような使い方を「入れ子」と言います。(字下げ幅はpadding 属性で自由に調整します。)
<ol> <li></li> <li></li> <li></li> </ol>
1.「はっきりと理解しないでも、先ず大よそのイメージを掴んでから入る。」
2.20秒でホ−ムページガ作れる(但しタイトルだけのホームページ)
3.ホームページは難しくない。・・・云々です。
手順2.画面で下記をコピーし、ソースのhead部の--> のすぐ上に、ペーストしてください。
ol { color: #000090; font-size: 12pt; font-family: MS 明朝; text-align:left; background-color: #fffff6; }
上を<h2>と</h2> で囲んでください。
リンクには <a href="リンク先のフアイル名">画面上の内容</a>を使用します。
下記になります。画面をコピーして、ソースで</body>の上にペーストしてください。
<a href="index1.html">index1フアイルへリンク</a>
ここでまた名前を付けて保存しましょう。「index3.html」にしてください。
また、
index3フアイルを加工し再整形した上、部分的に背景画像、BGM 、画像と縦書き等を配置した「index4」を作りました。
その経過内容を下段に書きました。今度は今までと違いソース上操作になります。お読みください。
これで一応完成ですが、もう少し書き足すとか訂正をしたいと思っています。
トップへ戻る
スタイルシート目次へ戻る
index1フアイルへリンク
index2フアイルへリンク
index4フアイルへリンク