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

この第４ページでは、沢山の枠を使用していますが、テーブルは一切使用していません。w3cとか諸大家がテーブルを使用しなくてもスタイルシートで表現ができるようなことを言ってます。また、テーブルはフアイルガ重くなるとも言われていますので、使用しませんでした。

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

パラオ島民芸品

写真は第２次世界大戦の激戦地として名高いパラオ諸島の民芸品です。
左から２、３人が当時の兵隊さんのようです。

パラオ諸島は、「パラオ松島」と称される程風光明美なところです。
ダイビングのポイントとして観光化されていました


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

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

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

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

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

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

手順

  1. １．画像フアイル１枚 「My Music フォルダー」内に取り込みます。下記から１つで結構です。
    方法１「My Pictures」の中にご自分が保存した画像のサイズの小さいもの（１０〜４０Kb位）
  2. ２．ペイントで何かに絵を書いて「 sample.jpg 」と名前を付けて「My Music フォルダー」内に保存。
  3. ３．Windowsが用意している画像を使用する。

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

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

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

画面をご覧ください。味も素っ気もないただのワープロ文です。
これを
１．「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: ＭＳ 明朝; 　　　　 /*書体*/
         background-color: #fc9; 　　　　 /*領域色（背景色）*/
         text-align: center;　　　　　　　/*テキスト中央*/
         height: 37px;　　　　　　　　　　/*領域枠高さ*/
         padding-top: 10px; 　　　　　　　/*領域枠と文字列の上の間隔*/
         padding-bottom: 5px; 　　　　　　/*領域枠と文字列の下の間隔*/
         margin-left: 5px; 　　　　　　　 /*領域枠の幅の設定で画面の端からの距離*/
         border-width: 15px; 　　　　　　 /*枠線の幅*/
         border-style: outset; 　　　　　 /*領域枠の形式で、内容浮き出し感の立体感*/ 
　　　 }

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

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

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

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

以上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」要素にかかわることと理解してください。

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

  1. head部「p」の斜体 font-style:italic; の italic を none に、太字 font-weight: bold; の bold を none にしてください。
    （注）「：」と「；」は消さないで必ず残して置くこと。
  2. ◇１．、◇２．、◇３．、◇４．、◇５．、◇６．の夫々の文字列を<h1> と </h1> タグで挟んでください。
    更に</h1>の後に（むしろ改行して下の方が一般的使用法）<p>タグを記述します。（新しい要素で始まることになります。）
    後で「h2」に変更するする予定です。それまで「h1」にしておく。
  3. ◇６、内の「セレクタ」文字をブルーにします。「セ」の前に<span style="color:blue;">を、そして「タ」の後ろに </span> を書いてください。
  4. 利根町商工会ホームページにリンクをはります。

    名前の左側に<a href="http://www5.ocn.ne.jp/~tones/">を、右側は</a>のタグでで挟みます。
  5. 下のｐ以下は御用すみです</body> </html>を残して全部削除してください。、メモ帖を終了する際に「名前を付けて保存」を選択「 index2.html 」にしてください。

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

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

◇７．要素 「div 」の使用。（殆ど「p」と同様だが上下空白なし）◇

以下の文字に何の変化もありません。そこで、ソースを開いて「見出しの５．◇・・・の後半の
「また、〜から近い将来には付けることになります。」の両端を <div> と </div> で囲み、</div>の後または改行して<p>を記述してください。

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

  div {
　　　color: #ff0000;
　　　font-size: 10pt;
　　　font-family: ＭＳ 明朝;
　　　text-align: left;
　　　background-color: #fffff6;
　　 }

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

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

◇８．今までの主な点の整理◇

  1. 上のdivで説明いたします。div はhtml構造上のhead部では「セレクタ」と呼ばれる「要素名」で 丸裸で記述します。
  2. 一種類の「セレクタ」に１つか複数の何かを設定する場合には必ず開始括弧「{」と終了括弧「}」 を使い、その中に、「属性：」半角スペース「値；」の形で記述することで「スタイル」が設定せきるのです。

    書き方は、横一列並びでも縦並びでもさしつかえありません。スペースは付けても付け忘れても大丈夫です。（ただし、全角スペースは駄目で半角スペース使用なら障害はありません。その原因は半角スペースならいくら使って幅を広げても最初の１つしか認識しないから平気なのです。それで、上のdivのように自由に並べられるのです。）
  3. <span> タグについて。或る局部的箇所「内容と言います。」に、何かを設定したい時に何処にでも自由に何回でも使用でき、便利です。

    上の例では、<h1> タグの中に使って青字にしました。この場合はブロックレベルタグのh1の中での使用です。ｐタグやdivタグその他ブロックレベルタグの（参照：上記案内の要素と属性一覧）中で使用するのが正しいっ使用法です。なぜなら、これから、学習する内に分かることですが、画像のimgやspanはインライン要素と言われ、必ずブロックレベル要素の中で使用されなければならない規則があるからです。
  4. 「body」内でのスタイルを用いたhtml記述では、
    <要素 style＝”属性：値；">　内容　</要素>
    の形になり、属性：値；は何種類並べてもＯＫです。この形式と青文字のところのソースを比較してください。同じ形のはずです。
    上書き保存してください。続きます。今度はデザインで完成させます。

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

