タグ 付 きテキストのお 話 1 時 間 目 WEB でのまーくあっぷらんげーじ
うさこ(うえだうさこ) usakororin 1999 年 imacdv 購 入 web 制 作 にハマる 2001 年 印 刷 会 社 に 入 社 2003 年 web 制 作 会 社 トゥーウェイズ 立 ち 上 げ 2004 年 大 阪 芸 術 大 デザイン 学 科 入 学 2010 年 電 子 書 籍 の 勉 強 会 イーパ 部 in 大 阪 を 立 ち 上 げ
タグって マークアップって どういうこと?というのを WEBを 例 にお 勉 強
タグって なぁに?
タグで コンテンツに 意 味 を 持 たせる ブラウザは どのようにwebページを 理 解 する? ここはページのタイトルですよ! とわかる 目 印 を 付 けてあげる その 目 印 がタグ 日 本 語 で 言 ったら 札 です
WEB の 世 界 では HTML でタグ 付 け 基 本 形 <タグ>コンテンツ</タグ> 目 印 を 付 けたい 箇 所 をタグで 挟 む
WEBページの 材 料 について
Web ページの 材 料 HTML : ページの 内 容 このふたつは 単 なるテキストです HTML ファイルさえあれば ページは 作 れます CSS : HTMLに 装 飾 をするもの その 他 画 像 動 画 FLASH JavaScript コレもテキストです
デモ1 HTMLだけで 書 かれたコンテンツ
デモ2 CSSをあててみる
デモ3 別 のCSSをあててみる
HTMLについて DTP ということなので web にありがち のリンクやフォームなどではなく 文 書 レイアウト 部 分 にしぼってお 話 しませう
HTMLってひっくるめていうけど 細 かくいうと HTMLとかXHTMLとかある バージョンも 色 々ある 拡 張 子 は.html ときに.htm 場 合 により.xhtml
HTMLとは H はいぱーてきすと ypertext M まーくあっぷ arkup L ら ん げ ー じ anguage コンテンツをタグによって 意 味 付 けし たもの 現 在 使 われているのは HTML4.01 とか HTML5 かな? XHTML の 方 が 多 い 気 がします
XHTMLとは E いくすてんしぶる xtensible HyperText Markup Language HTMLをXMLのルールに 合 うようにし たもの ほんのり 書 き 方 がシビア 現 在 使 われているのは HTML1.0 とか 1.1 そろそろ 5 も? 2 は 消 えちゃいました
HTMLファイルの 構 成
<html> <head> 表 に 見 えない 箇 所 </head> <body> ページのコンテンツ </body> ざっくり 書 くとこ んな 感 じ 全 体 が<html>と</ html>ではさまれ その 中 にheadと bodyがある </html> head 内 には タイトル みんな 大 好 きな 文 字 コード 指 定 など ちなみに 現 在 では UTF-8 が 主 流 ですが ちょっと 前 は Shift_JIS とかプ ログラム 絡 む 場 合 は EUC-JP なんかも 使 われていました web サーバは Linux ということが 多 いので 最 終 的 に 改 行 コードは LF かな
ページコンテンツのタグ 付 け まずは 段 落 から 一 番 使 うかなぁ
<p> これは 段 落 を 表 します </p> 開 始 タグ 内 容 要 素 終 了 タグ コンテンツをタグで 挟 み 込 む 要 素 名 は 基 本 的 に 英 単 語 の 略 p:paragraph( 段 落 )
見 出 し HTMLは 見 た 目 ではなく コンテンツの 意 味 によって タグ 付 けを 行 います
<h1> これは 見 出 しです</h1> h1:heading( 見 出 し) h1 h6まであります InDesignでは 段 落 スタイルでひとまと めだけど HTMLでは 段 落 と 見 出 し は 区 別 されます
ルビ 読 めないんだもの
<ruby> <rb> 有 紗 子 </rb> <rp>(</rp> <rt>うさこ</rt> <rp>)</rp> 表 示 例 有 紗 子 (うさこ) または う さ こ 有 紗 子 </ruby> ブラウザによる 表 記 の 違 い めっちゃ 面 倒!
改 行 から 閉 じタグがない 空 要 素 タグ
<p>コツコツ <br /> 廊 下 から 足 音 が 聞 こ える </p> 表 示 例 コツコツ 廊 下 から 足 音 が 聞 こえる br:break InDesignの 強 制 改 行 空 要 素 なので 閉 じタグ 無 し XHTMLでは 閉 じタグが 必 須 なので タグの 最 後 に / をつける XML のルールでは <br></br> っていう 内 容 が 空 っぽ 状 態 で 良 いらしいけど それの 短 縮 系 で 書 きます ブラウザの 暴 走?を 避 けるため / の 前 には 半 角 スペース
属 性 要 素 のこまごま 名 前 難 しそうだよねぇ そんなに 身 構 えないでね
属 性 とその 値 <p class="lead">ここに 内 容 </p> 要 素 に 属 性 がつくことがある つけられる 属 性 は 決 まっている 要 素 によって 必 須 の 属 性 もある
画 像 必 須 属 性 を 持 つ 要 素
<img src="photo.png" alt=" 写 真 " /> src: 画 像 パス( 場 所 ) alt: 代 替 文 字 上 記 2 属 性 は 必 須 width heightは 任 意 だがよくつける 空 要 素 なので 閉 じタグ 無 し 画 像 パス は html ファイルからの 相 対 パスまたは サーバのルートか らの 絶 対 パス 上 のまたは http ではじまる url( コレも 絶 対 パスと 呼 ぶ) の 3 パターンの 方 法 があります
コメント 見 せたかないけど 書 いときたい アプリケーションが 勝 手 に 書 いたりもする ので 一 応 覚 えておくと 良 いと 思 います
<!-- ココは 表 示 されません --> <p> 募 集 中!</p> <!--<p> 締 め 切 りまし 表 示 例 募 集 中! た </p>--> 一 時 的 に 隠 しておきたい 表 記 ソース 整 理 のため アプリケーションが 書 き 出 すコメント 等 があります ソース 見 たら 見 られちゃうから 注 意
フォント 色 やサイズを 設 定 したい
<font> </font> <font color="#f00" size="+1"> 久 々に</ 表 示 例 久 々に 使 うぜ font> 使 うぜ 設 定 できる 属 性 size color faceなど 現 在 主 流 の HTML/XHTML では 廃 止 見 た 目 は CSS で 設 定 します
ブロック 要 素 とインライン 要 素 また 新 しい 言 葉 ですが イ ンデザインで 考 えると 簡 単!
h1 h6 pなど ブロック 要 素 表 示 (cssでどうとでもなります) 左 右 いっぱいになる タグの 前 後 で 改 行 される
インライン 要 素 strong font rubyなど 文 章 中 の 一 部 分 に 反 映 される
インライン 要 素 の 例
強 調 <strong> <p>お 申 し 込 みは <strong>3 月 18 日 </strong> 締 め 表 示 例 お 申 し 込 みは3 月 18 日 締 め 切 りです! 切 りです!</p>
InDesignで 考 えると 解 りやすい 段 落 スタイル ブロック 要 素 文 字 スタイル インライン 要 素
div 要 素 とspan 要 素 特 別 な 意 味 を 持 たない 要 素 HTML は 意 味 付 けだけど 必 要 な 場 面 があるのです
div 要 素 (ブロック 要 素 ) <div id="header"> <h1> 見 出 し</h1> <p> 文 章 </p> レイアウト 目 的 な どで 一 部 コンテン ツをまとめる </div> HTML5では headerなどの 要 素 があります
span 要 素 (インライン 要 素 ) <p> 例 えば 文 章 の 一 部 を<span> 赤 く </span>したい 時 なんかに 使 えます ね!</p> 部 分 的 に 文 字 に 変 化 をさせたいときに 使 います 体 裁 装 飾 は CSS で 設 定 します 単 なる 目 印
class 属 性 とid 属 性
イメージとしては InDesignで 複 数 の 段 落 に 段 落 スタ イル で 設 定 したスタイルをかける そのスタイル 名 の 設 定 方 法
class 属 性 ページに 何 度 でも 同 じ 名 前 のものが 使 える 段 落 スタイル 名 と 同 じようなもの <p class="photo"> <img src="photo.png" alt="にゃん"> </p> ファイル 名 もですが タグもクラス 名 も 全 部 半 角 英 数 字 で 書 きます 代 替 テキストと かコンテンツはもちろん 日 本 語 OK
大 枠 のレイアウトに 利 用 されることが 多 い id 属 性 <div id="header"> </div> id="header"を 設 定 できるのは1ペー ジに 一 カ 所 だけ あとは アンカー( ページ 内 リンク) の 設 定 にも 利 用 します タグは 他 にも 色 々あるけど よく 使 うのはあとは リストとテーブルくらいです 気 軽 にチャレンジ!
CSSについて
CSSってなぁに?
CSSとは C かすけーでぃんぐ ascading S すたいる tyle S し ー と heet HTMLに 記 述 されたタグ 等 に 対 して 装 飾 を 指 定 するもの
HTMLでも 文 字 の 色 とか 変 えられたやん?
役 割 分 担 HTML :コンテンツに 対 する 意 味 付 け CSS : 見 え 方 を 設 定 HTMLに 装 飾 のデータを 入 れちゃう と データの 流 用 がしにくい 更 新 性 が 悪 いのです
CSSってどう 書 くの?
p { color : #444 ; } セレクタ プロパティ 値 セレクタを 複 数 設 定 す る 場 合 p,ul,li など カンマで 区 切 る スタイルを 複 数 設 定 する 場 合 プロパティ: 値 ; を 複 数 記 述 CSS もテキストファイルです セレクタは セレクトするもの って 考 えたら 解 りやすいかも
CSSをHTMLに 反 映 させるには? 3 つあるけど 今 回 はひとつ
別 ファイルに 記 述 して 呼 び 出 す style.css 内 p {color:#444; } HTML 側 ヘッダ 内 <link rel="stylesheet" type="text/ css" href="style.css" media="all" /> HTML ファイル 内 にいくつ 設 定 しても OK メディアタイプは 色 々 設 定 できて 面 白 いよ! screen と print はよく 使 います
セレクタについて CSS Selectors Level3 http://www.w3.org/tr/selectors/
p { color:#444; } ある 要 素 に 反 映 p 要 素 に 反 映 される p span { color:#f00; } p 要 素 の 中 にある span 要 素 に 反 映 さ れる
id 属 性 に 反 映 #header { color:#444; } id = "header"が 設 定 された 要 素 に 反 映 される div#header { color:#444; } id = "header"が 設 定 された div 要 素 に 反 映 される
class 属 性 に 反 映.photo { border:solid 1px #f00; } class = "photo"が 設 定 された 要 素 に 反 映 される p.photo { border:solid 1px #f00; } class = "photo"が 設 定 された p 要 素 に 反 映 される セレクタは 他 にも 沢 山 あって 色 んな 選 択 ができて 例 え ばドロップキャプとかも 表 現 できます
レイアウト 周 り
レイアウトでよく 使 うプロパティ width : 幅 height: 高 さ margin:マージン padding: 内 側 余 白 display: 表 示 形 態 float: 浮 かせて 寄 せる background: 背 景 border: 境 界 まだまだあるけ ど 書 ききれません
背 景 画 像 デザイン 上 の 装 飾 はHTML 上 に 画 像 と して 置 かずに 背 景 として 設 定 する body { background-image: url(bg.png); } CSS3では 複 数 の 背 景 画 像 が 設 定 できる 例 えば 飾 り 罫 だとか リストのポチっとしたアイコンなど コンテンツとしてい 身 をもたないものは HTML に 置 くのではなく CSS に 設 定 しちゃう リストアイコンは css で 設 定 があるけど 空 きなどがブラウザによってまちまちなので 背 景 にす ることが 多 いです モダンブラウザだと 疑 似 クラスセレクタ :before なんかで 代 用 もできます
背 景 画 像 を 使 ったデモ
文 字 周 り
文 字 表 現 でよく 使 うプロパティ font-size : 文 字 サイズ color : 文 字 色 line-height : 行 の 高 さ font-weight : 文 字 の 太 さ text-decoration : 文 字 装 飾 ( 下 線 等 ) text-align : 文 字 揃 え text-indent:インデント まだまだあるけど 書 ききれません
どんなことができるかデモ
後 で 困 らないように
class 名 も 意 味 でつけよう 価 格 青 字 にしといて <span class="blue"> 500 円 </span> span.blue { color : blue; } やっぱり 赤 で! <span class="blue"> 500 円 </span> span.blue { color : red; } 後 はメニューとか leftmenu が 右 にくる とか ちょっと 気 持 ち 悪 いことになります
タグ 付 けとコーディングの 重 要 性
HTML CSS バージョンの 移 り 変 わり
2001 年 頃 テーブルレイアウト 2004 年 頃 XHTML+CSS 増 える MovableTypeの 流 行 とSEO( 検 索 エンジン 最 適 化 )NN4.7 切 り 捨 て 2011 年 頃 HTML5+CSS3 スマートフォンの 流 行 で 軽 量 で 装 飾 ができる CSS3の 利 用
タグ 付 けしたら 何 かいいことがあるん?
1) 内 容 を 解 釈 できる 2)データを 活 用 できる ぶらうざが アプリケーションが グーグルなどの 検 索 ロボットが 印 刷 物 に 電 子 書 籍 に 音 声 読 み 上 げに 特 に XHTML であると XML として 扱 える
まとめ
HTMLとは 文 書 を 論 理 的 に 記 述 するための 文 法 CSSとは 文 書 の 装 飾 を 司 るもの CSSがなくても 意 味 が 通 じるHTMLを 作 ることがとっても 大 事
参 考 サイト HTMLは 世 界 共 通! W3C( 仕 様 を 決 めてるとこだから 一 番 正 確 ) http://www.w3.org/ W3C Validation Service( 適 合 してるかチェック) http://validator.w3.org/ w3schools.com(タグごとに 調 べるのに 便 利 ) http://www.w3schools.com/ HTMLクイックリファレンス(HTMLもCSSも 解 りやすい) http://www.htmq.com/ HTML5.jp(HTML5の 日 本 語 情 報 ならココ 本 も 出 てます) http://html5.jp/ 仕 様 は 日 本 語 訳 されているものもありますが 日 本 語 だとちょっと 取 り 違 え ちゃうかも って 感 じのものもあるので 仕 様 を 読 むなら 英 語 をお 勧 めします あと 一 番 したのんは 本 があるけど それが 解 りやすくておススメ!
おしまい