音声と図解 ホームページ作成入門 高齢者・障がい者の方が使いやすいHTML5で学ぶ

2015年度公開講座 4月25日, 5月2日 跡見学園女子大学文学部准教授 福田 博同

4月25日

準備編

• 見本コピー(実習) ダウンロード

• パソコンと周辺機器

• 起動と終了(実習)

• フォルダを作る(実習)

• タッチタイピング

• 日本語入力

• MS-IME

• よく使うショートカットキー

• エディタを使う

• ファイルの保存

– CD-RWへ保存

• 単語登録(実習)

ホームページの仕組み(説明)

• 元の文書の作り方

• 静止画ファイル

• 音ファイル

• 動画ファイル

• HTML文書

• スタイルシート

アクセシビリティページ

• チェッカー

• HTML5の理解

５月2日

•ブログの理解

•図のファイル作成法

–ペイント形式

–写真撮影

–ドロー形式

–画面キャプチャ

•音ファイル作成法

–マイク録音

–MIDI作成

–テキスト2音声変換

•動画のファイル(説明)

•絵日記サイト完成

•アップロード方法(説明)

目次へ

html5Nyuumon201502.pdfhtml5Nyuumon201502.pdfhtml5Nyuumon201502.pdf

見本のコピーと保存

1. 教材CD-RWを開く

1. 教材CD-RWには、フォルダ「m見本」がある

2. デスクトップに移動

2. ウェブサイトからダウンロード （著者許可済み）

1. Google検索→ キーワード「artnavi 電脳」→ 「公開講座」→

「2014-15年度」→ 「gift」フォルダをクリック

2. ダウンロード先をデスクトップにする

3. 編集後、リムーバルメディア（USBやCD-RW等）へ保存

目次へ

http://www2.mmc.atomi.ac.jp/~artnavi1/librarySci/koukaiKouza/html5Homepage2014/mihon.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/librarySci/koukaiKouza/html5Homepage2014/mihon.html

アプリのダウンロード(1)説明

評判やウィルスチェック等でウィルスのないアプリをダウンロード

IEにGoogleをダウンロード（自宅実習）→ 利用可能

• 方法は次頁

Google ウィルスか

目次へ

アプリのダウンロード (2)説明

Googleツールバーのダウンロード方法

• 「Google インストール」で検索

• 「Google ツールバーのインストール」をクリック

• 同意してダウンロードをクリック

目次へ

アプリのダウンロード (3)プラグイン

• 同意してダウンロードをクリックします（Tabキーで選択し、改行）

• いくつか同意してインストールされる

説明：Google ツールバーなどはプラグインといい、ブラウザに追加されます。

PDFファイル閲覧や、Flashアニメーション、

ブログなどの新着情報を届けるRSSフィードなど

目次へ

アプリのダウンロード方法(5)電子メール

固定電話同様にプロバイダ契約した電子メールが必要

• 契約した接続方法で電子メールを設定しておく

• ウィンドウズには「電子メール」が付属。

• ウィンドウズキーを入れ、outlookと入れ。

• ウィザードに従いメールを設定。

目次へ

アプリのダウンロード方法(6)圧縮と解凍

• ファイルはZipやLHAなどで圧縮

• ダウンロードしたZIPファイルの解凍方法（説明）

1. Zipファイルを右クリック

2. すべて展開をクリック

3. 展開ウィザードが出るので従う

4. 解凍される

• LHAファイルは解凍ソフトをダウンロードし使用

目次へ

パソコンと周辺機器 パソコン本体に加え 入力装置には キーボード マウス マイク ビデオ, カメラ, スキャナ等があり、 出力装置には プリンター モニタ スピーカー プロジェクター等 入出力装置には HDD,CD/DVD, USBや、 LANや無線LANなどが

あります 質問！ LANとは何ですか？

構内のネットワークです

目次へ

