• 検索結果がありません。

<h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています どうぞご覧ください ホームページ作成初心者ですが <br> よろしくお願いします <br> 拙い文章ですが <br> その点もよろしくお

N/A
N/A
Protected

Academic year: 2021

シェア "<h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています どうぞご覧ください ホームページ作成初心者ですが <br> よろしくお願いします <br> 拙い文章ですが <br> その点もよろしくお"

Copied!
30
0
0

読み込み中.... (全文を見る)

全文

(1)

HTML/CSS 入門テキスト

作成:武本健一 改定:05.11.13 【1】HTML の基本 (1) 基本タグ renshu1.html <html> <head> <title>悠々シニアライフのトップページ</title> </head> <body> 悠々シニアライフ </body> </html> (2) 見出し renshu2.html <html> <head> <title>悠々シニアライフのトップページ</title> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <h3>悠々シニアライフ</h3> <h4>悠々シニアライフのページへようこそ!</h4> <h5>悠々シニアライフ</h5> <h6>悠々シニアライフのページへようこそ!</h6> </body> </html> (3) 段落 renshu3.html <html> <head> <title>悠々シニアライフのトップページ</title> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。 </p> どうぞご覧ください。 </body> </html> (4) 改行 renshu4.html <html> <head> <title>悠々シニアライフのトップページ</title>

(2)

