XHTML+CSS コーディング習得コース 第2回：コーディング演習1

2007年10月18日

Firefoxアドオン(機能拡張)

Html Validator (win/mac) : HTMLの文法チェッカー

講座の始まる前にインストールしてください。

アジェンダ

  • おさらい (10 / 19:00〜19:10)
  • 練習1：XHTMLコーディング・はじめの一歩 (10 / 19:10〜19:20)
  • CSSの書式(40 / 19:20〜20:00)
  • 練習2：CSSコーディング・はじめの一歩 (20 / 20:00〜20:20)
  • 休憩 (10 / 20:20〜20:30)
  • HTML: ブロックレベル要素・インライン要素 (30 / 20:30〜21:00)
  • 練習3：画像とリンクの挿入 (20 / 21:00〜21:20)
  • まとめ、質疑応答 (10 / 21:20〜21:30)

本日の講座で習得したいこと（目標とするゴール）

  • HTMLとCSSのそれぞれの役割について理解する。
  • 「CSSで何が出来るか？」を理解する。

おさらい (10 / 19:00〜19:10)

HTMLとCSS

  • HTML：文書構造を明確にする → 情報（テキスト、図、写真）を「意味」でマークアップしたもの。それがないと意味が伝わらない情報。
  • CSS：視覚表現を付与する → HTMLでマークアップした情報を視覚的に伝わりやすくするための表現。

HTML or CSS ?

  • 写真
  • タイトル
  • 文字サイズ（大）
  • 書体（明朝）
  • 2段組
  • 枠
  • 背景色（紫）
  • 余白
  • 見出し
  • 表
  • ナビゲーション
  • 強調
  • リスト
  • 区切り線
  • リンク
  • 日付

答えは、講座の最後で！

練習1：XHTMLコーディング・はじめの一歩 (10 / 19:10〜19:20)

宮沢賢治『注文の多い料理店』序をXHTMLでマークアップする。

ルール

  • 制限時間は5分間。
  • 文書構造を正しく解釈することを優先し、ブラウザでの表示にとらわれないこと。
  • head要素内に、title要素の内容を書く。
  • body要素内で利用する要素は、h1要素, h2要素, p要素の3種類とする。

ダウンロード

CSSの書式(40 / 19:20〜20:00)

CSSの役割 (p.108)

Cascading Style Sheet の略で、「視覚表現」をコントロールするための言語

  • 見出しの文字サイズを大きくしたい → h1要素に対してfont-size:200%; を適用
  • 本文の行間を広くとりたい → p要素に対してline-height: 1.6; を適用（正確には行の高さを設定する）

CSSの適用方法 (p.119)

head要素内でlink要素を用い外部スタイルシートファイルを参照する。

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />
  • 参照パスの記法（href="/css/style.css", href="./css/style.css"）については、後述。
  • 数種類の適用方法があるが、まずこの方法を覚える。

CSSの書式 (p.109)

具体例

body {font-size:100%;}

h1 { font-size : 150%; color : green; }

h1 {
font-size : 120%;
color : #f90;
background : #000;
}

h1, h2 {
font-size : 120%;
}

p {
line-height : 1.8;
/* color : green; */
}
  • セレクタ { プロパティ : 値 ; }　のように記述する。
  • 誰に? { 何を? : どれくらいに?またはどのように? ; }　と解釈するとわかりやすい。
  • プロパティは、セミコロン「;」で区切ることにより複数指定できる。
  • プロパティごとに改行すると管理しやすくなる。
  • セレクタは、カンマ「,」区切りで並べることで、同じスタイルをまとめて適用できる。
  • 「/*」と「*/」で囲まれた部分は、スタイルが適用されない。主に管理ためのコメントに利用する。
  • XHTMLでCSSを使用する場合、要素名は小文字で書く。

CSSの主要なプロパティ その1

今回はテキストの調整を中心に。レイアウトの調整については次回。

※まずCSSで何ができるか？を理解する。プロパティは覚えられなくても構わない。忘れたら調べれば良い。

font-size: 文字の大きさ (p.225)

font-size: 90%; /*親要素の文字サイズに対して90%の大きさ*/
  • その他 px, ptなどいろいろな指定方法があるが、まずは%指定を覚える。
  • 文字サイズの指定では、HTMLのfont要素を使わない！

font-weight: 文字の太さ (p.222)

font-weight: bold; /* 太字 */
font-weight: normal; /* 標準 */

font-style: 文字のスタイル (p.219)

