情報処理技法 ( マルチメディアと表現 )I 第 4 回 構造化 書 HTML(2) D.Mitsuhashi 1
字化けのしくみ D.Mitsuhashi 2
字コード 字コード コンピュータ上では, 字は数値として扱われる 数値と 字との対応規則を 字コードという アルファベットと数字をあらわすには, 2 進数で 8 桁 (8bit = 1byte) あれば りる ASCII コード 1byte で 1 字を表現する 字コード 1byte 字, 半,ASCII 字ともいう D.Mitsuhashi 3
字コード 本語を表 するには 2byte 以上必要 歴史的経緯により複数の 字コードが存在 字コードの指定を誤る ( もしくは指定をしない ) と 別の 字コードで数値と 字の対応を試みるので 結果として 字化けが じる D.Mitsuhashi 4
字コードの種類 Web で使われる 本語の代表的な 字コード Shift_JIS 旧 Windows 旧 MacOS JIS(ISO-2022-JP) 電 メール EUC UNIX 系 OS 多 語 字コード Unicode( いくつか形式があるが Web で いられるのは UTF-8) 多くの Web サービス macos Windows 講義では UTF-8 を いる エディタによっては UTF-8N を選択できる その場合は UTF-8N を選択すること D.Mitsuhashi 5
機種依存 字 字コードでは 数値と 字の対応がとられているが数値の が余っている 余った数値部分に絵 字や特殊な記号を各ベンダーが独 に拡張 機種依存 字 参考 URL 機種依存 字の歴史 : 字コードの部屋 http://mikeneko.creator.club.ne.jp/~lab/kcode/vendor.html D.Mitsuhashi 6
予約 字 例題 以下のテキストを HTML で記述してみよう HTML は <h1> 以降は <h2> を いる HTML タグの書き 出しのタグ <h1> <h6> 段落のタグ <p> 字コードについて <h1>html 入門 </h1> <h2> タグの書き方 </h2> <h2> 見出しのタグ <h1> <h6></h2> <h2> 段落のタグ <p></h2> <h2> 文字コードについて </h2> D.Mitsuhashi 7
予約 字 タグなどで既に利 されている 字は そのままでは地の 章で記述する事ができない このような 字を予約 字という 予約 字を記述するには 名前 字参照という記述法で代替する D.Mitsuhashi 8
名前 字参照 代表的な名前文字参照 < < > > & & " " ' ' 参考 Named character references:w3c https://www.w3.org/tr/html5/syntax.html#named-character-references 字実体参照 数値 字参照 :W3G https://w3g.jp/others/data/letters D.Mitsuhashi 9
HTML5 基礎 D.Mitsuhashi 10
セクショニング HTML5 では ページの構造上意味のある区画 ( セクション ) を区切るためのタグが 意されている セクショニングに いるタグ section 途 意味内容上ひとかたまりのセクション article 本 から独 し 内容が完結しているセクション ( コラムなど ) nav aside ナビゲーションに いるセクション サイドメニューなどコンテンツ以外のセクション header ヘッダー ( ページ上部 )( サイト ID など ) footer フッター ( ページ下部 )( 著作権表記など ) D.Mitsuhashi 11
セクショニングの例 header サイト ID やロゴ イメージ画像など グローバルリンク nav 内容に直接関係ないバナーやページ内リンクなど aside section 主に 章で表現されるコンテンツ部 article この部分だけで完結する記事 著作権表記やメールアドレスなど欄外の情報 footer D.Mitsuhashi 12
セクションのコーディング例 <header>html5 で書こう </header> <nav>top ABOUT ACCESS</nav> <aside>link</aside> <section> <h1>html5 とは </h1> <h2>web とブラウザの歴史 </h2> <h1> コーディングをしてみよう </h1> <article> コラム </article> </section> <footer> 2019 Inazo NITOBE</footer> D.Mitsuhashi 13
参考資料 main について main 要素はページ中で最も重要なコンテンツをグループ化するために いる セクショニングタグではない ナビゲーションパート ( サイト ID やグローバルリンク ) 著作権表記 ページ内サブリンク バナーなどは含まない D.Mitsuhashi 14
強勢と強調 em 字の強勢 重要度の さを表す 地の とトーンを変えるときに いる ブラウザによっては斜体表記 strong 字を強調する em よりも重要度が い項 <em> 文字の強勢 </em> <strong> 文字の強調 </strong> D.Mitsuhashi 15
参考資料 上付き 字 下付き 字 sup 上付き 字 3<sup>2</sup> sub 下付き 字 CO<sub>2</sub> D.Mitsuhashi 16
参考資料 引 cite 引 箇所に いる <p> 芥川龍之介 侏儒の言葉 は以下のような書き出しから始まる </p> <cite> 侏儒の言葉 は必ずしもわたしの思想を伝えるものではない 唯わたしの思想の変化を時々窺わせるのに過ぎぬものである </cite> D.Mitsuhashi 17
箇条書き 箇条書きは ul (unordered list) と li (list item) という 2 つのタグを いる 書式は れ 構造 ul 箇条書きの始まりと終りを す li 箇条書きの項 D.Mitsuhashi 18
箇条書き <ul> <li>web Browser</li> <li>microsoft Office</li> <li>text Editor</li> </ul> Web Browser Microsoft Office Text Editor D.Mitsuhashi 19
多段箇条書き <ul> <li>web Browser <ul> <li>google Chrome</li> <li>safari</li> <li>firefox</li> </ul> </li> <li>microsoft Office <ul> <li>microsoft Word</li> <li>microsoft Excel</li> </ul> </li> </ul> Web Browser Google Chrome Safari Firefox Microsoft Office Microsoft Word Microsoft Excel 1 段 の項 li 要素の中で ul を展開する D.Mitsuhashi 20
番号つき箇条書き ol (ordered list) 番号つき箇条書きの始まりと終りを す li (list item) 箇条書きの項 通常の箇条書きと組み合わせて多段箇条書きも可能 <ol> <li>web Browser</li> <li>microsoft Office</li> <li>text Editor</li> </ol> 1. Web Browser 2. Microsoft Office 3. Text Editor D.Mitsuhashi 21
参考資料 出しつき箇条書き dl (definition list) 出しつき箇条書きの始まりと終りを す dt (definition title) 出し項 dd (definition description) 説明 の項 <dl> <dt>google Chrome</dt> <dd>google 製ブラウザ </dd> <dt>firefox</dt> <dd>mozilla 製ブラウザ </dd> <dt>safari</dt> <dd>apple 製ブラウザ </dd> </dl> D.Mitsuhashi 22
強制改 br の構成に関係なく強制的に改 したい場合に いる 2 度以上の強制改 を使ってレイアウトを なう事は間違い 終了タグは不要 XHTML ではすべてのタグにおいて終了タグを 意する必要があった そのため 特に開始タグと終了タグの間に何も記 しない場合に限り 省略書式で表現した 省略書式は タグ名の後に 1byte スペースをあけてスラッシュを書く この講義では XHTML 式の表記を推奨する <br /> D.Mitsuhashi 23
平罫線 hr 中に 平罫線を差し挟む 罫線のデザインは CSS で調整可能 br 同様, 省略書式を いる スラッシュの前に半 スペース <hr /> D.Mitsuhashi 24
HTML5 でのタグ表記法 HTML5 では HTML 4.01 と XHTML のいずれのタグ表記法を いても構わない 字 字いずれでもよい タグの省略表記はしてもしなくてもよい ただし講義では XHTML 式の表記に統 する <BR> <br> <br /> HTML 3.2 HTML 4.01 XHTML 1.0/1.1 D.Mitsuhashi 25