HTML-Ⅱ(HTML 文 書 構 造 編 )
3-1 HTML 基 本 構 造 html <html> <head> <title>おいしいお 店 一 覧 </title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> <body> <div id="contents"> <a id="pagetop"></a> <h1>タウンライター もも が 選 んだとっておきマイタウン 情 報 </h1> <ul id="menu"> <li>トップページ</li> <li>おいしいお 店 </li> <li> 雑 貨 やファッション</li> <li> 出 かけたいスポット</li> <li><a href="profiles.html">もものプロフィール</a></li> </ul> <div id="body_section"> <h2>おいしいお 店 </h2> <img class="flt_left" src="img/pasta2.jpg" alt="パスタ パスタのほうれん 草 パスタ" /> <h3> パスタ パスタ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 みどり 町 1-2-3<br /> 営 業 時 間 :10 時 ~23 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.pasta2.jp/">http://www.pasta2.jp/</a><br /> TEL:048-888-1234</p> <img class="flt_left" src="img/masa.jpg" alt="ビストロ マサのごちそうステーキ" /> <h3> ビストロ マサ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 寿 町 1-1-34<br /> 営 業 時 間 :10 時 ~24 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.b-masa.com/">http://www.b-masa.com/</a><br /> TEL:048-777-5678</p> <img class="flt_left" src="img/fururu.jpg" alt="フルールのアイスケーキ" /> <h3> フルール </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 大 和 町 1-145<br /> 営 業 時 間 :10 時 ~19 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.c-fururu.jp/">http://www.c-fururu.jp/</a><br /> TEL:048-666-9102</p> <a href="#pagetop">ページトップへ 戻 る</a> </body> head body </html>
3-2 HTMLブロックレベル 構 造 <html> <head> <title>おいしいお 店 一 覧 </title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> <body> <div id="contents"> <a id="pagetop"></a> <h1>タウンライター もも が 選 んだとっておきマイタウン 情 報 </h1> <ul id="menu"> #menu <li>トップページ</li> <li>おいしいお 店 </li> <li> 雑 貨 やファッション</li> <li> 出 かけたいスポット</li> <li><a href="profiles.html">もものプロフィール</a></li> </ul> <div id="body_section"> <h2>おいしいお 店 </h2> <img class="flt_left" src="img/pasta2.jpg" alt="パスタ パスタのほうれん 草 パスタ" /> <h3> パスタ パスタ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 みどり 町 1-2-3<br /> 営 業 時 間 :10 時 ~23 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.pasta2.jp/">http://www.pasta2.jp/</a><br /> TEL:048-888-1234</p> <img class="flt_left" src="img/masa.jpg" alt="ビストロ マサのごちそうステーキ" /> <h3> ビストロ マサ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 寿 町 1-1-34<br /> 営 業 時 間 :10 時 ~24 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.b-masa.com/">http://www.b-masa.com/</a><br /> TEL:048-777-5678</p> <img class="flt_left" src="img/fururu.jpg" alt="フルールのアイスケーキ" /> <h3> フルール </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 大 和 町 1-145<br /> 営 業 時 間 :10 時 ~19 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.c-fururu.jp/">http://www.c-fururu.jp/</a><br /> TEL:048-666-9102</p> <a href="#pagetop">ページトップへ 戻 る</a> </body> </html> #contents #body_section
3-3 HTMLタグ 構 造 <html> <head> <title>おいしいお 店 一 覧 </title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> <body> <div id="contents"> <a id="pagetop"></a> <h1>タウンライター もも が 選 んだとっておきマイタウン 情 報 </h1> <ul id="menu"> <li>トップページ</li> <li>おいしいお 店 </li> <li> 雑 貨 やファッション</li> <li> 出 かけたいスポット</li> <li><a href="profiles.html">もものプロフィール</a></li> </ul> <div id="body_section"> <h2>おいしいお 店 </h2> <img class="flt_left" src="img/pasta2.jpg" alt="パスタ パスタのほうれん 草 パスタ" /> <h3> パスタ パスタ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 みどり 町 1-2-3<br /> 営 業 時 間 :10 時 ~23 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.pasta2.jp/">http://www.pasta2.jp/</a><br /> TEL:048-888-1234</p> <img class="flt_left" src="img/masa.jpg" alt="ビストロ マサのごちそうステーキ" /> <h3> ビストロ マサ </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 寿 町 1-1-34<br /> 営 業 時 間 :10 時 ~24 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.b-masa.com/">http://www.b-masa.com/</a><br /> TEL:048-777-5678</p> <img class="flt_left" src="img/fururu.jpg" alt="フルールのアイスケーキ" /> <h3> フルール </h3> <p> 埼 玉 県 さいたま 市 浦 和 区 大 和 町 1-145<br /> 営 業 時 間 :10 時 ~19 時 ( 水 曜 定 休 )<br /> URL:<a href="http://www.c-fururu.jp/">http://www.c-fururu.jp/</a><br /> TEL:048-666-9102</p> <a href="#pagetop">ページトップへ 戻 る</a> </body> ページ 内 リンク(リンク 先 ) H1 見 出 し リスト(メニュー) H2 見 出 し イメージ( 画 像 ) H3 見 出 し イメージ( 画 像 ) H3 見 出 し イメージ( 画 像 ) H3 見 出 し ページ 内 リンク(リンク 元 ) </html>
( 備 考 1) font-family の 指 定 について プロパティ font-family: 値 ; フォントの 種 類 を 指 定 する 値 フォント 名 で 指 定 する 場 合 MS ゴシック や MS 明 朝 のようにフォント 名 で 指 定 します フォント 名 にスペースが 含 まれている 場 合 には ダブルクォーテーション( " ) またはシングルクォーテーション( ' )で 囲 みます キーワードで 指 定 する 場 合 総 称 フォントの 種 類 を 表 すキーワードで 指 定 します sans-serif ゴシック 系 のフォント serif 明 朝 系 のフォント cursive 筆 記 体 草 書 体 のフォント fantasy 装 飾 的 なフォント monospace 等 幅 フォント 複 数 のフォント 名 を 指 定 する 場 合 カンマ, で 区 切 って 指 定 することができ 左 方 優 先 で 適 用 されます 該 当 フォントがない 場 合 一 般 名 :serif など の 指 定 があれば 近 いフォ ントを 自 動 的 に 割 り 当 てます 注 意 font-familyでは OSにデフォルトでインストールされているフォントのみを 指 定 します Microsoft OfficeやAdobe 製 品 などに 添 付 されている フォントや 商 用 フォント その 他 フリーフォントは 指 定 しないでください 使 用 例 1 body { font-family: "MS Pゴシック", "Osaka", sans-serif; } フォント 環 境 の 想 定 Windows 環 境 MS Pゴシック Mac 環 境 Osaka その 他 の 環 境 sans-serif 使 用 例 2 body { font-family:"ヒラギノ 角 ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif; } 一 般 的 に 下 記 の 環 境 を 想 定 WindowsXP 標 準 MS Pゴシック WindowsVista 標 準 メイリオ MacOSX 標 準 ヒラギノ 角 ゴ Pro W3 MacOS9 標 準 Osaka その 他 の 環 境 sans-serif 上 記 の 場 合 Windowsにヒラギノフォントをインストールしている というケースでは Windowsなのに ヒラギノ 角 ゴ Pro W3 で 表 示 され てしまいますが 実 際 のところ Windowsにヒラギノフォントをインストールしている のはWeb 制 作 会 社 の 一 部 くらいしかないので 通 常 はあ まり 想 定 していません ブラウザごとに 異 なる 仕 様 に 対 応 するには Safari では ヒラギノ 角 ゴ Pro W3 などフォント 名 に 日 本 語 が 含 まれるものは 無 効 になってしまう Safariでヒラギノ 角 ゴを 指 定 したい 場 合 は Hiragino Kaku Gothic Pro と 表 記 します Firefoxでは Hiragino Kaku Gothic Pro など 日 本 語 フォントのアルファベット 表 記 は 無 効 になってしまう Firefoxでヒラギノ 角 ゴを 指 定 した い 場 合 は ヒラギノ 角 ゴ Pro W3 と 表 記 します 従 って SafariとFirefox 両 方 で 問 題 なく 表 示 するには ヒラギノ 角 ゴ Pro W3, Hiragino Kaku Gothic Pro と 両 方 表 記 することになります
( 備 考 2) CSSプロパティを 一 括 指 定 した 場 合 と 別 々に 記 述 した 例 ボーダー( 上 下 左 右 )をまとめて 同 じ 値 に 設 定 する 場 合 border:solid 1px #cccccc ボーダー( 上 下 左 右 )を 個 別 に 設 定 する 場 合 border-top:solid 1px #cccccc; border-right:solid 10px #cccccc; border-bottom:solid 1px #cccccc; border-left:solid 10px #cccccc; ボーダーの 全 てを 個 別 に 設 定 する 場 合 ( 通 常 ありえませんが 参 考 としてご 紹 介 します) - ボーダー( 上 )のみを 個 別 に 設 定 border-style:solid none none none; border-width:1px 0 0 0; border-color:#cccccc transparent transparent transparent; - ボーダー( 右 )のみを 個 別 に 設 定 border-style:none solid none none; border-width:0 10px 0 0; border-color:transparent #cccccc transparent transparent; - ボーダー( 下 )のみを 個 別 に 設 定 border-style:none none solid none; border-width:0 0 1px 0; border-color:transparent transparent #cccccc transparent; - ボーダー( 左 )のみを 個 別 に 設 定 border-style:none none none solid; border-width:0 0 0 10px; border-color:transparent transparent transparent #cccccc; 上 記 の 囲 みは 同 じ 設 定 であることを 意 味 しています