日本語ワードプロセッサー（日本語ワープロ）Microsoft Wordの起動

2013 年 11 月 28 日
情報リテラシー（理系）資料
ウェブページによる情報表現（スタイルシート）
スタイルシートの利用法
準備
講義のページから今回の講義で使用する renshu.html，mydesign.css，image.png を
ダウンロードし，これらのファイルを同じフォルダに置いておく．
スタイルシートとは？
前回は HTML を記述することを勉強した．前回紹介した方法では，スタイル(フォントや文
字の大きさなどの属性)の指定を文章構造の中のタグの中で行っていた．しかし，この方法だと，
例えば，見出し(<h1>)の属性をすべて同じように変更しようとした場合，すべての <h1> タグ
を，<h1 style=”font-weight: bold”> のように書き換えなければならない．スタイルシートと
呼ばれる記述方法を用いれば，文章構造とスタイルを分離することができる．文章構造とスタ
イルを分離することの利点として次のようなことが挙げられる．
(１) 1 つの Web ページ内のすべてのタグや複数の Web ページ間でデザインを統一できる．
(２) デザインの再利用ができる．
(３) 古いブラウザなどに対する互換性が向上する．
スタイルシートを実現する方法はいくつかあるが，今回は代表的な CSS（Cascading Style
Sheet）について紹介する．CSS は次の 3 つの方法のいずれかで記述される．
 外部スタイルシート(別のファイル)を読み込む
 HTML ファイルのヘッダー部(<head>タグ内)に書き込む
 タグに直接書き込む
今回は，外部スタイルシートの方式について紹介する．外部スタイルシートの方式を用いる
ことによって，文章構造と内容を HTML ファイルに書き，スタイルを CSS ファイルに記述す
ることができ，文章構造とスタイルを分離することができる．また，CSS ファイルを 1 つ作成
しておけば，複数の HTML ファイルからその CSS ファイルに記述されたスタイルを参照する
ことができ，それらの HTML ファイルを Web ブラウザで閲覧した際には同じスタイルが適用
される．
HTML：***.html
文章構造
スタイル
スタイルシート：***.css
スタイル
HTML：***.html
文章構造
文章構造とスタイルの分離
HTML：***1.html
文章構造
スタイル
HTML：***1.html
文章構造
HTML：***2.html
文章構造
スタイル
HTML：***2.html
文章構造
参照
HTML：***3.html
文章構造
HTML：***3.html
文章構造
スタイル
スタイルシート：***.css
スタイル
複数の HTML ファイルに共通のスタイルを適用
1
2013 年 11 月 28 日
情報リテラシー（理系）資料
CSS を使うにあたって
CSS を使用する場合，HTML ファイルには次の記述が必要となる．
 ヘッダー部(<head>タブで囲まれた部分)に CSS を使うということを記述する．
 <meta>タグ内にスタイルシートとして CSS 形式を用いることを記述する．
 <link>タグ内にスタイルシートのファイル名を記述する．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>練習１</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="mydesign.css" type="text/css">
</head>
<body>
<h1>スタイルシートの練習</h1>
<p>これはスタイルシートの練習です．</p>
<h2>練習 1</h2>
<p>これもスタイルシートの練習です．</p>
</body>
</html>
renshu.html：HTML ファイルの記述例
CSS ファイルには次のような様式で属性
を記述する．
 タブ名のあとに｛｝をつけ，その中に
設定する属性を記述する．
 タブ名には<>をつけない．
 各属性の値には単位を付ける．
 10em ... 文字の高さを基準とした 1
文字分の長さ（em は文字 M の大き
さに由来）
 10ex ... 文字 x の高さ
 10px ... 10 ピクセル
 10in ... 10 インチ（1in=2.54cm）
 10cm ... 10 センチメートル
 10mm ... 10 ミリメートル
 10pt ... 10 ポイント（1pt=1/72in）
 10pc ... 10 パイカ（1pc=12pt）
右図は mydesign.css というファイル名で
CSS ファイルを作成した場合の例である．
例えば，表を作成するための table タグは
body {
background-color: #eeeeee;
color: #333333;
font-size: small;
margin: 0.25em;
}
h1 {
background-color: #cc0066;
border-color: #cccccc;
color: #ffffff;
font-family: sans-serif;
font-size: medium;
text-align: center;
}
h2 {
background-color: #ffffff;
border-color: #ff9999;
color: #990066;
font-family: sans-serif;
table {
font-size: small;
margin: 5pt;
text-align: left;
background-color: #0c0c0f;
}
}
のように記述されているので，HTML 中で
<table>
と書くだけで
table {
<table margin=”5” background-color=”#0c0c0f”>
}
margin: 5pt;
background-color: #0c0c0f;
2
2013 年 11 月 28 日
情報リテラシー（理系）資料
と記述したのと同じ効果を持つ．
【課題】
mydesign.css を書き換えて，好みの CSS ファイルを作成し、それを使用して自分が好きな場所
を紹介するウェブページを作成して下さい．(今回は画像の使用を必須とする)
使用した画像と、作成した css ファイル・HTML ファイルを 1 つのフォルダにまとめてアーカ
イブ形式（zip）とし、それを添付したメールを送信して下さい．(正しいメールの書き方で)
[圧縮ファイルの作成方法]
圧縮したいファイルやフォルダを右クリック→「送る」→「圧縮(zip 形式)フォルダ」をクリッ
ク
宛先： [email protected]
題名：情報リテラシー
締切：2013 年 12 月 3 日 23:59:59+0900(JST)
ファイル名：report.zip
3
2013 年 11 月 28 日
情報リテラシー（理系）資料
補足：文字コード
Web ページとは，
html で書かれたファイルが Firefox などの Web ブラウザによって解釈され，
表示されているものである．html ファイルはどの文字コードで書かれていたとしても，たいて
いの場合には，Firefox の文字コードの設定を「自動判別」にしておけば適切に文字コードを
自動的に判別してくれる．
しかし，もし，
「自動判別」にしても文字化けしてしまう場合には，文字エンコーディングを手
動で選択することができる．日本語の Web ページを表示しているはずであれば，文字エンコー
ディングから，「日本語 (Shift_JIS) 」「日本語 (EUC-JP) 」「日本語 (ISO-2022-JP) 」
「Unicode(UTF-8)」のいずれかを選択する．
4

Download Report