Web 設計入門

Size: px

Start display at page:

Download "Web 設計入門"

さみらすずがみね
5 years ago
Views:

1 Web デザイン実践 #2-1 構造化文書 HTML5 (1) D.Mitsuhashi 1

2 ページの設定ナビゲーションパートサイト ID とグローバルメニューコンテンツパート適当なページに分割し,ASCII 文字 ( 半角英数 ) でそれぞれのページにタイトルをつけるただし, 最上位階層のページは常に index D.Mitsuhashi 2

3 ナビゲーションとコンテンツ LOGO ナビゲーションパートサイトID グローバルメニュー 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. コンテンツパート D.Mitsuhashi 3

4 構造化文書構造化文書 ( ツリー ) 構造を示す表記法を用いたテキスト文書論文学術書新聞など大見出し中見出し小見出し小見出し中見出し小見出し大見出し中見出し小見出し中見出し D.Mitsuhashi 4

5 マークアップ言語構造化文書を表現する技術テキストに目印 ( タグ ) をつけて意味付けを行う SGML(Standard Generalized Markup Language) HTML (Hyper Text Markup Language) XML (extensible Markup Language) XHTML(eXtensible Hyper Text Markup Language) D.Mitsuhashi 5

Application Technology Working Group] Apple, Mozilla, Opera によって設立 W3C

6 Web 標準技術ブラウザ戦争各ブラウザの表示の相違独自の HTML Web 標準化 Jeffrey Zeldman ら W3C [World Wide Web Consortium] Web 標準規格の勧告 WHATWG [Web Hypertext Application Technology Working Group] Apple, Mozilla, Opera によって設立 W3C のオルタナティブとしての HTML HTML5 Web の進化 D.Mitsuhashi 6

7 Web 標準 (Web Standards) ユニバーサルアクセス環境, 能力によらず, 等しく同じ情報が得られる ( バリアフリー ) アクセシビリティユーザビリティへの配慮具体的な技術 HTML 4.01 XHTML 1.0/1.1 CSS 2.0(CSS2.1) HTML5 CSS3 D.Mitsuhashi 7

Access 20 THINGS I LEARNED ABOUT BROWSERS AND THE

8 広義の HTML5 広義の HTML5 は多くの Web テクノロジを実現する技術群のこと HTML5 Semantics Offline Storage Multimedia CSS3 3D Device Access 20 THINGS I LEARNED ABOUT BROWSERS AND THE WEB D.Mitsuhashi 8

9 HTML5 に対応するブラウザなるべく最新のブラウザを用いること学内環境の Internet Explorer は一部 HTML5 に対応していない部分がある講義では Google Chrome を用いる Internet Explorer では意図した表示にならないため利用しないこと D.Mitsuhashi 9

10 HTML5 基礎 D.Mitsuhashi 10

11 HTML の仕組みテキスト書類拡張子は.html ファイル名は常に ASCII 文字 ( 半角英数 ) D.Mitsuhashi 11

12 エディタテキスト書類を編集するために特化したソフトウェア講義で利用するエディタは Brackets D.Mitsuhashi 12

13 エディタエディタの機能であるシンタックスカラリングを用いると, HTML のタグと地の文章が色分けされる改行やタブによる字下げなどが, 可視化される文字数のカウントや調整が楽代表的なエディタ emacs, vi (UNIX 環境 ) メモ帳, 秀丸, TeraPad, NotePad++ (Windows 環境 ) mi, TextWrangler, jeditx (OSX 環境 ) D.Mitsuhashi 13

14 Web コーディングに特化したエディタ Brackets 以外の Web 作成に特化したエディタ Atom SublimeText D.Mitsuhashi 14

参考 Emmet エディタに組み込む Emmet というプログラムを用いると HTML や CSS の記述を簡易化することができる Emmet http://emmet.

15 参考 Emmet エディタに組み込む Emmet というプログラムを用いると HTML や CSS の記述を簡易化することができる Emmet Adobe Creative Station 連載 HTML/CSS を爆速コーディング Emmet D.Mitsuhashi 15

16 Web オーサリングソフトウェア HTML のタグや CSS の扱いをよく理解していれば利用してもよい Adobe Dreamweaver Blue Griffon ただし Web 標準に準拠していないソフトウェアも多く存在するためソースをよく確認すること Word の Web ページモードの利用は厳禁 D.Mitsuhashi 16

17 タグとは < 要素名 > 文字列 </ 要素名 > 開始タグ終了タグ上記の書式を用いて任意の文字列を挟み込み文書に構造を与える入れ子構造の書式を用いる <p><a> 早稲田大学 </a> のページへ </p> 包含関係をつくるように記述する D.Mitsuhashi 17