font-style: normal; /* 標準 */

font-family: 書体 (p.216)

font-family: sans-selif; /* サンセリフ系（ゴシック体） */
font-family: selif; /* セリフ系（明朝体） */
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", 
"Osaka",
"メイリオ", "Meiryo", 
"ＭＳ Ｐゴシック", "MS P Gothic", 
Helvetica, Arial, sans-serif;
  • フォントファミリー名と総称ファミリー名を指定する。
  • フォントファミリー名1, フォントファミリー名2, .... , 総称ファミリー名 のように半角カンマ区切りで並べて書く。
  • 指定順が優先順位になる。上記の指定の場合、メイリオとＭＳ Ｐゴシックの両方がユーザーのPCにインストールされていれば、メイリオで表示される。

line-height: 行の高さ（行間を指定したいとき） (p.187)

line-height:1.8; /*その要素のフォントサイズに1.8を掛けた高さ*/
  • 厳密にいうと「インラインボックスの高さ」を設定する。結果として行間の設定がされる。
  • 実数指定とする。%指定は使わない方がよい。（意図した行間にならない場合がある）

text-indent: インデント幅 (p.232)

text-indent:1em; /*1文字分左にインデントをとる*/
  • 全角スペースで文頭に1文字分余白をとりたいときなどに使う。

text-align: テキストの行揃え (p.233)

text-align:center; /*中央揃え*/
  • HTMLのcenter要素やalign属性を使わない。

text-decration: テキストの装飾 (p.237)

text-decration:underline; /*下線*/
text-decration:none; /*装飾なし*/
  • リンクのテキストから下線を消したいときに使う。
  • リンク以外のテキストに青色＋下線を設定すると、ユーザーを惑わすことになる。

letter-spacing: テキストの文字間隔 (p.244)

letter-spacing: 0.2em; /*0.2文字分の文字間隔*/

color: 色（正確には前景色） (p.204)

color:red ; /*その要素とコマ後要素の前景色を赤（キーワードで指定）*/
color:#f00 ; /*その要素とコマ後要素の前景色を赤（RGB16進数3桁で指定）*/
color:#ff0000 ; /*その要素とコマ後要素の前景色を赤（RGB16進数6桁で指定）*/
  • 色の単位については、p.114参照
  • RGB16進数で指定するのが一般的
  • 慣れないうちはColor Paletteなどを利用すると良い。
  • 微妙な色合いを出したいときは、Fireworksなどで色を決めてからRGB値を調べると良い。

background: 背景 (p.204)

backgorund:#ccc; /*背景色をうすいグレー*/
backgorund:transparent; /*背景色を透明*/
  • 背景色と背景画像を一括して指定ができる。背景色のみの指定も可能。
  • 文字色と背景色のコントラストに注意する。

margin: 他の要素との余白 (p.145)

margin-top: 20px; /*上に20pxの余白*/
margin-right: 20px; /*右に20pxの余白*/
margin-bottom: 20px; /*下に20pxの余白*/
margin-left: 20px; /*左に20pxの余白*/
margin: 20px; /*上下左右に20pxの余白*/
margin: 20px 10px; /*上下に20px、左右に10pxの余白*/
margin: 20px 5px 10px; /*上に20px、左右に5px、下に10xの余白*/
margin: 20px 5px 10px 0; /*上に20px、右に5px、下に10xの余白、左に0px（時計回り）*/
  • 一括指定を覚えた方が楽。
  • 上下のマージンは、大きい方を優先し相殺される。(p.147)

練習2：CSSコーディング・はじめの一歩 (20 / 20:00〜20:20)

練習1でマークアップしたXHTML文書にCSSを適用する。

ルール

  • 制限時間は10分間。
  • body要素に対して、「文字サイズ：100%」を定義する。
  • body要素に対して、「書体：サンセリフ系（ゴシック体）」を定義する。
  • 大見出しと中見出しは中央揃えにする。
  • 中見出しにマージンを設定し、本文との間に60ピクセルの余白をとる。
  • 本文の文字の色を濃いめのグレーにする。
  • 本文の行間を1文字分空ける。
  • 時間に余裕があれば、自由にデザインしてみる。

ダウンロード

休憩 (10 / 20:20〜20:30)

HTML: ブロックレベル要素・インライン要素 (30 / 20:30〜21:00) (p.54)

ブロックレベル要素

  • 「ひとつの独立したかたまり」という意味
  • h1〜h6, pなどなど
  • インライン要素やテキストを含むことができる
  • さらにブロックレベル要素を含むことができるものもある

