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

Size: px

Start display at page:

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

なごみあくや
5 years ago
Views:

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

2 <h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞご覧くださいホームページ作成初心者ですが <br> よろしくお願いします <br> 拙い文章ですが <br> その点もよろしくお願いします (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) 特殊文字の例 <(<) < >(&##62;) > "(") &(&) & ( ) C <html><br> <head><br> <title> 悠々シニアライフのトップページ </title><br> </head><br> <body><br> </html> 2

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

4 <p class="red"> 趣味の写真や旅行記などを楽しみながらホームページにまとめています <p class="blue"> 趣味の写真や旅行記などを楽しみながらホームページにまとめています例 c. <title> 悠々シニアライフのトップページ </title> p { color: blue; span.red { color: red; span.green { color: green; rensh11.html <span class="red"> 趣味の写真や旅行記 </span> などを楽しみながらホームページにまとめています <span class="green"> どうぞごゆっくり </span> ご覧ください色指定 # ~ #ffffff 文字列で指定 HTML4.01 で指定 16 色 white yellow fuchsia red silver gray olive purple maroon green blue navy black その他ブラウザで文字列指定 140 色あり [2]style 属性を使うタグに style 属性を記述し特定の部分にスタイルを指定する例 <title> 悠々シニアライフのトップページ </title> p { color: #555599; renshu12.html 趣味の写真や旅行記などを楽しみながらホームページにまとめています <span style="color: #ff000"> どうぞごゆっくり </span> ご覧ください [3] 外部スタイルシートを使うスタイルシートを別のファイルにし共通に使う例 body { background-color: #ffffff; color:green; span.red { color: red; kyotu.css 4

5 span.yellow { color: yellow; というような定義部分だけを例えば kyotu.css というファイルにしておく <head.> <link rel=stylesheet href="kyotu.css" type="text/css"> <span class="red"> 趣味の写真や旅行記 </span> などを楽しみながらホームページにまとめています <span class="yellow"> どうぞごゆっくり </span> ご覧ください renshu13.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 body { background-color: #000000; color: #ffffff; 趣味の写真や旅行記などを楽しみながらホームページにまとめています 5

6 どうぞごゆっくりご覧ください [CSS を使わない記述 ] renshu14-2.html <body bgcolor="#000000" text="#ffffff" > 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞごゆっくりご覧ください (2) 文字の大きさ文字の色セレクター { font-size: サイズ ; color: 色 ; renshu15.html body { background-color: #000000; color: #ffffff; font-size:12pt; h1 { font-size: 32pt; color:yellow; <h1> 悠々シニアライフ </h1> 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞごゆっくりご覧ください [CSS を使わない記述 ] renshu15-2.html <body bgcolor="#000000" text="#ffffff" > <h1><font color="yellow"> 悠々のシニアライフ </font></h1> <font size= 3 > 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞごゆっくりご覧ください </font> 6

7 (3) フォントの種類セレクタ { font-family: フォント名, キーワード ; renshu16.html body { background-color: #000000; color: #ffffff; font-size:12pt; font-family: "MS ゴシック ",sans-serif; h1 { font-size: 32pt; color:yellow; font-family: "MS 明朝 ",serif; <h1> 悠々シニアライフ </h1> 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞごゆっくりご覧ください [CSS を使わない記述 ] renshu16-2.html <body bgcolor="#000000" text="#ffffff" > <h1><font color="yellow" face="ms 明朝 ",serif > 悠々のシニアライフ </font></h1> <font size="3" face="ms ゴシック,san-serif"> 趣味の写真や旅行記などを楽しみながらホームページにまとめていますどうぞごゆっくりご覧ください </font> キーワード分類フォント名 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: 位置 ; 7 renshu17.html

8 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; <h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています <br> どうぞごゆっくりご覧ください [CSS を使わない記述 ] renshu17-2.html <body bgcolor="#000000" text="#ffffff" > <center> <h1><font color="yellow" > 悠々シニアライフ </font></h1> <h2><font color="blue"> 悠々シニアライフのページへようこそ!</font></h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています <br> どうぞごゆっくりご覧ください </center> (5) 文字の装飾セレクタ { text-decoration: 装飾 ; renshu18.html 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; <h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 8

9 趣味の写真や旅行記などを楽しみながらホームページにまとめています <br> どうぞごゆっくりご覧ください (6) 行の高さセレクタ { line-height: 行の高さ ; renshu19.html 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%; <h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> 趣味の写真や旅行記などを楽しみながらホームページにまとめています <br> まだ拙い内容ですがよろしかったら <br> どうぞごゆっくりご覧くださいホームページ開設したばかりで未熟なホームページです <br> まだ載せる内容は少ないですが努力して更新していきますのでよろしくお願いします行の高さの表示数値 1.5 とすれば行間はフォントの 1.5 倍 px や mm 指定でもよい % 300% とすれば行間はフォントの 3.0 倍 4 画像を使用する (1) 画像を画像を壁紙にする body { background-image: url( ファイル名 ); body { background-image: url(background1.gif); color: #ffffff; font-size:12pt; text-align: center; renshu20.html 9

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

11 <h1> 悠々シニアライフ </h1> <h2> 悠々シニアライフのページへようこそ!</h2> <strong> 趣味の写真や旅行記などを楽しみながらホームページにまとめています <br> まだ拙い内容ですがよろしかったら <br> どうぞごゆっくりご覧くださいホームページ開設したばかりで未熟なホームページです <br> まだ載せる内容は少ないですが努力して更新していきますのでよろしくお願いします </strong> (3) 画像の表示 <img src=" ファイル名 " width=" 画像の幅 " height=" 画像の高さ "> renshu22.html <img src="hp01.jpg" width="400" height="300" alt=" 信州飯綱山 "> width,height を省略すれば画像の幅高さになる (4) 画像の枠 img { border-style: 枠のスタイル ; border-width: 枠の太さ ; border-color: 色 ; スタイル : none hidden solid double groove ridge inset outset dashed dotted renshu23.html body { background-color: blue; text-align: center; img { border-style: groove; border-width: 30px; border-color: olive; <img src="hp01.jpg" width="400" height="300" alt=" 信州飯綱山 "> 11

12 (5) 画像と文字の関係縦位置 img { vertical-align: 位置 ; 位置 : top, middle 回り込み img { float: 位置 ; 位置 : left, right 回り込み解除 <br clear=" 位置 "> 位置 : left, right, all 画像周囲の余白 img {margin: 余白 ; 余白 : ピクセル % renshu24.html body { background-color: #ffffff; img { vertical-align: middle; <img src="hp01.jpg" alt=" 信州飯綱山 "> 信州飯綱山 <br> 飯綱山は長野市の北端に位置している市の最高峰であり山頂で牟礼村戸隠村に接し北方の霊仙寺山 (1875m) を境に信濃町にも接しているからそれぞれの市町村でおらが山ということになる renshu25.html body { background-color: #ffffff; img { float: right; <img src="hp01.jpg" alt=" 信州飯綱山 "> 信州飯綱山 <br> 飯綱山は長野市の北端に位置している市の最高峰であり山頂で牟礼村戸隠村に接し北方の霊仙寺山 (1875m) を境に信濃町にも接しているからそれぞれの市町村でおらが山ということになる頂上付近の山容は霊仙寺山を除けば二つ峰のある双耳峰である双耳峰の代表的な山としては北アルプスの鹿島槍ケ岳があるが鹿島槍が急峻な岩峰であるのに対し飯綱山はしなやかな曲線を持ったおとなしい女性的な山である地図や案内書を見ると飯綱山は飯縄山とも書かれているが長野市では飯綱山の方を使用することに決まっているのだそうである renshu26.html 12

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

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 <ul> <li> 北海道の旅 </li> <li> 東北の旅 </li> <li> 九州の旅 </li> <li> 四国の旅 </li> </ul> <ol> <li> 北海道の旅 </li> <li> 東北の旅 </li> <li> 九州の旅 </li> <li> 四国の旅 </li> </ol> (7) 区切り線 <hr> hr { height: 太さ (px); width: 長さ (px %); color: 色 ; text-align 位置 (left center right); renshu29.html 14

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

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

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

18 ryoko の中の index.html してください shinshu.html <title> 旅行記 </title> 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; <h1> 旅行記 </h1> <h2> 悠々シニアの旅行記 </h2> 最近行った国内海外の旅行を写真を交えながら旅行記にしました下記メニューをクリック <a href="shinshu/shinshu.html">1. 信州の旅 </a> <a href="okinawa/okinawa.html">2. 沖縄の旅 </a> 3. イタリアの旅 ( 工事中 ) 4. アメリカ西海岸の旅 ( 工事中 ) 5. オーストラリアの旅 ( 工事中 ) <a href="../index.html"><img src="../kyotu/home.gif"></a> <title> 信州の旅 </title> body { color: #000000; font-size:12pt; text-align: center; h2 { font-size: 24pt; color:blue; 18

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

20 準備中につき少々お待ちください <img src="../kyotu/koujichu.gif"> 同一ページ内の指定位置へのリンクしてください <title> 旅行記 </title> 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; 20 renshu31.html <a name="top"></a> <h1> 旅行記 </h1> <h2> 悠々シニアの旅行記 </h2> 最近行った国内海外の旅行を写真を交えながら旅行記にしました下記メニューをクリック <a href="#shinshu">1. 信州の旅 </a> <a href="#okinawa">2. 沖縄の旅 </a> 3. イタリアの旅 ( 工事中 ) 4. アメリカ西海岸の旅 ( 工事中 ) 5. オーストラリアの旅 ( 工事中 ) <a name="shinshu"> 信州 </a><br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br> 信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州信州 <br>

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

22 7 リンク先の状態の識別表示 a:link { color: 色 ; a:visited { color; 色 ; a:active {color: 色 ; a:hover {color: 色 ; まだ見ていないリンク部分の文字色すでに見たリンク部分の文字色リンク先を表示していることを示す文字色マウスポインターを合わせたときの文字色指定しない場合はブラウザのデフォルト色背景色の関係で色が見にくい場合に指定するとよい a:link { color: green; a:visited {color: red; a:hover {color: black; リンクの色指定 <a href="index.html"> 悠々シニアライフ </a> <a href="abcde">abcde のページ </a> renshu33.html 8 表( テーブル ) (1) 表の基本形 <table border=" 外枠の太さ "> <caption> ~ </caption> <th> ~ </th> <td> ~ </td> </table> 例表全体タイトル横の列見出し用のセルデータ用のセルタイトル見出し 1 見出し 2 見出し 3 データ 1 データ 2 データ 3 データ 4 データ 5 データ 6 <table> <caption> タイトル </caption> <th> 見出し 1</th><th> 見出し 2</th><th> 見出し 3</th> 22

23 </table> <td> データ 1</td><td> データ 2</td><td> データ 3</td> <td> データ 4</td><td> データ 5</td><td> データ 6</td> (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 <title> リンゴの値段 </title> <table border ="3" width="70%"> <caption> リンゴの値段表 </caption> <th> 種類 </th><th>1 個の値段 </th><th>5 個の値段 </th> <th>a 産リンゴ </th><td>200 円 </td><td>900 円 </td> <th>b 産リンゴ </th><td>250 円 </td><td>1000 円 </td> <th>c 産リンゴ </th><td>300 円 </td><td>1250 円 </td> </table> 23

24 (3) セル内の行揃え縦位置指定 <tr or th or td align= 行揃え valign= 縦位置 > ~ </ > 行揃え left right center justify 縦位置 top middle bottom baseline renshu35.html <title> リンゴの値段 </title> <table border ="1" width="70%"> <caption> リンゴの値段表 </caption> <th> 種類 </th><th>1 個の値段 </th><th>5 個の値段 </th> <tr valign="middle"> <th height="50">a 産リンゴ </th><td align="center">200 円 </td><td align="right">900 円 </td> <tr valign="bottom"> <th height="80">b 産リンゴ </th><td>250 円 </td><td>1000 円 </td> <th>c 産リンゴ </th><td align="center">300 円 </td><td>1250 円 </td> </table> (4) セルの連結 <th or td rowspan= 縦方向の連結数 > ~ </ > <th or td colspan= 横方向の連結数 > ~ </ > BSネット会員鈴木一郎男小泉純一郎男紫式部女 <title>bs ネット会員表 </title> 一宮地区 <table border width="500"> <th colspan="2">bs ネット会員 </th> <th> 地区 </th> 24 renshu36.html

25 </table> <td> 鈴木一郎 </td> <td> 男 </td> <td rowspan="3"> 一宮 </td> <td> 小泉純一郎 </td> <td> 男 </td> <td> 紫式部 </td> <td> 女 </td> (5) その他セル同士の間隔 <table cellspacing=" セルの間隔 "> ~ </table> セル枠と内容の間隔 <table cellpadding=" セル枠と内容の間隔 "> ~ </table> <table border width="60%" cellpadding="20"> <th> 名前 </th><th> 性別 </th><th> 年齢 </th> <td> 佐々木小次郎 </td><td> 男 </td><td>25 歳 </td> <td> 美空ひばり </td><td> 女 </td><td>20 歳 </td> </table> <br> <table border width="60%" cellpadding="0"> <th> 名前 </th><th> 性別 </th><th> 年齢 </th> <td> 佐々木小次郎 </td><td> 男 </td><td>25 歳 </td> renshu37.html 25

26 <td> 美空ひばり </td><td> 女 </td><td>20 歳 </td> </table> <br> <table border width="60%" cellspacing="10"> <th> 名前 </th><th> 性別 </th><th> 年齢 </th> <td> 佐々木小次郎 </td><td> 男 </td><td>25 歳 </td> <td> 美空ひばり </td><td> 女 </td><td>20 歳 </td> </table> 9 フレーム (1) 基本型 <frameset rows=" 高さ "> ~ </frameset> <frameset cols=" 幅 "> ~ <frameset> <frame src="url" name= フレーム名 > <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> body { background-color="green"; color: white; renshu38.html title.html 26

27 title.html body { background-color="blue"; color: white; menu.html body { background-color="gray"; color: white; main.html menu.html main.html title.html menu.html main.html 27

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

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

30 おわり 30

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます