lesson 8
第 8 回

6 章続き

6.4節続き

6.4.2

スタイルシートによるレイアウトのコツは， 情報ブロックのボックスモデルを理解することである． この節の説明を教科書 p.80 の図 6.4 を見ながら理解すること．

6.4.3

テキストに関するプロパティを用いて文字の太さやサイズを変更することができ る．

6.4.4

背景と文字色に関するプロパティを用いて背景と文字の色を変更したり， 背景に画像を設定することができる．

6.4.5

例 6.27 では div 要素 を使って， ユーザが定義したブロックに対する指定を行なっている． メモ帳を用いて例 6.27 を mystyle2.css という名前で html 直下に保存せよ．

スタイルシートを設定しただけの段階では表示に反映されない．以下の操作を 行え．

1. wtest.html が mystyle2.css を利用するように書き変えよ． (スタイルシートを適用する方法を参照 せよ．)
2. h1 要素以下の本文を <div class="maintext"> と </div> で囲め．この記述で本文全体が，クラスが maintext である div 要素として宣言されたことになる．

このクラス maintext の div 要素に対してスタイルシート の div.maintext の指定が有効になる． box-column クラスも同様にして利用する．

下の例を mystyle2.css の最後に追加せよ．

div.testbox{
     border: thin red solid;
     margin: 2em;
     padding: 1em;
}

wtest.html の適当な部分を <div class="testbox"> と </div> で囲み，ブラウザデ表示の変化を確認しながら margin, padding の値を変更してみよ．レイアウトのコツを掴むには，このよ うに border を表示させ，教科書 p.80 図 6.4 で確認するのが効果的である．

教科書を参考に独自の CSS を作成してみよ．

練習用画像の作成

今回の演習では画像を扱う． まず練習用の画像を作成する．

ペイントの立ち上げ

今回は Windows に標準で用意されている「ペイント」を使う． 「スタート」ボタンから「プログラム」→「アクセサリ」→「ペイント」 の順で選択し，ペイントを立ち上げよ．

画像サイズの設定

あまり大きい画像は扱いにくいので， 200x200 のサイズの画像の作成からはじめる． ペイントのメニューのうち， 「変形」→「キャンバスの色とサイズ」を選択し， 「幅」と「高さ」をともに 200 ピクセルに設定せよ．

画像の作成

ペイントの操作法については詳しくは説明しない． 春セメスタに「コンピュータリテラシ」を履修した学生は 教科書「入門リテラシー」の p.26 に基本操作の説明があるので参照すること． 画面左のメニューの下のほうにある丸いアイコンを押せば楕円， 四角いアイコンを押せば長方形が書ける． 何でもいいので簡単な画像を作成せよ．

画像の保存

ペイントのファイルメニューの「名前をつけて保存」 を選択する． ファイルの場所はネットワークドライブの html の直下，ファイル名は ptest, ファイルの形式は JPEG 形式を選択してください． html 直下に ptest.jpg という名前のファイルが作成されていることを確認せよ． 別の画像を作成するときもファイル名には 半角英数文字を使用するように注意せよ．

第 8 回の講義メモ

第 5 章

html で図表を扱う方法について説明する．

5.1

html 文書に画像を埋め込む方法と画像フォーマット， 画像を扱うときの注意について説明する．

5.1.1

img 要素を使って画像ファイルを文書内に取り込んで表示する． 先に作成した画像ファイル ptest.jpg を wtest.html の文書内に表示するには， その wtest.htm 文書に以下のように記入すればよい．

<p><img src="ptest.jpg" alt="練習用画像"></p>

src 属性で表示したいファイルの URI を指示， alt 属性で画像と等価なテキストを指示する． 画像が表示できるブラウザは src で指定されたファイルの画像を表示し， 画像が表示できないブラウザは alt で指定されたテキストを表示する．

img はインライン要素であり． 一枚の図が一文字と同様に処理される．body 要素の子要素として直接 img 要素は書けない．p 要素の中など記入すること．

実際に試してみよ． WWW に公開するには変更があったファイルについて サーバへのファイル転送 を行う必要があるが， 上記を行う前に自分の PC でチェックしてみよ． ブラウザからネットワークドライブのチェックしたいファイル を開いて確認できる．(InternetExplorer なら「ファイル」->「開く」->「参照」 でネットワークドライブ内のチェックしたいファイル を開く．)作成した文書が表示されるはである． この段階では WWW 上には公開されていないことに注意せよ．

5.1.2

alt 属性は画像と入れ換えみてしっくりくるものを選ぶべき． 教科書 p.51 図 5.2 では alt="Xeon Limited Partners" と指定するのが最もよい．

ナビゲーションのための右矢印の画像なら alt="→" などとしておくとよい． 純粋に飾りのためのもので意味をもたない画像なら alt="" としておくこと．

画像のキャプションの目的には title 属性を用いる. title 属性は img 以外にもほとんどの要素に共通して使え， マウスカーソルが上に置かれたときにヒントとして表示される．

5.1.3

画像フォーマットについては，JPEG か PNG フォーマットが推奨できる．

無難なのは現時点で最も普及している JPEG フォーマットである． ほとんどの画像処理ソフトが このフォーマットで出力する機能を持っているため利用しやすい． 特に写真などの自然画像に適した特性をもつ．

PNG フォーマットは透過色が使えるなど JPEG より優れた点も多い． W3C の勧告となったもので，新しいブラウザならすでに対応しているため， 現時点でも十分使える．計算センターでは PhotoEditor などで PNG フォーマットの画像を出力できる． GIF, BMP,JPEG,TIFF などのファイルは一旦 PhotoEditor で読みこみ， PNG フォーマットで別のファイルに出力することで PNG フォーマットに変換 できる． 色数が少ない単純な画像に適した特性をもつ．

5.1.4

画像はわかりやすさとインパクトという利点と， データサイズが大きいという欠点を合わせもつ． 画像を使うときには教科書 p.53 のような点に注意すること

第 7 回へ戻る, 第 9 回へ進む