◇各種のスタイル設定です。◇
また、ラインを引きます。

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

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

見出しを整理します。
タイトルの見出しを 

  h1 {
      color: red;　　　　　　　　　　　/*文字色赤色*/
      font-size: 20pt; 　　　　　　　　/*文字サイズ*/
      font-family: ＭＳ 明朝;　　　　　/*書体*/
      background-color: #fc9;　　　　　/*領域色（背景色）*/
      text-align: center;　　　　　　　/*テキスト中央*/
      height: 37px;　　　　　　　　　　/*領域枠高さ*/
      padding-top: 10px; 　　　　　　　/*領域枠と文字列の上の間隔*/
      padding-bottom: 5px; 　　　　　　/*領域枠と文字列の下の間隔*/
      margin-left: 5px;　　　　　　　　/*領域枠の幅の設定で画面の端からの距離*/
      border-size: 20px; 　　　　　　　/*枠線の幅*/
      border-style: outset;　　　　　　/*領域枠の形式で、内容浮き出し感の立体感*/
     }

に設定しました。そこで、
１．今までの <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:の変更が顕著に現れます。いろいろ試してください。 

　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; } /*オンマウスの際斜体で下線が表*/

◇番号付きリスト「ol」「li」を使います。◇

上を<h2>と</h2> で囲み<p>を記述。
画面上端の３項目に設定します。

手順１．画面で下記をコピーして、ソースで１．２．３．とある１．の上にペーストします。
ソースで<li>３行の夫々に１，２，３、の番号を除いた文章のみをペーストし、夫々を</li> で閉じます。</ol>の後に例のとおり<p>を記述し、旧文章は削除してください。
そうしないと２重表示になります。
原稿が全角の数字でしたが、半角の数字で表示されました。

●リストタグの種類と性質
このページでは <ol>（箇条書き:通し番号有り）の１つを使用しましたが、他に <ul> （箇条書き:通し番号でなくマーク表示）タグも有ります。また、<dl> という「定義語（辞書風見出しの使い方をします。）」例えば、<ol>リストの中に<dl>リストを入れて更に細分したリスト表示もできます。すると「字下げで表示」されます。このような使い方を「入れ子」と言います。（字下げ幅はpadding 属性で自由に調整します。） 

      <ol>
      <li></li>
      <li></li>
      <li></li>
      </ol>

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

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

　ol {
　　　color: #000090;
　　　font-size: 12pt;
　　　font-family: ＭＳ 明朝;
　　　text-align:left;
　　　background-color: #fffff6;
　　 }

◇index1.htmlとindex1.htm2にリンクを張る◇

上を<h2>と</h2> で囲んでください。
リンクには　<a href="リンク先のフアイル名">画面上の内容</a>を使用します。

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

index3.htmlからindex4.htmlに移る、経過の説明

