Web 設計入門

(1)

Webデザイン実践

(2)

ページの設定

• ナビゲーションパート

• サイトID とグローバルメニュー

• コンテンツパート

• 適当なページに分割し，

ASCII 文字（半角英数）

でそ

れぞれのページにタイトルをつける

• ただし，最上位階層のページは常に「

index

」

(3)

ナビゲーションとコンテンツ

LOGO

about

LUNCH

DINNER

DRINK

access

Lorem ipsum

dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta

epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu.

At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te, delenit hendrerit sadipscing in his. Ad pro nostro detracto, hinc exerci duo ei. Quod oratio feugait vis et, mei rationibus inciderint cu, probo takimata sit no. Id mei aliquam accumsan, vim libris scripserit ne.

サイトID

コンテンツパート

サイト内で

常に表示

ナビゲーションパート

グローバルメニュー

(4)

構造化文書

• 構造化文書

• （ツリー）構造を示す表記法

を用いたテキスト文書

• 論文、学術書、新聞など

• 大見出し

• 中見出し

• 小見出し

• 中見出し

• 小見出し

• 大見出し

• 中見出し

• 小見出し

• 中見出し

(5)

マークアップ言語

• 構造化文書を表現する技術

• テキストに目印（タグ）をつけて意味付けを行う

• SGML(Standard Generalized Markup Language)

• HTML (Hyper Text Markup Language)

• XML (eXtensible Markup Language)

(6)

Web 標準技術

• ブラウザ戦争

• 各ブラウザの表示の相違

• 独自の HTML

• Web 標準化

• Jeffrey Zeldman ら

• W3C

[World Wide Web Consortium]

• Web標準規格の勧告

• WHATWG

[Web Hypertext Application Technology Working Group]

• Apple, Mozilla, Operaによって

設立

• W3C のオルタナティブとして

(7)

Web 標準（Web Standards）

• ユニバーサル・アクセス

環境，能力によらず，等しく同じ情報が得られる

（バリア・フリー）

• アクセシビリティ・ユーザビリティへの配慮

• 具体的な技術

• HTML 4.01

• XHTML 1.0/1.1

• CSS 2.0（CSS2.1）

• HTML5

• CSS3

(8)

広義のHTML5

• 広義のHTML5 は多くのWebテクノロジを実現する技術

群のこと。

HTML5

Semantics

Offline Storage

Multimedia

CSS3

3D

Device Access

20 THINGS I LEARNED ABOUT BROWSERS AND THE WEB

(9)

HTML5 に対応するブラウザ

• なるべく最新のブラウザを用いること

• 学内環境の Internet Explorer は一部 HTML5 に対応していな

い部分がある

• 講義では Google Chrome を用いる

• Internet Explorer では意図した表示にならないため、利用しないこと

(10)

(11)

HTML の仕組み

• テキスト書類

• 拡張子は「

.html

」

(12)

エディタ

• テキスト書類を編集するために

特化したソフトウェア

• 講義で利用するエディタは Brackets

• http://brackets.io/

(13)

エディタ

• エディタの機能である

シンタックス・カラリング

を用いると，

HTML のタグと地の文章が色分けされる

• 改行

やタブによる

字下げ

などが，可視化される

• 文字数のカウントや調整が楽

• 代表的なエディタ

• emacs, vi (UNIX 環境）

• メモ帳, 秀丸, TeraPad, NotePad++ (Windows 環境）

• mi, TextWrangler, jeditX (OSX 環境）

(14)

Webコーディングに特化したエディタ

• Brackets 以外の Web 作成に特化したエディタ

• Atom

• https://atom.io/

• SublimeText

• http://www.sublimetext.com/

(15)

【参考】Emmet

• エディタに組み込む Emmet というプログラムを用いると、

HTML や CSS の記述を簡易化することができる

• Emmet

• http://emmet.io/

• Adobe Creative Station 連載

HTML/CSS を爆速コーディング Emmet

•

(16)

Web オーサリングソフトウェア

• HTML のタグや CSS の扱いをよく理解していれば利

用してもよい

• Adobe Dreamweaver

• http://www.adobe.com/jp/products/dreamweaver/

• Blue Griffon

• http://www.bluegriffon.org/

• ただし、Web標準に準拠していないソフトウェア

も多く存在するためソースをよく確認すること

• Word のWebページモードの利用は厳禁

(17)

タグとは

• <要素名>

文字列

</要素名>

開始タグ

終了タグ

上記の書式を用いて任意の文字列を挟み込み、文書に構造を与

える

• 入れ子構造の書式を用いる

<p>

<a>

早稲田大学

</a>

のページへ

</p>

包含関係をつくるように記述する

(18)

template.html の扱い

• HTML5 の基本的な構造がすべて記載済み

• ひな形（template）

として利用する

• 保存する時は「

名前を付けて保存

」

• ファイル名は

ASCII 文字

，拡張子は「

.html

」

• トップページのファイル名は「

index.html

」

(19)

Emmet を利用したHTMLテンプレートの記述

• Bracket に Emmet をインストールしている場合（学内PCはイ

ンストール済み）、簡単なショートカットでテンプレートを記

述することができる

• ファイルを新規作成し、ファイル名（拡張子を .html とする）

をつけて保存する

• 「!」と入力して TAB キーを押すとHTMLの基本構造が記述さ

れる

<!DOCTYPE html>

<html lang

=

”en">

<head>

<meta charset

=

"UTF-8">

<title>

Document

</title>

</head>

(20)

【注意】

• ブラウザでソースを表示させるとエディタ「メモ帳」でソース

が表示されるが、そのまま編集作業をおこなわないこと

• メモ帳で編集を継続すると？

• HTML が独自の Microsoft 仕様の HTML に書き換えられる

• 文字コードが Shift_JIS に変換される

• 誤って上書き保存すると修復は困難なので、絶対にメモ帳で編

集を行わないように

(21)

HTML5 の基本構造

• DOCTYPE 宣言

• 文書型の宣言

• HTML のバージョン

• <html>

• HTMLで記述される範囲

• <head>

• 文書全体の設定

• 文字コードやタイトル、外部

ファイルとの連結など

• <body>

• 表示される本文部

<!DOCTYPE html>

<html lang

=

"ja">

<head>

<meta charset

=

"UTF-8">

<title>

タイトル

</title>

</head>

<body>

本文

</body>

</html>

(22)

文字コード

• 文字コード（次回、くわしく説明します）

• Shift_JIS

• JIS

• EUC

• Unicode(UTF-8)

• template.html は UTF-8

(23)

タイトル

• title

• ページのタイトルを設定する

• ブックマークや検索結果にはこのタイトルが表示される

(24)

ナビゲーション、メイン

• ナビゲーションパートは

nav

、

そのページの主要コンテンツ

となるコンテンツパートは

main

を用いる

• main

は1ページにつき1回し

かつかってはならない

LOGO

about LUNCH DINNER DRINK access

Lorem ipsum

dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu. At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te, delenit hendrerit sadipscing in his. Ad pro nostro detracto, hinc exerci duo ei. Quod oratio feugait vis et, mei rationibus inciderint cu, probo takimata sit no. Id mei aliquam accumsan, vim libris scripserit ne.

<nav>

(25)

LOGO

about LUNCH DINNER DRINK access

Lorem ipsum

dicat saepe virtute te sea, ex eius debet eripuit has. Partiendo scriptorem mei at. Sea maiorum aliquyam signiferumque ne. Id sit aeque repudiare, no his enim porro augue, cu prompta epicurei definiebas sit. Est cibo assum temporibus cu, cum feugait singulis eu. At sea odio nusquam recusabo, pri ne epicuri consetetur, veniam minimum recusabo per an. Eam justo consulatu ad, postulant sadipscing at sed, persius torquatos sed id. Vix et partiendo reformidans accommodare, usu error erant signiferumque te,

セクション

• section

• 本文中、意味の上でひとまとまり

の文章はセクションとして扱う

<main>

<section>

<main>

<section>

Lorem ipsum dicat saepe

virtute te sea, ex eius

debet eripuit has.

</section>

</main>

(26)

見出し

• h1

,

h2

,

h3

…

h6

• 大きいレベルの見出しから順に h1, h2…

Webデザイン実践

HTMLの基礎

h1 要素は他に比べて文字が大きく表示される傾向にあるが、文字

の大きさを指定するために見出しタグを使うのではない。

あくまでも、見出しのレベルをつけるためにタグ付けを行う。

<h1>

Webデザイン実践

</h1>

<h2>

HTMLの基礎

</h2>

(27)

段落

• p

(paragraph)

• 文章は段落単位で記述する

<h1>

伽藍方式とバザール方式

</h1>

<p>

Linux は破壊的存在なり。インターネットのかぼそい糸だけで結ばれた、地

球全体に散らばった数千人の開発者たちが片手間にハッキングするだけで、

超一流の OS が魔法みたいに編み出されてしまうなんて、ほんの 5 年前でさえ

だれも想像すらできなかったんだから。

_</p>

<p>

ぼくもできなかった。Linux がぼくのレーダー画面に泳ぎ着いたのは 1993

年の頭だったけれど、その頃ぼくはすでに Unix やフリーソフト開発に 10 年以

上も関わってきていた。1980 年代半ば、ぼくは最初期の GNU 協力者の一人

だったし、ネット上にかなりのフリーソフトもリリースして、いまでも広く

使われているようなプログラムをいくつか(nethack、 Emacs VC モードと GUD

(28)

HTML 記述時のコツ

• HTML ソース（HTML タグで記述されたテキスト文書のこ

と）に、

• 2回以上の半角スペース

• タブによるインデント

• 改行

を含んでも、Web ページ上には反映されない

• コーディング時に適宜、改行とインデントを行うと後で判読し

やすい

(29)

コーディングの練習

• ページの名称をつけた HTML 書類を作成

• temlplate.html から「名前を付けて保存…」

• ツリー構造のコンテンツパートをセクションとし、本文の項目

を見出しタグ群で記述

• 最下階層の項目については、

<p>

タグで説明文を挿入

Web 設計入門

Webデザイン実践

ページの設定

• ナビゲーションパート

• サイトID と グローバルメニュー

• コンテンツパート

• 適当なページに分割し，

ASCII 文字（半角英数）

でそ

れぞれのページにタイトルをつける

• ただし，最上位階層のページは常に「

index

」

ナビゲーションとコンテンツ

LOGO

about

LUNCH

DINNER

DRINK

access

Lorem ipsum

サイトID

コンテンツパート

サイト内で

常に表示

ナビゲーションパート

グローバルメニュー

構造化文書

• 構造化文書

• （ツリー）構造を示す表記法

を用いたテキスト文書

• 論文、学術書、新聞など

• 大見出し

• 中見出し

• 小見出し

• 小見出し

• 中見出し

• 小見出し

• 大見出し

• 中見出し

• 小見出し

• 中見出し

マークアップ言語

• 構造化文書を表現する技術

• テキストに目印（タグ）をつけて意味付けを行う

• SGML(Standard Generalized Markup Language)

• HTML (Hyper Text Markup Language)

• XML (eXtensible Markup Language)

Web 標準技術

• ブラウザ戦争

• 各ブラウザの表示の相違

• 独自の HTML

• Web 標準化

• Jeffrey Zeldman ら

• W3C

[World Wide Web Consortium]

• Web標準規格の勧告

• WHATWG

• Apple, Mozilla, Operaによって

設立

• W3C のオルタナティブとして

Web 標準（Web Standards）

• ユニバーサル・アクセス

環境，能力によらず，等しく同じ情報が得られる

（バリア・フリー）

• アクセシビリティ・ユーザビリティへの配慮

• 具体的な技術

• HTML 4.01

• XHTML 1.0/1.1

• CSS 2.0（CSS2.1）

• HTML5

• CSS3

広義のHTML5

• 広義のHTML5 は多くのWebテクノロジを実現する技術

群のこと。

HTML5

Semantics

Offline Storage

Multimedia

CSS3

• サイトID とグローバルメニュー