ホームページ作成入門

–

跡見学園女子大学 春期公開講座

2016 年 4 月 23, 30 日, 5 月 7 日

ホームページ作成入門

高齢者 障がい者にやさしいページを！

跡見学園女子大学文学部准教授 福田 博同

ホームページ作成入門

目次 準備編 ....................................................... 1

1 起動 .................................................. 1 2 終了 ............................................... 2

3 フォルダ作成 ................................. 2

４ 文字入力 ........................................ 3

5 ファイルの保存 ............................. 4

6 CD-RW 初期化と複写 ................... 4

７ CD-RW への保存実習 .................... 5

8 タッチタイピング .......................... 6

9 日本語入力 .................................... 6

9.1 MS IME ........................................ 7

10 便利なショートカットキー ........... 8

11 アプリ等のダウンロード ................ 9

12 圧縮と解凍 .................................. 10

13 ウィルス対策 ............................... 11

14 データのバックアップ ................. 12

15 単語登録 ....................................... 12

ホームページ編 ....................................... 13

1 HTML とは ................................. 13

2 ホームページとブログ................... 15

3 アクセシビリティとは ................... 16

4 わかりやすいホームページとは ..... 17

5 JIS X8341-3:2010 要点 ................. 17

6 HTML, CSS の W3C 標準チェック 18

7 ブログ・SNS (実習) ...................... 20

7.1 Hatena ダイアリー ................. 20

7.2 Blogger を試す ....................... 21

7.3 Facebook や Twitter .............. 22

8 HTML5 とは ............................. 23

9. HTML 文書 ................................ 24

9.1 HTML/XHTML と CSS ............. 24

9.2 Head 部の例 ........................... 26

9.3 Body 部の例 ............................ 27

9.4 スタイルシート ....................... 30

10 元ファイル作成法：画像 ......... 33

10.1 図をペイントで描く ............... 33

10.2 キャンバスサイズ変更 ........... 33

10.3 地色や円の描き方 .................. 34

10.4 ブラシを使う ......................... 34

10.5 自由曲線を描く ...................... 35

10.6 別の色を塗る ......................... 35

11 画像を保存する ........................ 35

12 カメラ画像の作成方法 ............. 36

13 画面キャプチャ ...................... 36

14 Web ページに埋め込む .......... 37

15 音声の作成 ............................. 37

15.1 BGM の作成 .......................... 38

15.2 音の Web への組み込み ......... 39

16 表の作成 .................................... 40

17 PDF にする ............................... 42

ホームページ作成入門

1

ホームページ作成入門

2

準備編