インライン要素

  • 「行内の一部」という意味
  • strong, a, img, などなど
  • ブロックレベル要素に含まれる形式でしか使えない。（body要素の直接の子要素にはできない）

主要なブロックレベル要素 その1

h1, h2, h3: 大見出し、中見出し、小見出し (p.55)

<h1>個人情報保護規定</h1>
<p>株式会社ふくいWebデザイン（以下「当社」といいます）は、「個人情報の保護に関する法律」（以下、「法」といいます）に基づき、個人情報の適切な保護と利用に関する取組方針を制定し推進します。</p>
<h2>取組方針について</h2>
<p>当社は、個人情報の適切な保護と利用に関し、関連法令等に加えて、本ポリシーに定めた事項を遵守し、お客さまの個人情報の適切な保護と利用に努めるとともに、当社における個人情報保護の管理体制およびその取組みについて、継続的な改善に努めます。</p>
<h2>個人情報の利用目的について</h2>
<p>当社は、お客さまの個人情報について、利用目的を特定するとともに、法で定める場合等を除き、その利用目的の達成に必要な範囲内において利用いたします</p>

p: 段落（パラグラフ） (p.57)

  • どうしてもという理由がなければ、br要素による強制改行は入れない方がよい。

主要なインライン要素 その1

em, strong: 強調 (p.93)

<p>Webデザインコンクールで<strong>金賞</strong>を受賞しました！</p>
  • 強さは em（通常の強調） < strong（より強い強調）
  • 強調を一段階しか設定しない場合にはstrong要素だけを使えばよい。
  • 「太字は読みやすい」という理由でstorng要素でマークアップしてはいけない（視覚的に「太字にしたい」という理由だけでstrong要素を用いてはいけない）。

a: リンク (p.83)

<p><a href="http://www.google.co.jp">Google</a></p>
  • href属性: リンク先の文書のURI
パスの書き方

dir.png

base.htmlから1018.htmlへリンク
  • 絶対URI:href="http://www.sample.com/news/2007/1018.html"
  • 相対URI相対パス:href="./news/2007/1018.html" (./で同一階層に移動)
  • 相対URI絶対パス:href="/news/2007/1018.html"
index.htmlから1018.htmlへリンク
  • 相対URI相対パス:href="./2007/1018.html"
  • 相対URI絶対パス:href="/news/2007/1018.html"
index.htmlからbase.htmlへリンク
  • 相対URI相対パス:href="../base.html" (../で一つ上の階層に移動)
  • 相対URI絶対パス:href="/base.html"
1018.htmlからbase.htmlへリンク
  • 相対URI相対パス:href="../../base.html" (../../で二つ上の階層に移動)
  • 相対URI絶対パス:href="/base.html"
1018.htmlからindex.htmlへリンク
  • 相対URI相対パス:href="../"
  • 相対URI絶対パス:href="/news/"
  • target属性: リンク先の文書を表示させるウィンドウ名 (p.330)
    • 新規ウィンドウ: target="_blank"　※頻繁に使われるが、規格上は「非推奨」とされている。

img: 画像 (p.87)

財団法人ふくい産業支援センター

<h1><img src="http://www.fisc.jp/imgs/h1.gif" alt="財団法人ふくい産業支援センター" /></h1>
  • src属性: 画像ファイルのURI
  • alt属性: 代替テキスト　適切な代替テキストを入れる必要がある (p.89)
  • width属性やheight属性でサイズの指定も出来るが、適切な画像サイズ（実寸表示できるように）で編集しておくことが望ましい。

練習3：画像とリンクの挿入 (20 / 21:00〜21:20)

練習2でダウンロードしたXHTML文書 (lesson2.html) に画像を挿入し外部サイトへのリンクを付ける。

ルール

  • 制限時間は10分間。
  • アマゾンから書籍画像を探し、img要素を使って挿入する。挿入位置は本文の前とする。
  • img要素のsrc属性値は絶対URIで設定する。
  • 書籍画像に、商品ページへのリンクを設定する。

まとめ、質疑応答 (10 / 21:20〜21:30)

  • 見栄えの調整には、CSSを利用する。
  • font要素など、見栄えを調整するためにHTMLを使わない。
  • HTMLにはブロックレベル要素とインライン要素がある。
  • img要素には適切なalt属性を付ける。

レクチャ記録

ページの
先頭へ