起動(実習）

電源を入れると

パソコンが起動し

「Ctrl + Alt + Delを入れてください」と言われます。

左手でCtrlキーとAltキーを押し、

右手でDeleteキーを押します。

「パスワードを入れよ」と言われます。

パスワードを入れ、Enterキーで確定します

Ctrl + Alt + Deleteを入れよ

Pass wordを入れよ

目次へ

YouTube復習(3分02秒から）

https://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9I

パソコンの

パスワードとは

はい、ここでは ウィルスからの防御のためのコンピュータの合言葉を意味しております。

パソコンを購入し、最初の起動時に設定します。忘れないようにしましょう。

後でパスワードを変更する方法：

スタート→ コントロールパネル→ ユーザーアカウント→ 変更するユーザーアカウント

で設定しなおします。

起動（説明）へ戻る

目次へ

終了(実習）

• 終了は

「ウィンドウズキー」を押し

「右矢印キー」でシャットダウンに行き、

Enterキーで終了します。

目次へ

フォルダ作成(実習)

データ保存のためフォルダ作成法(実習)

• ウィンドウズキー+Dキーでデスクトップに行く

• Ctrl + Shift + Nキー または

• (右クリック→新規作成→フォルダ）

• そのまま名前を入れる

• 例：「HTML作成法」

• 最初にアルファベットを入れると便利

画面切り替えはAlt + Tabキー

目次へ

YouTube復習(5分54秒から)

https://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9Ihttps://www.youtube.com/watch?v=2hJlvDu8o9I

タッチタイピング

見ないでキーボードを打つと能率的で老眼になってもパソコンが利用できます。なるべくマウスを使わない

• 左人差し指を Fキーに • 右人差し指を Jキーに置きます。 左人差し指は 4RFV 5TGB 右人差し指は 6YHN 7UJMが守備範囲です • 定番ソフトをダウンロー

ドするにはインターネットを見ます

目次へ

日本語入力

Windowsには、

MS-IMEが付いていま

す。

昔から定評のATOKや、

無料のGoogle日本語入

力 が良く使われていま

す。

では、MS-IMEで説明し

ます。

目次へ

http://www.atok.com/http://www.google.co.jp/ime/http://www.google.co.jp/ime/http://www.google.co.jp/ime/http://www.google.co.jp/ime/

MS-IME

MS-IMEのメニューはワープロやエディタの文字入力画面で、Ctrl+F10キーで出てきます。 次にPキーでIMEパッド、Wキーで単語登録などに切り替えられます。 ローマ字漢字から、「直接ひらがな入力」にするには、 Alt + 「カタカナ・ひらがな・ローマ字キー」 「漢字」から「全角英数」等切り替えは、 Ctrl+F10,Nキー

目次へ

IMEパッド

Ctrl+F10,PでIMEパッドを開く

•文字一覧, 手書き, ソフトキーボード, 画数、部首検索が出る。

文字一覧では文字コード（Unicode, Shift-JIS, JISなど）とフォントを指定可能

パソコンはShift-JISだが、多言語対応のUnicodeも可能、Web上のデータはUnicodeへ向う

メール等の文字化け＝コード変換不適切が原因

目次へ

よく使うショートカットキー

マウス使わないと格段に作業が速い よく使うショートカットキーは少ないので覚えてしまいましょう

• エクスプローラ: ウィンドウズキー+E

• アプリ開始

• アプリ切り替え: Alt+Tab

目次へ

よく使うショートカットキー 2

• コピー:Shift+→キー

で範囲選択し、

Ctrl+Cキーでコピー

し、

• 貼付: 範囲選択し、

Ctrl+Vキーでペース

トします

• 切取り: Ctrl+X

• 復活: Ctrl+Z

• ハイパーリンク:

Ctrl+K

目次へ

「色盲の人にもわかるバリアフリープレゼンテーション法 」より 岡部正隆･伊藤啓編

よく使うショートカットキー ：まとめ

★スタート： Windowsキー（田キー）

★エクスプローラ： 田にEキー

★画面切り替え： AltにTabキー

★漢字変換： スペースバー

★決定： Enterキー

★ファイル保存： CtrlにSキー

★別名保存： AltにFキー、Aキー

★終了： AltにF, XキーかCキー

★複写： CtrlにCキー

★切取： CtrlにXキー

★削除： 範囲選択、Deleteキー

★貼付： CtrlにVキー

★復活： CtrlにZキー

★アドレス取得： AltにDキー

★ハイパーリンク： CtrlにKキー

★パソコン終了： 田にUキー

目次へ

http://night.nig.ac.jp/color/http://night.nig.ac.jp/color/

エディタ試し←文書作成・編集

Editorや

ワープロソフト、

プレゼンテーションソフト、

HTMLエディタ、

電子書籍作成ソフト

などで、

文書を作成・編集・

保存し、印刷したり、

インターネット共有もできます。

目次へ

エディタを使う

単に文字を入力、編集するソフト

文字コード：Shift-JIS以外にUnicode。UTF-8で保存

• ウィンドウズは「メモ帳」

• 手順：スタート→ メモ帳と記入→ 検索で出るのでクリックし起動

目次へ

エディタを使う

右端折り返しとフォントの大きさを変えてみる

• Alt→ O→Wキー

折り返し

• Alt → O →Fキー

フォント変更

• 文字を入れる

• 漢字は「半角全角キー」

• 何か入れる

• スペースで変換

• Enterキーで確定

• シフトキーは上段にある文字

目次へ

ファイルの保存（実習）

• CtrlキーにSキーで保存

• 最初は「ドキュメント」画面が開きます。

• 名前を入れます。例：m見本

• Enterキーで保存されます

m見本.txt

目次へ

CD-RWへ複写（フォーマット）

1. DVD-RWトレイボタンを押すと開く

2. CD-RWを入れる 3. トレイを押す 4. エクスプローラー画

面が出る 5. DVD-RWをクリックか

Enterキー 6. メニューが出る 7. 名前を入れる 8. 「USBフラッシュドライ

ブと同じように,,,」をクリック

9. フォーマット開始 これで書き換え可能なCD-RWができる

目次へ

CD-RWへ複写（実習）

• 開いているアプリや文書をすべて閉じ、

Alt+F4キー（右上の☓印）

• エクスプローラを2つ出す

ウィンドウズキー+Eを2回

• DVD-RWを開く

• ドキュメントのファイルをコピー

• DVD-RWフォルダへ貼付け

目次へ

単語登録

よく使う文章を単語登録すると便利

1. 文書編集中

2. 右下弁当箱のようなMS-IMEを開く

3. 単語、よみを入れ確定：例を

「あ」で登録

4. 閉じる

5. 「あ」と入れると

もでる

目次へ

2 3

ホームページの仕組み

1. 元の文書、図、表、音、動画等を作る

2. HTML形式やXHTML形式ファイルへ変換

3. プロバイダ等へファイル転送

4. ブラウザで読む

プロバイダのサーバ

見る人

サイト開設者

見る人

インターネット

目次へ

元の文書の作り方 1. ブログやMedia WikiはWeb上で書く

2. エディタやHTMLエディタで書く→保存

3. ワープロソフトで書く → 保存 → 変換

4. プレゼンテーションソフトで書く→ 保存 → 変換

5. 表計算ソフトで書く → 保存 → 変換

6. データベースを作る → 保存 → 変換

サイト開設者

目次へ

YouTube復習(2分12秒)

https://www.youtube.com/watch?v=yyscUlTErAIhttps://www.youtube.com/watch?v=yyscUlTErAIhttps://www.youtube.com/watch?v=yyscUlTErAIhttps://www.youtube.com/watch?v=yyscUlTErAIhttps://www.youtube.com/watch?v=yyscUlTErAIhttps://www.youtube.com/watch?v=yyscUlTErAI

静止画ファイル 拡張子 Web用ファイル

• ペイント形式で描く ペイント, Gimp bmp, tif など gif, jpg, png

• ドロー形式で描く（ぎざぎざなし）

Inkscape (フリー) svg svg

Illustrator ai, pdf, svgなど jpg, pdf, png, svg, tif等

Power Point ppt pdf に印刷 ○ HTMLで出力 ×(理由：MSのみ) • 写真を撮る tiff, bmp, jpg jpgで出力

• スキャナーで写す bmp, jpg, pdf jpg, pdf • PC画面をキャッチ bmp, jpg jpgへ変換

• 詳細はノートを参照

サイト開設者

目次へ

元の音ファイル 拡張子 Web用ファイル

• 録音

マイク録音

サウンドレコーダー、超録など使用

| .wav | .aiff | bwf

ディジタル録音機

ICレコーダ mp3, wma

リニアPCMレコーダー: wav

DSD (ハイレゾ)録音: .DSF

• DAW ソフトで作曲 例:cwp, mml

（代表的ファイル形式例を記載）

サイト開設者

Web用に変換

.ogg | .mp3 | .ra | .aac | .wma |.m4a

mp3, wma

Wav, mp3

FLAC, WAV, DSD

.mp3 | .mid | wav

目次へ

動画ファイル 拡張子 Web用ファイル

• ビデオ撮影

通常STD画質撮影 MPEG2,AVI

ハイビジョンHVCSD撮影

MPEG4-AVC

• ソフトで描く

Flashアニメーション FLA

SMILアニメーション RM,MOV

3Dアニメーション Blenderほか

（代表的ファイル形式例を記載）

サイト開設者

コンバーターや編集ソフトで変換 QT, RM, SWF, WMV, H.264, MOV等 高スペックPCと編集ソフトで変換 FLV, MPEG4-AVC/H.264 等

SWF, アニメーションGIF等 SMI VRML, SWF,X3D等

目次へ

HTML文書（ファイル名.html)

この文書の属性（著者だとかキーワードとか

スタイルとか）

見える部分 図とかはすべてリンクで可能

サイト開設者 目次へ

HTML/XHTMLと CSS（スタイルシート）

• HTMLは文書を、スタイルはCSSを使う。

– 理由： 文書と見映えの分離：メンテナンス性

– アクセシビリティ

– SEO（検索エンジン対策）

– W3C（Webの仕様を決める団体）国際標準

詳しくは

• ユーザビリティ___スタイルシート作成 / 筆者

目次へ

http://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.html

見本のスタイルシート解説

詳しくは ユーザビリティ___スタイルシート作成 / 筆者 ですが見本の解説 ファイル名：dunWhite120.css(意味：dun焦げ茶地White白文字120%の大きさ)

body { /* 背景焦げ茶文字白120%大きい */ width:90%; margin:1% auto; background-

color:#320; color:white; } a{ color:yellow; } a:visited{ color:#ff6; } h1{ font-size:135%; } h2{ font-size:130%; } h3{ font-size:125%; } h4{ font-

size:120%; } h5{ font-size:115%; } h6{ font-size:110%; } p.right {text-align: right;} p.center {text-align: center;} p.left {text-align: left;}

目次へ

背景色

文字色

リンクの色

見出しの大きさ

段落の右寄せ

Body部の設定

http://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/style02.html

見本のスタイルシート解説.2

header, nav, section, footer { display:block; margin:1px auto; padding:5px; } header { text-align:left; padding:10px; background-color:#210; color:white; }

header h2 { text-align:left; } header ul, header li { display:inline; } div.hidari{ float:left; line-height:1.5; margin:1px auto; background-color:#320;

color:white; } div.migi{ float:right; line-height:1.5; margin:1px auto; background-color:#320; color:white; }

目次へ

Header,nav,section,footerの設定

テキスト左寄せ

行間

見本のスタイルシート解説. 3

nav {

float:right;

font-size:90%;

line-height:1.4;

margin:2px auto;

display:inline;

background-color:#320;

color:white;

}

#nav ul li{

display: inline;

}

nav.hirari {

background-color:#320;

color:white;

float:right;

font-size:90%;

line-height:1.4;

margin:2px auto;

}

section {

float:left;

width:98%;

line-height:1.5;

background-color:#320;

color:white;

}

p.resizeimage img { width: 100%; }

p {

margin: 0;

}

目次へ

箇条書き 余白

見本のスタイルシート解説

aside{

float:right;

width:20%;

line-height:1.3;

font-size:90%;

background-color:#320;

color:white;

}

footer {

clear:both !important;

text-align: right;

font-size:85%;

background-color:#320;

color:white;

}

form.migi {float:right;}

form.hidari

{float:left;}

目次へ

サイドバー

フッター部：脚注

HTML, CSSのアクセシビリティチェック

• W3C Markup Validation Service

• Another HTML -lint gateway /石野恵一郎氏(HTML4まで)

• W3C CSS Validation Service

• 色覚チェック / 岡部正隆氏、伊藤啓氏

• aDesigner / 浅川千恵子氏グループ

では心当たりの会社等を調査してみましょう

目次へ

http://validator.w3.org/http://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlhttp://jigsaw.w3.org/css-validator/validator.html.jahttp://jfly.iam.u-tokyo.ac.jp/html/manuals/pdf/color_blind_J.ppthttp://jfly.iam.u-tokyo.ac.jp/html/manuals/pdf/color_blind_J.ppthttp://www.eclipse.org/actf/downloads/tools/aDesigner/index.php

HTML5とは（背景説明） •1986年, SGML（Standard Generalized Markup Language）がISO規格となる。

テキスト文の特定文字をタグで囲み、コンピュータが意味を解釈できるようにするマークアップ言語。記法は複雑。

•1990年, ティム・バーナーズ＝リー (CERNに所属していた)

HTML （ハイパーテキスト・マークアップ・ランゲージ）,URL（アドレス）, HTTP（ハイパーテキストの通

信規約）などからなるWorld Wide Web(WWW) を立ち上げる(典拠)

–HTMLは一般的なタグを決め、SGMLをインターネット対応に特化し、普通の人が利用しやすいようにした(神崎正英氏解説)。

目次へ

http://www.iso.org/iso/catalogue_detail.htm?csnumber=16387http://www.iso.org/iso/catalogue_detail.htm?csnumber=16387http://www.w3.org/People/Berners-Lee/http://www.w3.org/People/Berners-Lee/http://www.w3.org/People/Berners-Lee/http://www.w3.org/People/Berners-Lee/http://home.web.cern.ch/http://tenyears-www.web.cern.ch/tenyears-www/Story/WelcomeStory.htmlhttp://www.kanzaki.com/docs/htminfo.html

HTML5とは (背景説明 その2) •1993年, CERNがWWWを公開

•NCSAのマーク・アンドリーセン

WebブラウザのMosaic（後のNetscape Navigator → Mozilla Firefox)を公開→画像が利用しやすい（インターネットマガジン(199412)）

1994年,ティム・バーナーズ＝リー等

標準化団体WWWコンソーシアム(W3C)結成

1995年,Sun Microsystems社、Java （Javaとは）を公開、JavaScriptを公開(JavaScriptとは:All About記事) ブラウザのNetscape2等で動画を表現→

WWWは一気に普及

目次へ

https://web.archive.org/web/20120229043859/http:/archive.ncsa.illinois.edu/mosaic.htmlhttp://i.impressrd.jp/files/images/bn/pdf/im199412-028-sp1.pdfhttp://i.impressrd.jp/files/images/bn/pdf/im199412-028-sp1.pdfhttp://www.w3.org/Consortium/Translation/Japanesehttp://www.oracle.com/us/sun/index.htmhttp://www.java.com/ja/download/faq/whatis_java.xmlhttp://www.java.com/ja/download/faq/whatis_java.xmlhttp://allabout.co.jp/gm/gc/23220/http://allabout.co.jp/gm/gc/23220/http://allabout.co.jp/gm/gc/23220/http://allabout.co.jp/gm/gc/23220/

HTML5とは (背景説明その3) •1996年, Internet Explorer 3公表

– Netscape Navigatorとのブラウザ機能の拡張合戦開始

•1998年, W3CがXMLを勧告

–SGMLをWWW用に改良したもの(XML1.0仕様/村田真ほか訳)

–例えば、異なるシステムでもメタデータを同一にすると検索できます

•1999年, W3CがHTML4.01を勧告(邦訳)

–HTMLとスタイルシートとの分離

•1999年, W3CがWCAG(Webコンテンツアクセシビリティガイドライン）を勧告(邦訳)

–視覚障害者・聴覚障害者・肢体不自由者もインターネット文書を読めるための基準

目次へ

https://web.archive.org/web/20070220040551/http:/www.fxis.co.jp/xmlcafe/tmp/wrapper-xml-19980210.htmlhttps://web.archive.org/web/20070220040551/http:/www.fxis.co.jp/xmlcafe/tmp/wrapper-xml-19980210.htmlhttps://web.archive.org/web/20070220040551/http:/www.fxis.co.jp/xmlcafe/tmp/wrapper-xml-19980210.htmlhttps://web.archive.org/web/20070220040551/http:/www.fxis.co.jp/xmlcafe/tmp/wrapper-xml-19980210.htmlhttps://web.archive.org/web/20140205223608/http:/www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.htmlhttps://web.archive.org/web/20130311023808/http:/www.zspc.com/documents/wcag10/index.html

HTML5とは (背景説明その4) •2000年, W3CがXHTML1.0を勧告(邦訳)

–XMLから自動的にHTML文書に変換するための共通形式

•2009年, Linked Dataの提案(ティム・バーナーズ＝リー)

–タグでデータの主語・述語・目的語を理解できるようにし、オープンデータが連携できるデータのWWW

•2014年, HTML5を WHATWGが作成、W3Cが後に加わった「最新HTML勧告」(邦訳)

–（W3CはXHTML1.0の後継を断念し、HTML5に）

目次へ

https://web.archive.org/web/20130423141603/http:/www.doraneko.org/webauth/xhtml10/20000126/Overview.htmlhttp://www.whatwg.org/http://www.w3.org/https://web.archive.org/web/20140305151132/http:/momdo.s35.xrea.com/web-html-test/spec/html5-dev/Overview.html

HTML5の利点 • 音声、静止画、動画等に特別なプ

ラグイン(追加機能)が不用

• PCとモバイル（スマフォやタブレット端末）の区別なくWebページを書ける

• タッチパネルでフリック(軽くはたいて移動)やピンチ（摘んで拡大縮小）などが出来る

• 縦書レイアウトも標準装備

• リフロー（再流動）型サイト作成が可能

• タグにセマンティクス（意味）を加えた（例：は文頭, は道案内, は記事, は文末）

• ローカル保存データ枠の拡大

• モバイルでは、JavaScriptで位置情報の取得、など

目次へ

http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AA%E3%83%83%E3%82%AF%E5%85%A5%E5%8A%9B

HTML5の欠点

• 未対応ブラウザがある

• ついアクセシビリティへの配慮を忘

れがちになる

• 音声、動画等、主要ブラウザに表

示するため複数のファイルが必要

となる

• XMLから自動出力するためには、

XHTML形式のタグを行うことで解

決(XHTML5)

目次へ

Head部：例：

ここにホームページ名を書きます

目次へ

Head部：例：

目次へ

Body部

ここに見出しを書きます

この段落に何か書きます

目次へ

Body部

ナビゲーション

リンクしたいファイル名を書きます

次のリンクを書きます

目次へ

Body部：例： 2/3

文章の見出しを書きます

この段落に何か書きます

この段落に何か書きます

目次へ

この方法を推奨

E:/2015%E5%85%AC%E9%96%8B%E8%AC%9B%E5%BA%A7/f%E7%A6%8F%E7%94%B0%E3%83%9B%E3%83%BC%E3%83%A0/sakura01.jpg

Body部：例： 2/3

トップページの呼び出し語 | CC-BY-SA | 作者名を書きます | 2014年4月26日 - 2014年 | 次ページへ

目次へ