index3 までは、画面表示したものをソースにペーストする方法で、ソースを編集してきました。 もう、ここまでくればソースに直接記述も読み方も分かってきたのではないでしょうか。 そのほうが説明も単純になります。では下記順でソースを確かめてください。

  1. 先に習いました、リスト（箇条書き）の <ol> は編集の都合で<ul>に直し、この場の <ol> は <ul> の中に入れ、所謂「入れ子」にしました。

  2. リストの <ul> は「通し番号でなく３種類のマーク」が用意されています。
    その内の「小さい○」を使いました。ul セレクタに ul {list-style-type: circle;} を記述しました。

  3. ページ全体の色むらを取り除くためセレクタ「body」に属性 background-color: #fffff6; を記述しました。カラーcolor: #fffff6; は各セレクタに使用していましたが「body」に設定することで子要素である「p」「div」「ol」「ul」「dl」（diは此処で初めて使用）には記述する必要がなくなりました。

    「body」は「html」「head」等を除いて殆どの要素の親になっています。他の要素の場合でも「要素の親子関係」が成立している場合にはこのように親要素の「属性値」が子要素に「継承」されますので記述の必要はなくなります。

    また、上と同様、属性が各セレクタ共通の場合は、各セレクタを「,」カンマで区切って並べ一括して「属性、値」を与えることができます。下記のように 文字色 color:#000090; 、文字サイズ font-size:12pt; 、書体 font-family: ＭＳ 明朝;についても同様ですので纏めました。
  4. １．文字色の共通するタグに「p」「div」「ol」「ul」「dl」があります。
    ２．文字サイズの共通するタグに「p」「ol」「ul」「dl」があります。
    ３．書体の共通するタグに「p」「div」「ol」「ul」「dl」があります
    １．は p,div,ol,ul,dl { color:#000090; }に
    ２．は p,ol,ul,dl { font-size:12pt; }に
    ３．は p,div,ol,ul,dl { font-family: ＭＳ 明朝; }
    のようにして「head部」に記述しました。


  5. 左右の余白をとるためにpadding-left: 15px; と padding-right: 15px;「全部のタグ（ここではセレクタですが目的は同じです。）」を設定しました


  6. 最初の見出し <h1> タグの背景色がそぐわないので h1 {background-color: olive;} に換えました。


  7. 各タグに細い線 border-width:2px; で、枠 border-style: ridge; を付けました。


  8. その枠線の繋がりが切れて汚いので「 <div> タグでの赤文字表示」を <p> タグ内で処理するため <span>タグに切り替え、枠線を一本化しました。


  9. 上３番目の変更にはもう一つ<div>タグを画像挿入欄に使用したい狙いもあったのです。 そして画像を<div>タグ内右側に挿入しました。
    <div> タグに直接 <div><img src="periryu1.jpg" alt="パラオ島民芸品" align="right"> と記述しました。
    alt="パラオ島民芸品"は画像を表示できない環境の人に対する配慮で、画像を説明しています。

  10. 画像の位置を右か左に指定すると、その反対側に文字列を記入することができるのです。そこで、縦書きを入れてみました。セレクタ「div」の最後の所に writing-mode: tb-rl;を記述し縦書きを設定しました。


  11. 画像の上下、右側がくっつき過ぎていたので、４方に margin-left: 10px;margin-right: 10px; margin-top:10px; margin-bottom: 10px; の余白をつけました。


  12. windowsが用意する背景画像をマイコンピュータ→ローカルデスク（C）→Program→Common Files→MycrosoftSharedの中のStationeryからコピーして一部分の<p>タグの中に使用しました。
    記述は background-image: url("haikei.jpg") です。元の画像は５〜６Cm角の小さいものですが、
    それを、background-repeat: repeat; と記述して全面にリピートさせています。[p]セレクタをご覧ください。
  13. ＢＧＭを入れました。ただし、普通には、<body bgsound ･･･形式なのですが、<p><embed src="divina.mid"" ･･･の形でいれました。というのは、bgsound ･･･形式はＩＥの独自タグなので非推奨タグです。embed 方式は通常,プラグインによって操作盤が表示されます。こではその操作盤の大きさを 0 にして、隠しました。タグ全文は budy タグ下４行目をご覧ください。なお、詳しくは「スタイルシト入門のスタイル設定シリーズ 7「続・復習「フアイル作り」から「スタイル設定」まで」に載せてあります。


  14. 最後の位置関係の微調整で「属性padding margin の「４辺の何処か」とか「値」を換えたりしました。


  15. サムネイル写真にリンクを張る。方法は下記のとおりです。
    <a href="../takasebune.htm"><img src="../fune21.jpg"></a>

一寸複雑なので解説いたします。<img>タグは「インランタグ」であることを頭に入れておいてください。そうして、ブロックレベルタグの中で使用する決まりになっているのです。

リンクの形式は、<a href="フアイル名"> だけ「内容」も「終了」タグもありません。
先ずリンクの指定で、<a href="../takasebune.htm" とします。

「 ../ 」はフアイルの保存場所が1つ上のホルダーに有るということです。（ここの場合htmlフアイルから更に呼び出す形にしてあります。）

上だけではtakasebune.htmにリンクするだけでサムネイル画像とは無関係です。
文字列にリンクを張る場合を考えてみてください。WEBページ作成ソフトの場合では、必ず何文字かを選択して反転させてからハイパーリンクの設定をします。この選択に当たるのが「画像フアイル名」なのです。
それを、このように記述しているのです。「 img src="../fune21.jpg 」でこれも、1つ上のホルダーに保存してありました。最後は</a>です。
ということで、下の絵が表示されました。（画像も1つの文字の大きいものと考えると分かり易いのではないでしょうか。）
  • 行間隔の調整 私はデフォルトされた文字間隔があまり好きではありせんので140％に広げています。
    簡単です。head部にたった1っ行 p,div,ol,ul,dl ｛line-height: 150%; }を加えただけです。セレクタ「h1」の上をご覧ください。

    • スタイルシート１日体験終了にあたって

    一応完了としますが、なお読みにくい、説明がわかりにくい等の訂正や、追補等を致します。
    ご来訪ありがとうございました。

    トップへ戻る     スタイルシート目次へ戻る
    index1フアイルへ   index2フアイルへ   index3フアイルへ

    inserted by FC2 system