XHTML+CSS コーディング習得コース 第1回：イントロダクション、ワークショップ

2007年10月11日

アジェンダ

  • はじめに (15)
  • Webデザインに必要な知識 (15)
  • Web標準とは 〜XHTML, CSS, javascript それぞれの役割〜 (15)
  • ワークショップ：身近なデザインから「文書構造」と「視覚表現」を抜き出してみよう (25)
  • 休憩 (10)
  • XHTMLの書式と構造 (30)
  • 制作環境（Mac/Win) (30)
  • まとめ、質疑応答 (10)

はじめに (15)

自己紹介（ライブ・コーディングにて）

吉村マサテル

1〜6回目の主な内容

  • Web標準とは 〜XHTML, CSS, javascript それぞれの役割〜
  • 制作の際、便利なツール(Firefoxエクステンションなど)の紹介
  • XHTMLの書式と構造
  • CSSの書式
  • CSSによるグラフィックデザイン
  • CSSによるブログのデザイン
  • CSSハック(各ブラウザのバグに対応する)
  • javascriptライブラリを利用してユーザビリティを向上する

そのほか、随時演習を行います。

学んだことを、いかすために

  1. 目標を明確にする。 →「今年中に自社のWebサイトをデザインする」
  2. 継続的にコードを書く習慣をつくる。 →「自分のブログを立ち上げる」
  3. 苦手意識を持たない。お気楽に。 →全部覚えなくて良い。忘れたら、都度調べれば良い。
  4. 困ったら、誰かに聞く。 →検索する。仕事仲間に聞く。講師に聞く。
  5. 効率良く、最新情報を追いかける。 →RSSリーダーの活用

Webデザインに必要な知識 (15)

  • ページを構成する「情報」のデザイン
  • 「見た目」のデザイン
  • 「使える」デザイン（ユーザビリティ）
  • 「伝わる」デザイン（アクセシビリティ）
  • SEO（検索エンジンに対するアクセシビリティ）
  • HTML、CSSのコーディング
  • ブログ系CMS（Movable Typeなど）のカスタマイズ
  • ビデオ、Flashのオーサリング
  • javascript、ActionScriptのコーディング

推薦図書

ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

Web標準とは (15)

Web標準とは (p.12)

Webで標準的に利用される技術の総称。W3Cなどの標準化団体が取りまとめた技術仕様やガイドラインを指す。

  • 話題の対象は、フロントエンド技術の「HTML」と「CSS」が中心。
  • 「swf (flash)」や「rss, atom (feed)」も、Webで標準的に使われる技術。

XHTML, CSS, javascript それぞれの役割 (p.20)

HTML
文書構造を明確にする（見出し、段落、箇条書き、表組み、引用、画像、強調など）
CSS
視覚表現を付与する（色、文字サイズ、書体、余白、枠線、背景など）
javascript
使用感を向上させる（スムーススクロール、タブインターフェース、ドラッグ操作など）

ワークショップ：身近なデザインから「文書構造」と「視覚表現」を抜き出してみよう（25）

  • デザインよって調整された表現や情報そのものが持つ意味を出来るだけ多く書き出してみる。
  • 2人1組のチームで実施。
  • 専門用語を使わなくてもよい。たくさん書き出すことを最優先する。
  • 制限時間は10分。
  • 終了後、ほかのチームと分析結果を見比べてみる。
  • 分析したものが文書構造と視覚表現のどちらに該当するか考えてみる。

休憩（10)

休憩

XHTMLの書式と構造 (30)

HTML/XHTMLとは (p.20)

HyperText Markup Language / Extensible HyperText Markup Language の略で、「文書構造」をコントロールするための言語

  • 文書のタイトルを示す → title
  • 大見出しであることを示す → h1
  • ほかの文書へリンクする → a

XHTMLの書式 (p.38)

<要素名>〜</要素名>と記述する

  • ○ <p>つらつらつらつら</p>
  • × <p>つらつらつらつら

