プリント

Web page を作ってみる（２）
2016/11/30
 スタイルシートに関すること
 スタイルシート(CSS)
 CSS (Cascading Style Sheet)ともいう。
 文書の飾り付け（書式設定）はスタイルシートを使うのがよい。
 ページ内の書式をまとめて設定したり、変更したりできる。
 新しい HTML 形式で推奨されている。
 CSS の詳細や色々な指定については、参考書や参考リンクで調べましょう。
 CSS を書く場所
 ページ内の一部分にそこだけ設定したいとき → その部分に直接書く
 その部分が何か tag で範囲指定されているとき
→ style 属性を使う
例： <h1 style="color:blue; background-color:red"> ･･･ </h1>
<p style="color:#ff0000"> ･･･ </p>
 特に範囲指定されていないとき
→ <div> または <span> タグで範囲指定する
例： <div style="font-size:200%"> ･･･ </div>
→ 範囲が改行で区切られる
例： <span style="font-size:20pt"> ･･･ </span>
→ 範囲は改行されない
 ページ内の書式をまとめて設定するとき → head 部分に style を書く
 そのページ内の書式を全部変えるとき
例： <head>
<title> ･･･ </title>
<style type=”text/css”>
h1 {color:blue; background-color:red}
h2 {color:#800080; background-color:#0000ff}
</style>
</head>
 ページ内でよく使う書式があるとき ⇒ 書式に名前をつけてそれを使う
例： <head>
<title> ･･･ </title>
<style type=”text/css”>
.akadai {color:red; font-size:300%}
</style>
</head>
<body>
：
<p class=”akadai”>あれあれこれこれ</p>
：
それそれどれどれ<span class=”akadai”>めだつ</span>これこれ
：
</body>
 正確な用語
 上の例で head に書いた h1, h2, .akadai などをセレクタという。
 書式として書いた color, background-color,…などをプロパティ（属性）という。
― 1 ―
 CSS で指定できるプロパティの例
 背景に関すること
background-color ... 背景色を指定する（例： #ff8800）
background-image ... 背景画像を指定する（例： url(syasin.jpg) ）
例： <head>
<title> ･･･ </title>
<style type=”text/css”>
body {background-image: url(haikei.gif)}
h1 {background-color:#ff00ff}
</style>
</head>
 文字に関すること
color .............. 文字色（前景色）を指定する（例： #ff8800）
font-weight ........ フォントの太さを指定する（例： bold）
font-size .......... フォントのサイズを指定する（例： 18pt 200%）
 テキスト（文字列・画像）に関すること
line-height ........ 行の高さを指定する（例： 200% 30px）
text-align ......... 行揃えの位置・均等割付を指定する（例： right center）
vertical-align ..... 縦方向の揃え位置を指定する
（例：top middle bottom）
text-decoration .... テキストの下線・上線・打ち消し線・点滅を指定する
（例： underline overline line-through blink）
 幅や高さに関すること
width .............. 幅を指定する（例： 300px 50%）
height ............. 高さを指定する（例： 300px 20%）
 枠線（ボーダー）に関すること
border-color ....... 枠線の色を指定する（例： #ff8800）
border-style ....... 枠線のスタイルを指定する
（例： solid groove ridge inset
border-width ....... 枠線の太さを指定する（例： 30px）
 回り込みに関すること
outset）
float .. 画像を左右に配置し、その後のテキストを回り込ませる（例：left right）
clear .. 回り込みを解除する
 色の指定 → RGB を数字で指定するか、色名で指定する
 16 進数で指定する ⇒ 例 #ff0088
赤(red)・緑(green)・青(blue)の強さをそれぞれ 00～ff で指定する
 10 進数で指定する ⇒ 例 rgb(255,192,0)
赤(red)・緑(green)・青(blue)の強さをそれぞれ 0～255 で指定する
 色名で指定する ⇒ 例 red
決められた色名で指定する
 色見本は井芹の授業ページにも載せてある。
 サイズ・長さの指定 → 比率（%）、画素数（px）、ポイント数（pt）などで指定する
 少し古い方法
 たとえば文字の飾り付けをするのに、
<font color=”･･･” size=”･･･”>あれあれこれこれそれそれ</font>
という指定方法があります。今でもこの方法は使えます。
 しかし、現在の HTML 規約では、この方法はあまり推奨しないということになっています。
この方法で指定すると、いくら文書内のデザインを統一しても、文書中に同じことを何度も書か
なければいけないからです。できるだけ新しい CSS の書き方に慣れていきましょう。
― 2 ―
 別のページへのリンク
 同じフォルダ中の別のファイル（別のページ）にジャンプさせる
top.html
別のページにリンクするには、
<a>…</a>で挟む。挟まれた部
分の文字をクリックすると、ジ
ャンプする。
<a>はアンカー(anchor)の略。
<p>
ここをクリックすると<a href="sakuhin.html">作品集</a>へ行くよ
</p>
<p>
<img …>を入れておくと、画像をク
ここをクリックすると<a href="nikki.html">日記</a>へ行くよリックしたときにジャンプする。
</p>
<p>
この絵をクリックすると<a href="syasin.html"><img src=”icon.png”></a>写真集へ行くよ
</p>
sakuhin.html
syasin.html
nikki.html
 別の場所（サーバー）のページにジャンプさせる
index.html
<p>
ここをクリックすると<a href="http://www.yahoo.co.jp">ヤフー</a>へ行くよ
</p>
Yahoo のページ
 html ファイルの編集
 html ファイルを編集するために開くには、
フォルダー内の html ファイルのアイコンの上で右クリック＞送る＞ TeraPad
 作成した html ファイルの内容をブラウザ（インターネットエクスプローラ：IE）で表示させて
確認するには
Terapad で［上書き保存］して、ファイルのアイコンをダブルクリック
または
Terapad ツールバーの IE アイコンをクリック
 Terapad や IE を開いたままで編集しながら、ブラウザで表示させて確認するには
Terapad で［上書き保存］して、IE の［最新の情報に更新］ボタン
をクリック
 画像ファイルの調整
 画像ファイルのサイズや縦横を調整するには、画像編集ソフトを使う。
 画像ファイルのアイコンの上で右クリック＞送る＞ Irfanview
 ［スタート］ボタン＞すべてのプログラム＞ユーティリティ＞ JTrim
 ［スタート］ボタン＞すべてのプログラム＞ユーティリティ＞ Paint.NET
― 3 ―
実
習
① 前回作成した「My 作品集 web page」を飾り付ける。
② html ファイルを Terapad またはメモ帳で印刷する。（モノクロ）
 Terapad またはメモ帳で html ファイルを開く。
 ［ファイル］メニュー＞「印刷」で印刷する。
ツールボタン
③ web page を IE（インターネットエクスプローラ）で印刷する。（カラープリンタ）
 IE で html ファイルを開く。
 印刷する前に必ず、［ツール］ボタン＞「印刷」＞「印刷
プレビュー」でページ数を確認する。
 背景の画像も印刷したいときは、［ツール］ボタン＞
「印刷」＞「ページ設定」で「背景の色と画像を印刷する」
にチェック（）を入れておく。
 ページ数が多いときは、［印刷サイズの変更］で縮尺
を変えて 1 ページにたくさん入るようにする。
 ［ツール］ボタン＞「印刷」＞「印刷」で、印刷ダイアログボックスを開く。
プリンタを指定し、さらに［詳細設定］ボタンでプリンタの設定を変える。
［基本］タブで「両面」や「まとめて 1 枚」を指定すると、1 枚に 2 ページを縮小印刷できる。
④ 印刷したものを全てホチキスで綴じて（左上を綴じる）提出する。
― 4 ―

Download Report