1 起動(実習）

電源投入

パソコンが起動する

「Ctrl + Alt + Del を入れてね」と言わ

れる。

Ctrl キーと Alt キー

を押し、

右手で Delete キー

を押す。

「パスワードを入れて」と言われる。

パスワード

を入れ、

Enter キーで確定

☆パスワード １はコンピュータウィ

ルス ２防御のためのコンピュータの

合言葉。パソコンを購入し、最初の起

動時に設定。

Ctrl + Alt + Del を入れてね

パスワードを入れてね

ホームページ作成入門

3

2 終了(実習）

ウィンドウズキーを押し

右矢印キーでパソコン終了に行き、

Enter キーで終了する

★マウスの場合：

スタートマーク

3 フォルダ ３作成

ウィンドウズキー を押しながら

D キー でデスクトップが出る

ウィンドウズ + D と書く

マウス を右クリック →

新規作成 ( X キー )→

フォルダ ( F キー )で

新しいフォルダ が出現

そのまま名前を入れる

例：「home」と入れ Enter キー

最初の文字にアルファベットを入れ

ると便利

D

新規作成(X) →

フォルダ (F)

ホームページ作成入門

4

4 文字入力

テキストエディタ ４(例:メモ帳)で入力

実習。改行などの置換もできる。

☆メモ帳を開く手順

ウィンドウズキー

メモ帳と記入

「ローマ字漢字変換」モードなので

「memochou」と入れて

スペースバーで変換される。

Enter キーでメモ帳が立ち上がる

文字を入れる（実習）

文字を入れよう

「こんにちは」

と入れよう

[konnnichiha]スペースで変換 →

Enter キーで確定。 次に、

半角/全角キーを押し、Good morning

と入れよう

H O

M

E

M

E O

C H

U

ホームページ作成入門

5

5 ファイルの保存（実習）

Ctrl キーに S キー で保存

最初はドキュメント画面が開く。

デスクトップ ５にし、名前を入れよう。

例：n 日記

Enter キーで保存される

6 CD-RW６初期化と複写

DVD-RW トレイボタンを押す

と開く→ CD-RW を入れる

トレイ(受け皿)を押す

エクスプローラ ７画面が出る

DVD-RW をクリックか

Enter キー

メニューが出る

名前を変える

「USBフラッシュドライブ ８と

同じように…」をクリック→

フォーマットされる。

Konnichiha 今日は

S

ホームページ作成入門

6

7 CD-RW へ複写（実習）

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

じ、

Windowsキー９＋Eキー

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

CD-RW を開く

デスクトップのフォルダごとをコピ

ーし( Ctrlキー１０+Cキー )、CD-RW

の場面に貼り付け(Ctrlキー+Vキー)

または、マウスで押しながら CD-RW

のフォルダに持っていき、手を放す

(ドラッグアンドドロップという)

E

C

ホームページ作成入門

7

8 タッチタイピング

見ないでキーボードを打つと能率的

老眼でもパソコンが利用可。

左人差し指を F キーに

右人差し指を J キーに置く。

左人差し指：4RFV 5TGB

右人差し指：6YHN 7UJM

9 日本語入力

Windows の日本語入力システムには、

MS-IME がある。

また定評のATOK１１や、

無料のGoogle日本語入力 １２

が利用可能。

では、MS-IME で説明する。

ホームページ作成入門

8

9.1 MS-IME

MS-IME のメニューはワープロやエ

ディタの文字入力画面で、Ctrl キー

+ F10 キーで出る。

次に P キーで IME パッド、W キーで

単語登録など

初期設定はローマ字漢字変換モード。

「直接ひらがな入力」にするには、

Alt キー +

カタカナ・ひらがな・ローマ字キー

「漢字」から「全角英数」切り替えは

Ctrl キー + F10, N キー

☆ IME パッドでは

文字一覧

手書き

ソフトキーボード

画数、部首検索 が出現

文字一覧は

文字コード １３（Unicode, Shift-JIS,

JISなど）とフォントを指定可能。

パソコンは Shift-JIS コード。

多言語対応の Unicode も使用可能

P W

N

ホームページ作成入門

9

10 便利なショートカットキー

マウスが使えない人々もいる

マウスを使わないと→作業が超速。

よく使うショートカットキーは少し

だけ → 覚えよう→

裏表紙を見よ

エクスプローラ

ウィンドウズキー + E キー

アプリ切り替え

Alt キー１４ + Tabキー

コピー

Shift キー + →キーで範囲選択

Ctrl キー + C キー

貼り付け(ペースト)

範囲選択→ Ctrl キー + V キー

ホームページ作成入門

9

切取り: Ctrl キー + X キー

復活: Ctrl キー + Z キー

ハイパーリンク １５: Ctrlキー + Kキー

11 アプリ １６等のダウンロー

ド １７

評判やウィルスチェック等でウィル

スのないアプリをダウンロードする。

例：IE に Google をダウンロード（自

宅実習）→ Google が利用可能。

☆Google ツールバーのダウンロー

ド

「Google ツールバー」で検索

「Google ツールバーのインストー

ル」１８をクリック

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

ホームページ作成入門

説明：Google ツールバーなどはプラグイン １９という。ブラウザに追加される。

PDF ファイル閲覧や、Flash アニメーションや、ブログなどの新着情報を届け

る RSS フィードなどがある。

☆電子メール のダウンロード

固定電話同様にプロバイダ契約した電子メールが必要な場合がある。

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

ウィンドウズには「電子メール」がついている。ウィンドウズキーを入れ、

「outlook」と入れる。

ウィザード(手順の案内)に従いメールを設定する。

12 圧縮と解凍

ファイルは Zip や LHA などという名

前の圧縮したファイルで送られる。

例：教材サイトに行く→

ファイル：gift.zip をクリック→

ダウンロードのリンクをクリック→

保存の場所を「デスクトップ」で保存

をクリック。

上の図はブラウザが Google Chrome

ホームページ作成入門

☆ダウンロードした ZIP ファイルの

解凍方法 (右図は IE の例)

Zip ファイルを右クリックする。

ウィルスチェックをする(次節)。

すべて展開をクリックする。

展開するウィザード（手順案内）が出

るので従おう→ 解凍される

LHA ファイルは解凍ソフトをダウン

ロードして使う

13 ウィルス対策

対策ソフトを必ず入れる。

ウィルス定義ファイルを定期的にア

ップロードする必要あり。

定期的に情報処理推進機構 でウィ

ルス対策情報を得る。

ダウンロードファイルは開く前にウ

ィルスチェック。

IE の例

ホームページ作成入門

14 データのバックアッ

プ ２０

データは必ず２か所以上で保存し

よう。

保存方法：

更新版を保存する：

Ctrl キー + S キー

別名で保存する：

Alt キー + F キー + A キー

15 単語登録

漢字入力画面で Ctrl キー +

F10 キーで単語登録できる。長い

文字を単語登録しよう。

例：<a href=””></a>を「あ」で登

録してみよう。

S F A

ホームページ作成入門

ホームページ編

1 HTML とは（簡略説明）

1986 年, SGML（Standard Generalized Markup Language）が ISO 規格

となる。

☆SGML とは、テキスト文の特定文字をタグで囲み

(例: <title>タイトル</title> )、コンピュータが意味を解釈できるようにする

マークアップ言語。記法は複雑。インターネット以前の技術。

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

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

HTTP （ ハ イ パ ー テ キ ス ト の 通 信 規 約 ） な ど か ら な る World Wide

Web(WWW) を立ち上げる(典拠)

☆HTML とは、一般的なタグを決め、SGML をインターネット対応に特化

し、普通の人が利用しやすいようにした(参照: 神崎正英氏解説)。

1993 年, CERN が WWW を公開

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

Web ブラウザの Mosaic（後の Netscape Navigator → Mozilla Firefox)

を公開→画像が利用しやすい（インターネットマガジン(199412)）

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

ホームページ作成入門

14

Web の仕様を決める標準化団体 WWW コンソーシアム(W3C)を結成

1995 年, Sun Microsystems 社、Java (解説: Java とは）を公開、JavaScript

を公開 (解説: JavaScript とは:All About 記事) ブラウザの Netscape2 等で動画

を表現→ WWW は世界中で一気に普及

1996 年, Microsoft 社, Internet Explorer 3 を公表

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

1998 年, W3C が XML を勧告

☆XML とは、SGML を WWW 用に改良したもの (解説: XML1.0 仕様/村田真ほ

か訳)

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

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

1999 年, W3C が WCAG(Web コンテンツアクセシビリティガイドライン）

を勧告(邦訳)

☆WCAG とは、視覚障害者・聴覚障害者・肢体不自由者もインターネット

文書を読めるための基準

2000 年, W3C が XHTML1.0 を勧告(邦訳)

☆XHTML とはＭXML から自動的に HTML 文書に変換するための共通形式

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

☆タグ ２１でデータの主語・述語・目的語を理解できるようにし、オープン

ホームページ作成入門

15

データが連携できるデータのWWW

2014 年, HTML5 を WHATWG が作成、W3C が後に加わった「最新 HTML

勧告」(邦訳)

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

2 ホームページとブログ (説明)

2.1 ホームページが公開されるまで

プロバイダと契約し、ホームページスペースをもらう。

パソコンで HTML 文書を作る。

ファイル転送ソフトで文書、画像、音楽、動画等をまとめたフォルダ

ごとアップロードする

ブラウザで読む

2.2 HTML 文書の作成方法

Editor で HTML 文書を書く → 保存 → 転送

HTML Editor で書く → 保存 → 転送

ワープロソフトで書く → 保存→ HTML 変換→ 転送

プレゼンテーションソフトで書く→保存→ HTML 変換→ 転送

表計算ソフトで書く → 保存→ XHTML 変換→ 転送

ホームページ作成入門

16

データベースソフトで書く → 保存→ XHTML 変換→ 転送

2.3 ブログ, SNS, Wiki

• ネットサービスにメールアドレスで登録→ 登録場所でプロフィール

を書く→ ブログ(日記)等を書く、画像をアップロードする

3 アクセシビリティとは

意味=利用できる: 視覚,聴覚,肢体不自由な人々も,老若問わず, 多言語でも

総務省勧告

（http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/index_02.html）

各府省は、

障害者基本法及び電子政府推進計画に基づき、

ホームページの企画、設計、開発、制作、検証、保守、及び運用までの各

段階において、

日本工業規格（JIS X 8341-3）の必須項目から優先的にバリアフリー化を

進めるなど、

ホームページのバリアフリー化にしっかり対応する必要がある

解説: (解説：ウェブアクセシビリティ基盤委員会)

詳細論文：福田博同(2010)

ホームページ作成入門

17

4 わかりやすいホームページとは

ターゲットを絞る

日常日記だけ、とか、多趣味でも１つの趣味だけ

ほかの趣味は、それぞれ違うサイトに

1 ページに詰め込まない

ALTAIR で朗読してもらって 5 分以内

5 JIS X8341-3:2010 要点

ウェブアクセシビリティ基盤委員会の解説

• 多様な利用者

配慮不要者｜感覚機能（視覚｜聴覚｜重複障害）｜

運動機能（肢体不自由）｜認知機能（初心者｜多言語）

• ウェブを知覚し，理解し，操作できること

Perceivable 認知可能 ｜ Operable 操作可能 ｜

Understandable 理解可能 | Robust 現在・将来利用可能

• Web コンテンツの運用サイクル全般の要件(箇条 6)

企画(達成等級)・設計(条件決定)・制作開発・検証・保守運用

• PC, 携帯, スマートフォン等々でも利用可能

ホームページ作成入門

18

• テスト可能な達成基準

数値で実証する ｜ 達成等級 A, AA, AAA

• 最低限のコントラストに関する達成基準

テキスト及び画像化された文字の視覚的な表現には，

少なくとも 4.5:1 のコントラスト比がなければならない。

(中略) 注記 この達成基準は等級 AA の達成基準である。

• 参考：「ウェブアクセシビリティ規格 JIS X8341-3 の改正/梅垣正宏」

(DINF 障害保健福祉研究情報システム）

箇条 7 ウェブコンテンツに関する要件

7.1 知覚可能に関する原則

7.1.1 代替テキストに関するガイドライン

7.1.2 時間の経過に伴って変化するメディアに関するガイドライン

7.1.3 適応可能に関するガイドライン

7.1.4 識別可能に関するガイドライン

参考：「ウェブアクセシビリティ基盤委員会 JIS X 8341-3:2010 解説」

「具体的要件は WCAG2.0 を参照すること」としている。

7.1.1 代替テキストに関するガイドライン

すべての非テキストコンテンツには

ホームページ作成入門

19

代替テキストを提供して、

拡大印刷、点字、音声、シンボル、平易な言葉などの

ような、利用者が必要とする形式に変換できるようにする。

7.1.2 時間の経過に伴って変化するメディアには

代替テキストを用意する

例：

耳の聞こえない人に 動画に字幕で

目の不自由な人に 音声化

目も耳も不自由な人に 点字ディスプレイ

7.1.3 適応可能に関するガイドライン.

・必須項目のあるフォームのアイコンの説明文

・各セルの見出しがプログラムで解釈可能な時刻表

・チェックボックスのラベルがプログラムで解釈可能な入力フォーム

7.1.4 識別可能に関するガイドライン

利用者が、コンテンツを見やすくしたり、聞きやすく

したりする。これには、前景と背景を区別することも含む。

例： 明度差 輝度差

色弱者： 赤緑｜青黄

行間（日本のブラウザ独自）

ホームページ作成入門

20

BGM と主音声

箇条 7 ウェブコンテンツに関する要件

7.2 操作可能に関する原則

7.2.1 キーボード操作可能に関するガイドライン

7.2.2 十分な時間に関するガイドライン

7.2.3 発作の防止に関するガイドライン

7.2.4 ナビゲーション可能に関するガイドライン

6 HTML, CSS の W3C 標準チェック

W3C Markup Validation Service : W3C の Web ページ文法チェッカー

Another HTML -lint 5 / XyXon：石野恵一郎氏のチェッカーを HTML5 用にした。

W3C CSS Validation Service : W3C のスタイルシートのチェッカー

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

aDesigner / 浅川千恵子氏グループ: アクセシビリティチェッカー

epubcheck / Google : EPUB のチェッカー

ARTAIR for Windows / 日本障害者リハビリテーション協会

視覚障がい者用 Web 利用作成ツール

☆では、実際にチェックしてみよう

ホームページ作成入門

1

7 ブログ・SNS (実習)

☆安全なサイトから選ぶ

• Blog 例： Hatena ダイアリー

Blogger Yahoo!ブログ

twitter 等

• SNS 例： mixi Facebook

Myspace (音楽系) 等

手順

1. 申し込み：メールで確認、開設

2. 管理や設定でプロフィール設定

3. 日記を書く ・投稿する

4. コメント、トラックバックに返

信、スパム管理

7.1 Hatena ダイアリー

Hatena ダイアリーに行く

メールで登録する

登録終了後、Hatena ダイアリーに

ログインする（合言葉を入れて入

る）

ブログトップをクリックする（マ

ウスを押す）。

ホームページ作成入門

22

管理画面でデザインを選んだり

プロフィールを書く

記事を書く 見本:artnavi の日記

7.2 Blogger で試す

Blogger(link)に入る

Google アカウントに入る

Google アカウント取得後 Blogger に

入る

レイアウトやテンプレートで

カスタマイズする

ブログを表示してみよう

(例:心眼)

ホームページ作成入門

23

7.3 Facebook や Twitter

メールアドレスを持つ

公式サイトに行く

名前とアドレスで登録

サイトを初期編集投稿する

8. HTML5 とは

音声、静止画、動画等に特別なプラグイン(追加機能)が不用

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

ける

ホームページ作成入門

タッチパネルでフリック(軽くはたいて移動)やピンチ（摘んで拡大縮小）等

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

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

タグにセマンティクス（意味）を加えた（例：<header>は文頭, <nav>は道

案内, <article>は記事, <footer>は文末）

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

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

★ HTML5 の欠点

未対応ブラウザがある Internet Explorer

ついアクセシビリティへの配慮を忘れがちになる

音声、動画等、主要ブラウザに表示するため複数のファイルが必要となる

XML から自動出力するためには、XHTML 形式のタグを行うことで解決

(XHTML5)

9. HTML 文書（ファイル名.html）

<html>

<head>

この文書の属性（著者だとかキーワードとかスタイルとか）

</head>

ホームページ作成入門

25

<body>

ページで見える部分。図や音、動画はすべてリンクで可能

</body>

</html>

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

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

理由： 文書と見映えの分離: アクセシビリティ、SEO（検索エンジン対

策）、メンテナンス性、互換性、W3C（Web の仕様を決める団体）によ

る国際標準仕様 参考： ユーザビリティ / 筆者

9.2 Head 部 の例

<!DOCTYPE html> <!-- ドキュメントのタイプは html です宣言 -->

<html lang="ja"> <!-- 言語は日本語です -->

<head> <!-- head 部の始まり -->

<meta charset="utf-8" /> <!-- 文字コードは UTF-8 です -->

<title>タイトルを書く</title>

<!--[if IE]> <!-- 以下、古い MS-IE で HTML5 が利用できる仕組み -->

<script

src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

</script>

ホームページ作成入門

26

<![endif]--> <!—ここまで -->

<meta name="author" content="作者を書く" /> <!-- "をなくすな -->

<meta name="description" content="説明文を書く" />

<meta name="keywords" content="キーワード 1,キーワード 2" />

<!-- キーワードの区切りは , -->

<meta http-equiv="default-style" content="dun" />

<!-- 初期設定のスタイルシートは dun という名のファイルです -->

<link rel="stylesheet" title="dun" href="dunWhiteIndex.css" />

<link rel="stylesheet" title="hanten" href="print.css" />

<link rel="stylesheet" title="tate" href="tate.css" />

<!-- 以下、スタイルシートを JavaScript で変更するおまじない -->

<script type="text/javascript"> <!--

function changeCSS(sURL)

{

var obj = document.getElementsByTagName("link");

obj[0].href = sURL;

}

//--></script> <!—ここまで -->

</head> <!—head 部の終了 -->

ホームページ作成入門

27

9.3 Body 部の例

以下のような画面分割

Header 部 (タイトルを書く)

header 部説明

Article 部 (記事の見出しと内容) Nav 部 (道案内：リンク集)

Footer 部 (脚注部:例： 日付やコピーライト)

<body itemscope itemtype="http://schema.org/WebPage"> <!-- body 部の

はじまり。定義にないものを schema.org の定義を借りている -->

<header id="header"> <!-- header 部のはじまり。Id は header -->

<!-- 以下、スタイル切り替えフォームのおまじない -->

<form> <!--ボタンを押すとスタイルが変わるフォームのはじまり-->

<input type="button" value="通常"

onClick="changeCSS('dunWhiteIndex.css')"> <!-- 初期設定をこげ茶地 -->

<input type="button" value="印刷用"

onClick="changeCSS('print.css')"> <!-- 印刷用のスタイルシート -->

</form> <!-- form の終わり -->

<h1 itemprop="name">タイトルを書く：ここを直します</h1>

<h2 itemprop="description">タイトルの説明を書く</h2>

ホームページ作成入門

28

</header> <!--header 部の終わり-->

<!-- <section> <!—section の始まりだが、今回使わないのでメモに変換-->

<h2 itemprop="name">節の見出しを書く</h2> --> <!--メモの終わり-->

<nav> <!—nav 部 つまりナビゲーション部分のはじまり -->

<p>リンク集</p> <!-- p は段落。/p で終わる -->

<ol> <!-- ol は箇条書き -->

<li><a href="index.html" target="_top">トップへ行く</a></li>

<li><a href="jouhouSigenSosikiron201302.pdf">箇条書き 2</a> </li>

</ol> <!-- 箇条書きの終わり -->

<form method="get" action="http://www.google.co.jp/search"

target="new"> <!-- Google サイト内検索フォームのはじまり -->

<a href="http://www.google.co.jp/" target="new">

<img src="http://www.google.com/logos/Logo_25blk.gif"

alt="Google" /></a>

<input type="text" name="q" size="12" maxlength="255"

value="artnavi1 " />

<input type="hidden" name="ie" value="UTF8" />

<input type="hidden" name="oe" value="UTF8" />

<input type="hidden" name="hl" value="ja" />

ホームページ作成入門

29

<input type="submit" name="btnG" value="検索" />

</form> <!--form の終わり -->

</nav> <!-- nav 部の終わり -->

<article> <!-- article 部の終わり -->

<h3>記事の見出し 1</h3> <!-- h は章節等の区分け h1-h6 まである -->

<p itemprop="discription"> <!--段落のはじまり-->

文章を書く

<!-- 以下、リンクは a href で始まる、””内はファイル名.拡張子で、

ここにリンク先ファイル名を呼び込む。＞呼び出し語＜が見える -->

<a href="http://www.adobe.com/jp/downloads.html">リンクの呼出し語

</a>をクリックしましょう<br />

＜p＞で段落を決めて、＜br /＞は改行です。＜/p＞でくくります</p>

</article>

<!-- </section> -->

<footer> <!-- 初期設定をこげ茶地 -->

<p><span itemprop="title"><a href="index.html" target="_top">ト

ップへ</a></span>| <span itemprop="name">作者名</span> | <time

itemprop="startDate" datetime="2016-04-23">2016 年 4 月 23 日</time>

| 最終更新<time itemprop="lastDate" datetime="2016-05-03">2016 年

ホームページ作成入門

30

</time> | <span itemprop="url"><a href="next.html">次のページへ

</a></span> </p>

</footer>

</body> </html>

ホームページ作成入門

31

9.4 スタイルシート

HTML は文章とその構造を表し、スタイルシートで見栄えを決める。HTML

本文に書けるが、スタイルシートファイル(CSS)とリンクし利用する。

色弱の人には黒地に白文字で大きめの文字が読みやすい

白地は眼がちらつき見づらいので色味を出す

→ スタイルシートを使う

Body 全般や header 部, nav 部, footer 部など個別に指定可能

スタイルシート例：

body { /* body 部の背景焦げ茶文字白 120%目次用 */

width:90%; /* 全体幅を 90%にし余白を開ける*/

margin:1% auto; /* マージンを 1%内側にする*/

background-color:#281800; /＊ 背景色をこげ茶にする＊/

color:white; /* 文字を白にする：明度比は 1:4.5 以上が推奨*/

}

a{ color:yellow; } /* リンクの色は黄色*/

a:visited{ color:#ff6; } /* リンク済の色は橙*/

h1{ font-size:135%; } /* 階層（見出し）最大はフォントサイズが 135%*/

h2{ font-size:130%; }

ホームページ作成入門

32

h3{ font-size:125%; }

h4{ font-size:120%; }

h5{ font-size:115%; }

h6{ font-size:110%; }

hgroup, header, nav, section, footer {

display:block; /* 背景色をこげ茶にする*/

margin:1px auto;

padding:5px;

}

header {

text-align:left;

padding:10px auto;

background-color:#210;

} /* header 部を決めた */

header h2 { text-align:right; }

header ul, header li {

display:inline;

} /* 階層 2 を右詰にし、ul=箇条書きを一行内にいれる */

ホームページ作成入門

33

nav {

float:right;

width:50%;

font-size:90%;

line-height:1.3;

}

/* nav ナビゲーション部を右詰め、幅 50%、文字 90%、行間を 1.3 倍 */

section {

float:left;

width:98%;

line-height:1.4;

} /* section=章節の部分を左詰め、幅 98%、行間 1.4 に決めた*/

footer {

clear:both !important;

text-align: right;

font-size:85%;

} /* footer=脚注部分を右詰め、左詰めにしていたのを解除。*/

ホームページ作成入門

10. 元ファイル作成法：画像

10.1 図をペイントで描く

スタート（Windows キー）

プログラム(p キー)

アクセサリー

ペイント

でペイントが起動する

10.2 キャンバスサイズ変更

Web では、画像サイズを縮小する

とページが開く速度が速くなる

サイズ変更をクリック→変更場面

出現→

水平や垂直方向のパーセントを記

入

☆静止画関連リンク集

• ペイントソフト

• ドローソフト

• カメラで撮影

• OCR で読み込む

• パソコン画面を複写

初期画面

ホームページ作成入門

34

10.3 地色や円の描き方

バケツ選択→色（例：青）選択→

地をクリック→地色が青くなる

円弧を選択→ 色(例：黄色)を選

択→

左上から右下にマウスを動かす→

黄色い円弧ができる→

バケツ選択→

色選択→

円弧内をクリック→

色が塗られる

10.4 ブラシを使う

ペンをクリック→ブラシにする

線の太さを選ぶ

色を選ぶ→描く

ホームページ作成入門

35

10.5 自由曲線を描く

ペンを選ぶ

線の太さを選ぶ、色を選ぶ

曲線を引く→中間点を引っ張り、線を

変化させる

10.6 別の色を塗る

バケツを選択する

色を選択する

塗りたい場所をクリック

(境界線が必要)

11. 画像を保存する

ファイル→名前を付けて保存→保

存場所選択→名前を付ける→

Enter キーで確定させる。これは

Alt キー , F キー, A キー →

名前を入れる→Enter キー同様

F A

ホームページ作成入門

36

12. カメラ画像の作成方法

カメラ付属の取り込み用ソフトを

CD-ROM 等からインストール

撮影済みカメラと PC を USB ケー

ブルで接続→自動で取り込まれる。

ペイント等の画像ソフトで画像を

圧縮する→ 保存する

スマフォ撮影の場合、ファイルを

PC へ電子メールの貼付ファイル

で送る

13. 画面キャプチャ

教材作成などによく使う

パソコン画面を PrtScr キー

(Print Screen)を押し、記憶

ペイントなどの画像ソフトを開く

Ctrl キー + V キーで貼り付け(ペ

ースト)

範囲を選択→トリミングクリック

画像縮小→ 保存

P E

I

N

T

V

ホームページ作成入門

14. Web ページに埋め込む

画像はリンクで開く方法とページに埋め込む方法がある。

リンクは<a href=”ファイル名.拡張子”>画像</a>と書く

埋め込みは<img src=”ファイル名.拡張子” alt=”説明文” />と書く。

視覚障害者のため、必ず alt=”説明文” を入れる。

同じフォルダに画像ファイルを入れないでフォルダに入れた場合、「フォ

ルダ名/ファイル名.拡張子」と/でフォルダの中に入る。

15. 音声の作成

PC にマイクを接続しておく

Windows キー →

半角全角キー 「saundo」と入れ、

スペースバーで「サウンド」に変

換→ サウンドレコーダーが出現

Alt キー + S キーで録音開始→

(マウスでは赤い録音ボタンを押す)

Alt キー + S キーで録音終了しフ

ァイル名を書く

S A U

N D

O

ホームページ作成入門

38

15.1 BGM の作成

MML で作曲：「テキスト音楽サ

クラ / クジラ飛行机氏」をダウン

ロード→ウィルスチェック→解凍

→利用（プログラム開始）

雛形をクリック→トラック設定を

ダブルクリック→記入画面出現

音色変更は「音色(GrandPiano)」

を反転→「音色」をクリック→例

えば「ストリングス系」→「Violin」

をダブルクリック

「音符」を 8 に変え（8 分音符）

→「EOF」の前で改行→

MS-IME を「全角カタカナ」→

ドレミを入れる→∇で演奏する。

Alt キー, F キー, A キーで保存

Alt キー, F キー, M キーで midi 形

式で保存→ 自動的に Windows

Media Player で再生

F A M

ホームページ作成入門

15.2 音の Web への組み込み

Google Chrome は midi 形式に対応していないので次の方法で聞く

ハイパーリンク<a href=”ファイル名.拡張子”>呼び出し語</a>と書く

midi プラグインを入れる:例：

鳴らして録音し Wav ファイルにしてアップロード

wav 形式変換ソフトで変換:例:

Internet Explorer は HTML5 に対応していないバージョンがあるので,その

場合ハイパーリンクする。

埋め込み方法：次のように書く(拡張子は各音楽ファイル形式名)

<audio src="ファイル名.拡張子" autoplay></audio> <!--autoplay は自動演奏-->

<audio preload="metadata" controls> <!-- controls はプレイボタン等出現-->

<source src="ファイル名.m4a" type="audio/aac">

<source src="ファイル名.mp3" type="audio/mp3">

<source src="ファイル名.ogg" type="audio/ogg">

</audio>

マルチメディア関連リンク集 リンク再生

音(MIDI)埋め込み

音(MP3)埋め込み

動画(RealMedia)埋め込み

動画の埋め込み

動画(YouTube)埋め込み

ホームページ作成入門

16. 表の作成

Web ページに表形式を表示するのは、タグが複雑で、表計算ソフトで表を作

り、保存し、XML で保存し、そことリンクする方法が簡単である。

16.1 元の表を作る(Excel 活用)

Windows キー → exc と入力

→ Enter キーで Excel が起動する。

列：A～と行:1～の縦横の表で、下

欄がシート名(Sheet1～Sheet3)。

A 列 1 行目(A1 のセルという)から

項目名を書く

見本のようにリンク集を作ろう。

E2 セルにハイパーリンクしたア

ドレスを複写する：方法：

☆ブラウザでアドレスをコピーする

(Alt キー + D キー

☆Ctrl キー + C キー)。→ Excelに(Alt

キー + Tab キー)→E2 セル

☆ハイパーリンクする

(Ctrl キー + K キー)

☆貼り付ける

E

X

K V

ホームページ作成入門

41

(Ctrl キー + V キー)

☆ファイルを保存する。

Ctrl キー + S キー

デスクトップのフォルダに

link.xlsx で保存しよう。

さらに、

名前を付けて保存しよう：

Alt キー , F キー, A キー

ファイルの種類が出現

▼を押し、Web ページにする。

拡張子を html とする。

Link.html と link ファイルズフォ

ルダができる。

もとの Web ページにハイパーリ

ンクする。例：

<a href=”link.html”>リンク集</a>

と書く。

F A

ホームページ作成入門

42

17. PDF にする

PDF は Windows, MacOS, Linux な

ど複数の環境で利用できる「見た目

どおり」の配置を可能としたファイ

ル形式。作成するには、「Adobe

Acrobat」や互換ソフトをインスト

ール。作成方法は、印刷で PDF を

選ぶか、PDF で作成を選ぶ。

ホームページ作成入門

脚注 １ パスワード=合言葉 (参考ウィキペディア https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89 ２ コンピュータウィルス対策基準/情報処理推進機

構を参照：

https://www.ipa.go.jp/security/antivirus/kijun952.html ３ フォルダ＝ファイルなどの入れ物 (参考：コトバンク：

https://kotobank.jp/word/%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC-12459 ４ テキストエディタとは文字情報のみ処理するプロ

グラム、主にプログラミングに使われる (参考:ウィキペディア: https://www.wikiwand.com/ja/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF) ５ デスクトップとは机上パソコンの意味と、それで

最初に開いた画面をいう。 ６ CD-RW とは、書き込み可能なコンパクトディス

ク（コンパクトな光ディスク） ７ エクスプローラとは、探索者の意味でパソコンの

中を探索すること。そこで、階層的に目次を表示す

る画面もいう ８ USB フラッシュドライブとは,日本では一般に

【USB メモリ】と呼ばれる半導体メモリ (参考：ウィキペディア: https://www.wikiwand.com/ja/USB%E3%83%95%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%89%E3%83%A9%E3%82%A4%E3%83%96) ９ ウィンドウズキーとは,窓のような絵柄のパソコ

ン入力用のキー。Microsoft Windows パソコンに標

準装備し、スタートキーとも、スタートボタンとも

いう １０ コントロールキー (Ctrl キーと表示)とは、改行

や改ページなどを制御するキーの意味。参考:ウィキ

ペディア: https://www.wikiwand.com/ja/%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%AD%E3%83%BC １１ ATOK とは、ジャストシステムの【一太郎】に

使用される日本語入力システム http://www.atok.com/ １２ Google 日本語入力: http://www.google.co.jp/ime/ １３ 文字コードとは各文字に割り当てた番号とその

体系。以下のような種類がある。 ☆ASCII(英語、記号等の 256 文字以内) ☆JIS（日本工業規格）コード：約 6800 字でメール

に使用（いくつか改定版がある） ☆Shift-JIS ,拡張 JIS の意味で、Microsoft の決めた

文字コード。パソコン標準の文字コード ☆Unicode: 国際標準化機構の ISO/IEC 10646 とし

て世界標準となったユニコードコンソーシアムが提

唱実装した文字コード：2015 年現在、約 120,700 文

字 (参照:ウィキペディア: https://www.wikiwand.com/ja/Unicode １４ Alt キーとは、Alternate(代わりの)キーの意味で

オルトキーと呼ぶ。Ctrl キーや Shift キーとともに、

パソコンのショートカットキーで使う。 １５ ハイパーリンクとは、文書内になんでも参照でき

る仕組み。外部ファイルや Web ページ, 文書、画像、

音声、動画をリンクできる。この仕組みの文書に

HTML(H ハイパーT テキスト M マークアップ L 言

語)がある。 参考：ウィキペディア https://www.wikiwand.com/ja/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF １６ アプリとは、アプリケーションソフトつまり、応

用ソフトの意味。基本ソフト(OS:オペレーションソ

フト)の上で動く様々なソフト 参考:IT 用語辞典 http://e-words.jp/w/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BD%E3%83%95%E3%83%88.html １７ ダウンロードとは、ネット上のプログラムやデー

タを受信して自分のパソコン等に入れること。 １８ インストールとは、ハードウェアやソフトウェア

を使えるように設定すること。ダウンロードしたデ

ータ等も含まれる １９ プラグインとは機能を追加する簡単なプログラ

ムで、通常、インターネットを閲覧する「ブラウザ」

の仕様に含まれていない機能を、追加して使えるよ

うにすることを指す。 ２０ バックアップとは支援、予備のこと。PC 関連

では、ファイルを別にコピーして保存しておくこ

と ２１ タグ：付箋のこと。例えば、データに付箋を

つけておくとコンピュータもわかるようになる。

例：＜TITLE>タイトル</TITLE>と TITLE にタ

グを＜＞でつけておき、</TITLE>でくくると、タ

イトルは TITLE という意味だとわかる