</head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。どうぞご覧ください。 </p> ホームページ作成初心者ですが、<br> よろしくお願いします。<br> 拙い文章ですが、<br> その点もよろしくお願いします。 </body> </html> (5) 文字列の修飾 renshu5.html 強調: <strong>悠々シニアライフのページへようこそ!</strong> 強調(斜体): <em>悠々シニアライフのページへようこそ!</em> 太字: <b>悠々シニアライフのページへようこそ!</b> 斜体: <i>悠々シニアライフのページへようこそ!</i> 下線: <u>悠々シニアライフのページへようこそ!</u> 取り消し線: <s>悠々シニアライフのページへようこそ!</s> (6)上付き文字・下付き文字 renshu6.html その土地は実に6000Km<sup>2</sup>もあるのです。<br> 過酸化水素水はH<sub>2</sub>O<sub>2</sub>です。 (6) ルビ renshu7.html <ruby> <rb>悠々</rb> <rp>(</rp> <rt>ゆうゆう</rt> <rp>)</rp> </ruby> (7) 特殊文字の例 &lt;(&#60;) < &gt;(&##62;) > &quot;(&#34;) “ &amp;(&#38;) & &copy;(&#169;) ○C - - - &lt;html&gt;<br> &lt;head&gt;<br> &lt;title&gt; 悠々シニアライフのトップページ&lt;/title&gt;<br> &lt;/head&gt;<br> &lt;body&gt;<br> &lt;/html&gt;

(3)

(8) コメント renshu8.html <html> <head> <title>悠々シニアライフのトップページ</title> </head> <body> <h1>悠々シニアライフ</h1><!--ここにタイトル1が入る--> <h2>悠々シニアライフのページへようこそ!</h2><!--ここにタイトル2が入る--> <p> <!--以下本文が入る--> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。どうぞご覧ください。 </p> ホームページ作成初心者ですが、よろしくお願いします。<br> 拙い文章ですが、その点もよろしくお願いします。 </body> </html> 【2】スタイルシート (1)スタイルシートの基本 ・文書の構成要素の意味や役割を表す: HTML ・構成要素を具体的にどのように表示させるか: スタイルシート(CSS CascadingStyleSheet) HTML と CSS の役割分担 従来のHTML から表示に関する指定を取り除きシンプル化 HTML では不可能な多くの表現を可能化 ・ 書式 セレクタ { プロパティ: 値 } (2)スタイルシートの記述方式 [1]<head>と</head>の間に記述する。 例a. renshu9.html <head> <title>悠々シニアライフのトップページ</title> <style type=”text/css”> h1_{_font-size:_32pt;_color;_#555599;_} _は半角スペース </style> </head> <body> <h1>悠々シニアライフ</h1> 例b. renshu10.html <head> <title>悠々シニアライフのトップページ</title> <style type="text/css">

p.red { color: red; } p.blue { color: blue; } </style>

(4)

</head> <body> <p class="red">趣味の写真や旅行記などを楽しみながらホームページにまとめています。</p> <p class="blue">趣味の写真や旅行記などを楽しみながらホームページにまとめています。</p> 例c. rensh11.html <head> <title>悠々シニアライフのトップページ</title> <style type="text/css"> p { color: blue; } span.red { color: red; } span.green { color: green; } </style>

</head> <body>

<p>

<span class="red">趣味の写真や旅行記</span> などを楽しみながらホームページにまとめています。

<span class="green">どうぞごゆっくり</span>ご覧ください。 </p>

色指定 #000000 ~ #ffffff

文字列で指定 HTML4.01 で指定16色 white yellow fuchsia red silver gray olive purple maroon green blue navy black その他ブラウザで文字列指定 140 色あり

[2]style 属性を使う renshu12.html タグにstyle 属性を記述し、特定の部分にスタイルを指定する。 例 <head> <title>悠々シニアライフのトップページ</title> <style type="text/css"> p { color: #555599; } </style> </head> <body> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。 <span style="color: #ff000">どうぞごゆっくり</span>ご覧ください。 </p>

[3]外部スタイルシートを使う

スタイルシートを別のファイルにし共通に使う

例 kyotu.css

body { background-color: #ffffff; color:green; } span.red { color: red; }

(5)

span.yellow { color: yellow; } ・ ・ ・ というような定義部分だけを例えば kyotu.css というファイルにしておく。 renshu13.html <html> <head.><title>*</title>

<link rel=stylesheet href="kyotu.css" type="text/css"> </head>

<body>

<span class="red">趣味の写真や旅行記</span> などを楽しみながらホームページにまとめています。 <span class="yellow">どうぞごゆっくり</span>ご覧ください。 </body> </html> (3)その他 ・複数のセレクタに1つのプロパティを設定するには h1, p { font-size:12pt; color: red; }

のように「, (カンマ)」で区切る。 ・ 見やすい書き方 h1 { font-size: 24pt; color: #ffffff; text-family: “MS 明朝”,serif; text-align: center; }

・ p.red { color: red; } や span.red { color: red; } などのタグ名を省略した形、 .red 「 .クラス名」とした場 合は、全てのタグにこのクラスが適用される。

【3】タグやセレクタの使い方

(1)背景色と文字色 body { background-color: #000000; color: #ffffff; }

renshu14.html <html>

<head><title>*</title>

<style type="text/css">

body { background-color: #000000; color: #ffffff; } </style>

</head> <body>

<p>

(6)

どうぞごゆっくりご覧ください。 </p> </body> </html> [CSS を使わない記述] renshu14-2.html <html> <head><title>*</title> </head>

<body bgcolor="#000000" text="#ffffff" > <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。 どうぞごゆっくりご覧ください。 </p> </body> </html> (2)文字の大きさ、文字の色 セレクター{ font-size: サイズ; color: 色; } renshu15.html <html> <head><title>*</title> <style type="text/css">

body { background-color: #000000; color: #ffffff; font-size:12pt; } h1 { font-size: 32pt; color:yellow; } </style> </head> <body> <h1>悠々シニアライフ</h1> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。 どうぞごゆっくりご覧ください。 </p> </body> </html> [CSS を使わない記述] renshu15-2.html <html> <head><title>*</title> </head>

<body bgcolor="#000000" text="#ffffff" >

<h1><font color="yellow">悠々のシニアライフ</font></h1> <p> <font size=”3”>趣味の写真や旅行記などを楽しみながらホームページにまとめています。 どうぞごゆっくりご覧ください。</font> </p> </body> </html>

(7)

(3)フォントの種類 セレクタ { font-family: “フォント名”,キーワード; }

renshu16.html <html>

<head><title>*</title>

<style type="text/css">

body { background-color: #000000; color: #ffffff; font-size:12pt; font-family: "MS ゴシック ",sans-serif; }

h1 { font-size: 32pt; color:yellow; font-family: "MS 明朝",serif; } </style> </head> <body> <h1>悠々シニアライフ</h1> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。どうぞごゆっくりご 覧ください。 </p> </body> </html> [CSS を使わない記述] renshu16-2.html <html> <head><title>*</title> </head>

<body bgcolor="#000000" text="#ffffff" >

<h1><font color="yellow" face="MS 明朝",serif”>悠々のシニアライフ</font></h1> <p>

<font size="3" face="MS ゴシック,san-serif">趣味の写真や旅行記などを楽しみながらホーム

ページにまとめています。どうぞごゆっくりご覧ください。</font>

</p> </body> </html>

キーワード 分類 フォント名

serif 明朝系 MS 明朝、細明朝体、Garmond、MS Gergia、

Times New Roman

sans-serif ゴシック系 MS ゴシック、中ゴシック、平成ゴシック、

Helvetica、Arial、Verdana

cursive 筆記体・続け文字系 caflisch script、ex ponto

fantasy 飾り文字系 critter、studz

monospace 等幅フォント courier、Courier New、Osaka-等幅

(4)表示位置 セレクタ { text-align: 位置; }

renshu17.html <html>

(8)

<head><title>*</title>

<style type="text/css">

body { background-color: #000000; color: #ffffff; font-size:12pt; } h1 { font-size: 32pt; color:yellow; text-align: center; }

h2 { font-size: 24pt; color:blue; text-align: center; } </style> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> どうぞごゆっくりご覧ください。 </p> </body> </html> [CSS を使わない記述] renshu17-2.html <html> <head><title>*</title> </head>

<body bgcolor="#000000" text="#ffffff" > <center>

<h1><font color="yellow" >悠々シニアライフ</font></h1>

<h2><font color="blue">悠々シニアライフのページへようこそ!</font></h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br>どうぞごゆっく りご覧ください。 </p> </center> </body> </html> (5)文字の装飾 セレクタ { text-decoration: 装飾; } renshu18.html <html> <head><title>*</title> <style type="text/css">

body { background-color: #000000; color: #ffffff; font-size:12pt; text-align: center; } h1 { font-size: 32pt; color:yellow; text-decoration: underline overline; }

h2 { font-size: 24pt; color:blue; text-decoration:line-through; } </style>

</head> <body>

<h1>悠々シニアライフ</h1>

(9)

<p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> どうぞごゆっくりご覧ください。 </p> </body> </html> (6)行の高さ セレクタ { line-height: 行の高さ; } renshu19.html <html> <head><title>*</title> <style type="text/css">

body { background-color: #000000; color: #ffffff; font-size:12pt; text-align: center; } h1 { font-size: 32pt; color:yellow; text-decoration: underline overline; }

h2 { font-size: 24pt; color:blue; } p {line-height:300%; } </style> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> まだ拙い内容ですが、よろしかったら、<br> どうぞごゆっくりご覧ください。 </p> ホームページ開設したばかりで、未熟なホームページです。<br> まだ載せる内容は少ないですが、努力して更新していきますのでよろしくお願いします。 </body> </html> 行の高さの表示 ・ 数値 1.5 とすれば、行間はフォントの1.5倍 ・ px や mm 指定でもよい。 ・ % 300%とすれば、行間はフォントの 3.0 倍 【4】画像を使用する

(1) 画像を画像を壁紙にする body { background-image: url(ファイル名); }

renshu20.html <html> <head><title>*</title> <style type="text/css"> body { background-image: url(background1.gif); color: #ffffff; font-size:12pt; text-align: center;

(10)

} h1 {

font-size: 32pt; color:yellow;

text-decoration: underline overline; } h2 { font-size: 24pt; color:blue; } </style> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> まだ拙い内容ですが、よろしかったら、<br> どうぞごゆっくりご覧ください。 </p> ホームページ開設したばかりで、未熟なホームページです。<br> まだ載せる内容は少ないですが、努力して更新していきますのでよろしくお願いします。 </body> </html> (2) background のプロパティ ・画像を1回だけ出す場合 background-repeat: no-repeat

・画像の位置を指定できる background-position: top bottom left right center

但し、no-repeat の場合のみ renshu21.html <html> <head><title>*</title> <style type="text/css"> body { background-image: url(background2.gif); background-repeat: no-repeat; background-position: center; background-position: top; color: #000000; font-size:12pt; text-align: center; } h1 {

font-size: 32pt; color: green;

text-decoration: underline overline; }

h2 { font-size: 24pt; color:blue;

} </style>

(11)

</head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> <strong> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> まだ拙い内容ですが、よろしかったら、<br> どうぞごゆっくりご覧ください。 </p> ホームページ開設したばかりで、未熟なホームページです。<br> まだ載せる内容は少ないですが、努力して更新していきますのでよろしくお願いします。 </strong> </body> </html>

(3)画像の表示 <img src="ファイル名" width="画像の幅" height="画像の高さ">

renshu22.html <html> <head> <title>*</title> </head> <body>

<img src="hp01.jpg" width="400" height="300" alt="信州・飯綱山"> </body>

</html>

width,height を省略すれば画像の幅・高さになる。

(4)画像の枠 img { border-style: 枠のスタイル; border-width: 枠の太さ; border-color: 色; }

スタイル: none hidden solid double groove ridge inset outset dashed dotted renshu23.html

<html>

<head>

<title>*</title>

<style type="text/css">

body { background-color: blue; text-align: center; }

img { border-style: groove; border-width: 30px; border-color: olive; } </style>

</head> <body>

<img src="hp01.jpg" width="400" height="300" alt="信州・飯綱山"> </body>

(12)

(5)画像と文字の関係

縦位置 img { vertical-align: 位置; } 位置: top, middle

回り込み img { float: 位置; } 位置: left, right

回り込み解除 <br clear="位置"> 位置: left, right, all

画像周囲の余白 img {margin: 余白; } 余白: ピクセル % renshu24.html <html> <head> <title>*</title> <style type="text/css"> body { background-color: #ffffff; } img { vertical-align: middle; } </style> </head> <body> <img src="hp01.jpg" alt="信州・飯綱山"> 信州・飯綱山<br> 飯綱山は、長野市の北端に位置している市の最高峰であり、山頂で牟礼村、戸隠村に接し、北 方の霊仙寺山(1875m)を境に信濃町にも接しているから、それぞれの市町村で「おらが 山」ということになる。 </body> </html> renshu25.html <html> <head> <title>*</title> <style type="text/css"> body { background-color: #ffffff; } img { float: right; }

</style> </head> <body> <img src="hp01.jpg" alt="信州・飯綱山"> 信州・飯綱山<br> 飯綱山は、長野市の北端に位置している市の最高峰であり、山頂で牟礼村、戸隠村に接し、北 方の霊仙寺山(1875m)を境に信濃町にも接しているから、それぞれの市町村で「おらが 山」ということになる。頂上付近の山容は、霊仙寺山を除けば、二つ峰のある双耳峰である。 双耳峰の代表的な山としては、北アルプスの鹿島槍ケ岳があるが鹿島槍が急峻な岩峰であるの に対し、飯綱山は、しなやかな曲線を持ったおとなしい女性的な山である。地図や案内書を見 ると飯綱山は、「飯縄山」とも書かれているが、長野市では「飯綱山」の方を使用することに決 まっているのだそうである。 </body> </html> renshu26.html <html> <head> <title>*</title> <style type="text/css">

(13)

body { background-color: #ffffff; } img { float: right; }

</style> </head> <body> <img src="hp01.jpg" alt="信州・飯綱山"> 信州・飯綱山<br> 飯綱山は、長野市の北端に位置している市の最高峰であり、山頂で牟礼村、戸隠村に接し、北 方の霊仙寺山(1875m)を境に信濃町にも接している。 それぞれの市町村で「おらが山」ということになる。<br clear="right"> 頂上付近の山容は、霊仙寺山を除けば、二つ峰のある双耳峰である。双耳峰の代表的な山とし ては、北アルプスの鹿島槍ケ岳があるが鹿島槍が急峻な岩峰であるのに対し、飯綱山は、しな やかな曲線を持ったおとなしい女性的な山である。地図や案内書を見ると飯綱山は、「飯縄山」 とも書かれているが、長野市では「飯綱山」の方を使用することに決まっているのだそうであ る。 </body> </html> renshu27.html <html> <head> <title>*</title> <style type="text/css"> body { background-color: #ffffff; }

img { float: right; margin-left:30px; margin-bottom: 30px; } </style> </head> <body> <img src="hp01.jpg" alt="信州・飯綱山"> 信州・飯綱山<br> 飯綱山は、長野市の北端に位置している市の最高峰であり、山頂で牟礼村、戸隠村に接し、北 方の霊仙寺山(1875m)を境に信濃町にも接している。 それぞれの市町村で「おらが山」ということになる。<br clear="right"> 頂上付近の山容は、霊仙寺山を除けば、二つ峰のある双耳峰である。双耳峰の代表的な山とし ては、北アルプスの鹿島槍ケ岳があるが鹿島槍が急峻な岩峰であるのに対し、飯綱山は、しな やかな曲線を持ったおとなしい女性的な山である。地図や案内書を見ると飯綱山は、「飯縄山」 とも書かれているが、長野市では「飯綱山」の方を使用することに決まっているのだそうであ る。 </body> </html> (6)箇条書き ● <ul> <li>北海道の旅</li> <li>東北の旅</li> <li>九州の旅</li> <li>四国の旅</li> </ul>

(14)

ul { list-style-type: 種類; } 種類 disc(規定値) ● circle ○ square ■ 番号 <ol> <li>北海道の旅</li> <li>東北の旅</li> <li>九州の旅</li> <li>四国の旅</li> </ol>

ol { list-style-type: 種類; } 種類 decimal(規定値) decimal-leading-zero 01,02,03

upper-alpha A,B,C lower-alpha a,b,c upper-roman Ⅰ,Ⅱ,Ⅲ ・・・・・・・・ renshu28.html <html> <head> <title>*</title> </head> <body> <ul> <li>北海道の旅</li> <li>東北の旅</li> <li>九州の旅</li> <li>四国の旅</li> </ul> <p> <ol> <li>北海道の旅</li> <li>東北の旅</li> <li>九州の旅</li> <li>四国の旅</li> </ol> </p> </body> </html> (7)区切り線 <hr>

hr { height: 太さ(px); width: 長さ(px %); color: 色; text-align 位置(left center right); } renshu29.html <html> <head> <title>*</title> </head> <body>

(15)

<hr> </body> </html> renshu30.html <html> <head> <title>*</title> <style tyle="text/css">

hr { height: 10px; width: 70%; color: green; text-align: center; } </style> </head> <body> 北海道を旅しました。 <hr> 九州を旅しました。 </body> </html> 【5】ホームページの全体設計(例) トップページ・・・・タイトルや目的内容概略を記述し、メニューを置く 1旅行記のページ・・・・今まで行った内外の旅行、サブメニューを置く 2趣味の写真のページ・・・・近くの公園の花や街角などの写真、サブメニューを置く 3趣味の水彩画・・・・サブメニューなし 4気になる話題・・・・・気になる身の回りの話題をエッセイ風に、サブメニューを置く 5趣味の俳句・・・・サブメニューなし 6自己紹介・・・・自分のプロフィールを紹介、サブメニューなし 7リンクのページ・・・・他のお気に入りサイトとのリンク、サブメニューなし

(16)

フォルダの構成

【6】リンクの設定

他のページへのリンク <a href="リンク先" target="属性">文字又は画像</a>

属性 _top フレームを解除して、リンク先をウインドウ全体に表示 _parent リンク先をリンク元のフレームの親フレームに表示、親フレームがない場合は、 「_self」と同じ _self リンク先をリンク元と同じフレームに表示 _blank 新しいウインドウを開いて、リンク先を表示 省略の場合は同じウインドウに表示 指定位置へのリンク <a href="リンク先#参照名">文字又は画像</a> <a name="参照名"> 電子メールへのリンク <a href=mailto:電子メールアドレス>文字又は画像</a> homepage-名前(英数)-pcjuku ・・トップページとサブフォルダ ryoko index.html ・・旅行のトップページと旅行のサブフォルダ index.html shinshu okinawa ・・・・・・ photo index.html hana yama machi ・・写真のトップページと旅行のサブフォルダ suisai ・・水彩のページ kyotu ・・全体に共通のイメージやBGM を置く shinshu.html 01.jpg 02.jpg okinawa.html suisai.html

(17)

(練習例)トップページのindex.html <html> <head> <title>*</title> <style type="text/css"> body { color: #000000; font-size:12pt; text-align: center; } h1 {

font-size: 32pt; color: green;

text-decoration: underline overline; } h2 { font-size: 24pt; color:blue; } </style> </head> <body> <h1>悠々シニアライフ</h1> <h2>悠々シニアライフのページへようこそ!</h2> <p> 趣味の写真や旅行記などを楽しみながらホームページにまとめています。<br> まだ拙い内容ですが、よろしかったら、<br> どうぞごゆっくりご覧ください。 </p> <p> ホームページ開設したばかりで、未熟なホームページです。<br> まだ載せる内容は少ないですが、努力して更新していきますのでよろしくお願いします。 </p> <p><a href="ryoko/index.html">1.旅行記</a></p> <p><a href="photo/index.html">2.趣味の写真</a></p> <p><a href="suisai/suisai.html">3.趣味の水彩画</a></p> <p>4.気になる話題(工事中)</p> <p>5.趣味の俳句(工事中)</p> <p>6.自己紹介(工事中)</p> <p>7.リンクのページ(工事中)</p> </body> </html> リンク先ファイルの相対表示 同一フォルダ内 ./ファイル名 又は ファイル名のみ 下位のフォルダ内 フォルダ名/ファイル名 上位のフォルダ内 ../ファイル名 さらに上位 ../../ファイル名 同一フォルダ内にある他のフォルダ内 ../フォルダ名/ファイル名

(18)

ryoko の中の index.html <html> <head> <title>旅行記</title> <style type="text/css"> body { color: #000000; font-size:12pt; text-align: center; } h1 {

font-size: 32pt; color: green;

text-decoration: underline overline; } h2 { font-size: 24pt; color:blue; } </style> </head> <body> <h1>旅行記</h1> <h2>悠々シニアの旅行記</h2> <p> 最近行った国内・海外の旅行を写真を交えながら旅行記にしました。下記メニューをクリック してください。 </p> <p><a href="shinshu/shinshu.html">1.信州の旅</a></p> <p><a href="okinawa/okinawa.html">2.沖縄の旅</a></p> <p>3.イタリアの旅(工事中)</p> <p>4.アメリカ西海岸の旅(工事中)</p> <p>5.オーストラリアの旅(工事中)</p>

<a href="../index.html"><img src="../kyotu/home.gif"></a> </body> </html> shinshu.html <html> <head> <title>信州の旅</title> <style type="text/css"> body { color: #000000; font-size:12pt; text-align: center; } h2 { font-size: 24pt; color:blue; }

(19)

</style> </head> <body> <h2>信州の旅</h2> <p> ○年○月○日信州を旅行しました。美しい・・・・・・・ </p> <img src="01.jpg"><br><br> <img src="02.jpg"><br><br> 信州では××と○○などを訪問・・・・・・・・<br><br>

<a href="../../index.html"><img src="../../kyotu/home.gif"></a><br><br> <a href="../index.html">旅行のメニュー</a> </body> </html> okinawa.html <html> <head> <title>沖縄の旅</title> <style type="text/css"> body { color: #000000; font-size:12pt; text-align: center; } h2 { font-size: 24pt; color:blue; } </style> </head> <body> <h2>沖縄の旅</h2> <p> ○年○月○日信州を旅行しました。美しい・・・・・・・ </p> 沖縄では××と○○などを訪問・・・・・・・・以下作成中<br><br> <a href="../../index.html"><img src="../../kyotu/home.gif"></a><br><br> <a href="../index.html">旅行のメニュー</a> </body> </html> photo の中の index.html <html> <head> <title>*</title> </head> <body> <p>

(20)

準備中につき少々お待ちください。 </p> <img src="../kyotu/koujichu.gif"> </body> </html> 同一ページ内の指定位置へのリンク renshu31.html <html> <head> <title>旅行記</title> <style type="text/css"> body { color: #000000; font-size:12pt; text-align: center; } h1 {

font-size: 32pt; color: green;

text-decoration: underline overline; } h2 { font-size: 24pt; color:blue; } </style> </head> <body> <a name="top"></a> <h1>旅行記</h1> <h2>悠々シニアの旅行記</h2> <p> 最近行った国内・海外の旅行を写真を交えながら旅行記にしました。下記メニューをクリック してください。 </p> <p><a href="#shinshu">1.信州の旅</a></p> <p><a href="#okinawa">2.沖縄の旅</a></p> <p>3.イタリアの旅(工事中)</p> <p>4.アメリカ西海岸の旅(工事中)</p> <p>5.オーストラリアの旅(工事中)</p> <p> <a name="shinshu">信州</a><br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br>

(21)

信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州<br> </p> <a href="#top">戻る</a><br> <pre> </pre> <p> <a name="okinawa">沖縄</a><br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> 沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄沖縄<br> </p> <a href="#top">戻る</a><br> <pre> </pre> </body> </html> <pre> ~ </pre>は空白や改行をそのまま表示する。 電子メールへのリンク renshu32.html <html> <head> <title>*</title> </head> <body> <p> メールを送信します。 </p> <p> <a href="mailto:takemoto@earth.email.ne.jp">武本健一へメール</a> </p> </body> </html>

(22)

【7】リンク先の状態の識別表示 a:link { color: 色; } まだ見ていないリンク部分の文字色 a:visited { color; 色; } すでに見たリンク部分の文字色 a:active {color: 色; } リンク先を表示していることを示す文字色 a:hover {color: 色; } マウスポインターを合わせたときの文字色 指定しない場合はブラウザのデフォルト色 背景色の関係で色が見にくい場合に指定するとよい renshu33.html <html> <head> <title>*</title> <style type="text/css"> a:link { color: green; } a:visited {color: red; } a:hover {color: black; } </style>

</head> <body>

<p>リンクの色指定</p>

<p><a href="index.html">悠々シニアライフ</a></p> <p><a href="ABCDE">ABCDE のページ</a></p> </body> </html> 【8】表(テーブル) (1) 表の基本形 <table border="外枠の太さ"> 表全体 <caption> ~ </caption> タイトル <tr> 横の列 <th> 見出し用のセル ~ </th> <td> データ用のセル ~ </td> </tr> </table> 例 タイトル 見出し1 見出し2 見出し3 データ1 データ2 データ3 データ4 データ5 データ6 <table> <caption>タイトル</caption> <tr> <th>見出し1</th><th>見出し2</th><th>見出し3</th>

(23)

</tr> <tr> <td>データ1</td><td>データ2</td><td>データ3</td> </tr> <tr> <td>データ4</td><td>データ5</td><td>データ6</td> </tr> </table> (2) 表の幅、高さ

<table width="幅"> ~ </table> 表全体の幅はピクセル又は% <th width="幅" height="高さ"> ~ </th> ピクセル <td width="幅" height="高さ"> ~ </td> ピクセル リンゴの値段表 種類 1 個の値段 5 個の値段 A産リンゴ 200 円 900 円 B産リンゴ 250 円 1000 円 C産リンゴ 300 円 1250 円 renshu34.html <html> <head> <title>リンゴの値段</title> </head> <body>

<table border ="3" width="70%">

<caption>リンゴの値段表</caption> <tr> <th>種類</th><th>1 個の値段</th><th>5 個の値段</th> </tr> <tr> <th>A産リンゴ</th><td>200 円</td><td>900 円</td> </tr> <tr> <th>B産リンゴ</th><td>250 円</td><td>1000 円</td> </tr> <tr> <th>C産リンゴ</th><td>300 円</td><td>1250 円</td> </tr> </table> </body> </html>

(24)

(3) セル内の行揃え、縦位置指定

<tr or th or td align=”行揃え” valign=”縦位置”> ~ </ > 行揃え left right center justify

縦位置 top middle bottom baseline

renshu35.html <html> <head> <title>リンゴの値段</title> </head> <body>

<table border ="1" width="70%">

<caption>リンゴの値段表</caption> <tr> <th>種類</th><th>1 個の値段</th><th>5 個の値段</th> </tr> <tr valign="middle"> <th height="50">A産リンゴ</th><td align="center">200 円</td><td align="right">900 円</td> </tr> <tr valign="bottom"> <th height="80">B産リンゴ</th><td>250 円</td><td>1000 円</td> </tr> <tr> <th>C産リンゴ</th><td align="center">300 円</td><td>1250 円</td> </tr> </table> </body> </html> (4) セルの連結 <th or td rowspan=”縦方向の連結数”> ~ </ > <th or td colspan=”横方向の連結数”> ~ </ > BSネット会員 地区 鈴木 一郎 男 小泉 純一郎 男 紫 式部 女 一宮 renshu36.html <html> <head> <title>BS ネット会員表</title> </head> <body>

<table border width="500"> <tr>

<th colspan="2">BS ネット会員</th> <th>地区</th>

(25)

</tr> <tr> <td>鈴木 一郎</td> <td>男</td> <td rowspan="3">一宮</td> </tr> <tr> <td>小泉 純一郎</td> <td>男</td> </tr> <tr> <td>紫 式部</td> <td>女</td> </tr> </table> </body> </html> (5) その他

セル同士の間隔 <table cellspacing="セルの間隔"> ~ </table>

セル枠と内容の間隔 <table cellpadding="セル枠と内容の間隔"> ~ </table>

renshu37.html <html> <head> <title>*</title> </head> <body>

<table border width="60%" cellpadding="20"> <tr> <th>名前</th><th>性別</th><th>年齢</th> </tr> <tr> <td>佐々木 小次郎</td><td>男</td><td>25 歳</td> </tr> <tr> <td>美空 ひばり</td><td>女</td><td>20 歳</td> </tr> </table> <br>

<table border width="60%" cellpadding="0"> <tr> <th>名前</th><th>性別</th><th>年齢</th> </tr> <tr> <td>佐々木 小次郎</td><td>男</td><td>25 歳</td> </tr>

(26)

<tr>

<td>美空 ひばり</td><td>女</td><td>20 歳</td> </tr>

</table> <br>

<table border width="60%" cellspacing="10"> <tr> <th>名前</th><th>性別</th><th>年齢</th> </tr> <tr> <td>佐々木 小次郎</td><td>男</td><td>25 歳</td> </tr> <tr> <td>美空 ひばり</td><td>女</td><td>20 歳</td> </tr> </table> </body> </html> 【9】フレーム (1) 基本型

<frameset rows="高さ"> ~ </frameset> <frameset cols="幅"> ~ <frameset> <frame src="URL" name=”フレーム名”>

renshu38.html <html> <head> <title>*</title> </head> <frameset rows="70,*">

<frame src="title.html" name="hyodai"> <frameset cols="150,*">

<frame src="menu.html" name="menu"> <frame src="main.html" name="main"> </frameset> </frameset> </html> title.html <html> <head> <title>*</title> <style type="text/css">

body { background-color="green"; color: white; } </style>

(27)

<body> title.html </body> </html> menu.html <html> <head> <title>*</title> <style type="text/css">

body { background-color="blue"; color: white; } </style> </head> <body> menu.html </body> </html> main.html <html> <head> <title>*</title> <style type="text/css">

body { background-color="gray"; color: white; } </style> </head> <body> main.html </body> </html> title.html menu.html main.html

(28)

(2) 表示方法

<frame scrolling="スクロールの制御" noresize>

<frame marginwidth="左右のマージン" marginheight="上下のマージン"> noresize フレームのサイズ変更禁止 マージン ピクセル スクロールの制御 auto 必要に応じてスクロール可能(デフォルト) yes 常にスクロール可能(スクロールバーあり) no 常にスクロール不可(スクロールバーなし) <frame frameborder="枠の表示指定"> 1 表示(デフォルト) 0 非表示

(29)

追記 リンク方法(絶対アドレスと相対アドレス) http://www.xxx.ne.jp/yyy/ 追記 本テキストは「尾北シニアネット」PC 塾 HTML 基礎講座用のテキストとして作成したものです。 教育用・自習用など参考書として使っていただければ幸いです。 筆者(講師):武本 健一 def xyz 123 uvw 456 def.tml bsnet.html plaza.jpg abc index2.html def.jpg index.html http://www.xxx.ne.jp/yyy/abc/xyz/123/plaza.jpg abc/xyz/123/plaza.jpg xyzabc.html abcdef.html <a href=”abcdef.html”>リンク</a> 同一フォルダ内 下位のフォルダ内 <a href=”abc/xyzabc.html”>リンク</a>

上位のフォルダ内(index2.html から) <a href=”../xyzabc.html”>リンク</a> さらに上位(index2.html から) <a href=”../../abcdef.html”>リンク</a>

同一フォルダ内の他のフォルダ内(xyzabc.html から)

(30)

参照