<要素名 属性名1="属性値1" 属性名2="属性値2"> 〜内容〜 </要素名>

  • ○ <a href="http://www.d-improvement.jp/" target="_blank">株式会社デザイン・インプルーブメントのWebサイトへGO!</a>
  • × <a href="http://www.d-improvement.jp/"target=_blank>株式会社デザイン・インプルーブメントのWebサイトへGO!</a>

終了タグのない要素(img, brなど)については、<要素名 />と記述する

  • ○ <img src="/images/logo.png" alt="株式会社ふくいWebデザイン" />
  • × <img src="/images/logo.png" alt="株式会社ふくいWebデザイン" >
  • ○ <br />
  • × <br>

要素名、属性名は小文字で記述する

  • ○ <img src="/images/logo.png" alt="株式会社ふくいWebデザイン" />
  • × <IMG SRC="/images/logo.png" ALT="株式会社ふくいWebデザイン" />

XHTMLの例


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-type" content="text/css" />
  <title>会社紹介:株式会社ふくいWebデザイン</title>
  <meta name="description" content="株式会社ふくいWebデザインの概要、沿革、理念など。" />
  <meta name="keywords" content="福井,webデザイン, ホームページ制作" />
  <link rel="stylesheet" href="style.css" type="text/css" media="screen,tv" />
  <link rel="stylesheet" href="print.css" type="text/css" media="print" />
</head>

<body>
  <h1>株式会社ふくいWebデザインの会社紹介</h1>
  <p>本文をつらつらと。□ ■□□□□ ■□□□□ ..................  ■□□□</p>
  <p>段落かえてつらつらと。□ ■□□□□ ■□□□□ ..................  ■□□□</p>
  <address>作成日:2007年00月00日<br />作成者:猫背ヒロシ</address>
</body>

</html>

XHTMLの基本的な構造 (p.41)


1	<?xml version="1.0" encoding="UTF-8"?>
2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4	<head>
5	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6	  <meta http-equiv="Content-Style-type" content="text/css" />
7	  <title>会社紹介:株式会社ふくいWebデザイン</title>
8	  <meta name="description" content="株式会社ふくいWebデザインの概要、沿革、理念など。" />
9	  <meta name="keywords" content="福井,webデザイン, ホームページ制作" />
10	  <link rel="stylesheet" href="style.css" type="text/css" media="screen,tv" />
11	  <link rel="stylesheet" href="print.css" type="text/css" media="print" />
12	</head>
13	<body>
14	  <h1>株式会社ふくいWebデザインの会社紹介</h1>
15	  <p>本文をつらつらと。□ ■□□□□ ■□□□□ ..................  ■□□□</p>
16	  <p>段落かえてつらつらと。□ ■□□□□ ■□□□□ ..................  ■□□□</p>
17	  <address>作成日:2007年00月00日<br />作成者:猫背ヒロシ</address>
18	</body>
19	</html>
  • 1. xml: XML宣言
  • 2. DOCTYPE: 文書型宣言
  • 3〜9. html: 文書がHTML/XHTMLであることを示す, 名前空間と言語コード
  • 4〜12. head: 文書の基本情報（基本的に画面には表示されない）
    • 7. title: タイトル（文書の内容を具体的に示す）
    • 8,9. meta: メタ（文字コード、説明文、キーワード）
    • 10. link: ナビゲーション、外部スタイルシートへのリンク
  • 13〜18. body: 文書の本文（画面に表示される内容）
    • 14. h1〜h6: 見出し
    • 15,16. p: 段落
    • 17. address: 作成者情報

※はじまりの部分はほとんどが定形文。My雛形を作っておけば、毎度書く必要はない。

制作環境 (Mac/Win)

ブラウザ：Firefox

  • 正しい文法で書いたHTML, CSSを正確に表示する。
  • 機能拡張（アドオン）を追加することで、開発効率を上げることができる。

Firefoxアドオン(機能拡張)

コーディングエディタ

まとめ、質疑応答 (10)

  • HTMLの役割:□□□□を明確にする。
  • CSSの役割:□□□□を付与する。
  • Firefox+アドオンを利用することで、作業効率を上げることができる。

レクチャ記録

ページの
先頭へ