18 template.html の扱い HTML5 の基本的な構造がすべて記載済みひな形 (template) として利用する保存する時は名前を付けて保存ファイル名は ASCII 文字, 拡張子は.html トップページのファイル名は index.html D.Mitsuhashi 18

19 Emmet を利用した HTML テンプレートの記述 Bracket に Emmet をインストールしている場合 ( 学内 PC はインストール済み ) 簡単なショートカットでテンプレートを記述することができるファイルを新規作成しファイル名 ( 拡張子を.html とする ) をつけて保存する! と入力して TAB キーを押すとHTMLの基本構造が記述される使用言語設定が英語 en となっているので日本語 ja に変更する必要がある <!DOCTYPE html> <html lang= en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> </body> </html> D.Mitsuhashi 19

20 注意ブラウザでソースを表示させるとエディタメモ帳でソースが表示されるがそのまま編集作業をおこなわないことメモ帳で編集を継続すると? HTML が独自の Microsoft 仕様の HTML に書き換えられる文字コードが Shift_JIS に変換される誤って上書き保存すると修復は困難なので絶対にメモ帳で編集を行わないように D.Mitsuhashi 20

21 HTML5 の基本構造 DOCTYPE 宣言文書型の宣言 HTML のバージョン <html> HTML で記述される範囲 <head> 文書全体の設定文字コードやタイトル外部ファイルとの連結など <body> 表示される本文部 <!DOCTYPE html> <html lang="ja"> <head> </html> </head> <body> </body> <meta charset="utf-8"> <title> タイトル </title> 本文 D.Mitsuhashi 21

22 文字コード文字コード ( 次回くわしく説明します ) Shift_JIS JIS EUC Unicode(UTF-8) template.html は UTF-8 D.Mitsuhashi 22

23 タイトル title ページのタイトルを設定するブックマークや検索結果にはこのタイトルが表示される <title>webデザイン実践</title> D.Mitsuhashi 23

24 ナビゲーションメインナビゲーションパートは nav そのページの主要コンテンツとなるコンテンツパートは main を用いる main は 1 ページにつき 1 回しかつかってはならない <nav> <main> 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. D.Mitsuhashi 24

25 セクション section 本文中意味の上でひとまとまりの文章はセクションとして扱う <main> <section> Lorem ipsum dicat saepe virtute te sea, ex eius debet eripuit has. </section> </main> LOGO about LUNCH DINNER DRINK access <main> 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. <section> 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. D.Mitsuhashi 25

26 見出し h1, h2, h3 h6 大きいレベルの見出しから順に h1, h2 <h1>web デザイン実践 </h1> <h2>html の基礎 </h2> Web デザイン実践 HTML の基礎 h1 要素は他に比べて文字が大きく表示される傾向にあるが文字の大きさを指定するために見出しタグを使うのではないあくまでも見出しのレベルをつけるためにタグ付けを行う D.Mitsuhashi 26

27 段落 p (paragraph) 文章は段落単位で記述する <h1> 伽藍方式とバザール方式 </h1> <p>linux は破壊的存在なりインターネットのかぼそい糸だけで結ばれた地球全体に散らばった数千人の開発者たちが片手間にハッキングするだけで超一流の OS が魔法みたいに編み出されてしまうなんてほんの 5 年前でさえだれも想像すらできなかったんだから </p> <p> ぼくもできなかった Linux がぼくのレーダー画面に泳ぎ着いたのは 1993 年の頭だったけれどその頃ぼくはすでに Unix やフリーソフト開発に 10 年以上も関わってきていた 1980 年代半ばぼくは最初期の GNU 協力者の一人だったしネット上にかなりのフリーソフトもリリースしていまでも広く使われているようなプログラムをいくつか (nethack Emacs VC モードと GUD モード xlife など ) 単独または共同で開発してきただからもうやり方はわかってるもんだと思いこんでいた </p> D.Mitsuhashi 27

28 HTML 記述時のコツ HTML ソース (HTML タグで記述されたテキスト文書のこと ) に 2 回以上の半角スペースタブによるインデント改行を含んでも Web ページ上には反映されないコーディング時に適宜改行とインデントを行うと後で判読しやすい D.Mitsuhashi 28

29 コーディングの練習ページの名称をつけた HTML 書類を作成 temlplate.html から名前を付けて保存ツリー構造のコンテンツパートをセクションとし本文の項目を見出しタグ群で記述最下階層の項目については <p> タグで説明文を挿入 D.Mitsuhashi 29

Web04

Web04 情報処理技法 ( マルチメディアと表現 )I 第 4 回構造化書 HTML(1) D.Mitsuhashi 1 ページの設定ナビゲーションパートサイト ID とグローバルメニューコンテンツパート適当なページに分割し,ASCII 字 ( 半英数 ) でそれぞれのページにタイトルをつけるただし, 最上位階層のページは常に index D.Mitsuhashi 2 ナビゲーションとコンテンツ