*情報教育演習II 第12回 [#v71dac6c] **前回の復習:HTMLファイルの作成(1) [#nb82a8d3] -HTML(Hyper Text Markup Language) --Webページを作るためのコンピュータ言語 ---文章の意味(役割)を指定 「○○から××までを見出しにする」 ---表示のしかたを指定 「○○から××までを太字にする」 ---ハイパーリンクを設定「ほかのファイルへジャンプする」 -タグ(tag) --文章に意味や表示の仕方を指定するために使うマークを使う ---「<」と「>」で囲まれた文字列(タグ名) ---開始タグ(<...>)と終了タグ(</...>)で囲んで指定する(一部終了タグのないものもある) -最低必要なタグ --html -- HTMLファイルであること示す --head -- HTMLファイルに関する情報 --title -- Webページのタイトル --body -- Webページの中身(表示される部分) #ref(tag.png,nolink); -文書の構造をあらわすタグ --h1, h2, ..., h6 -- 見出し(6段階) --p -- 段落 --br -- 改行 --address -- 署名や連絡先 -文字の飾りをあらわすタグ --b -- 太字 --i -- 斜体 --hr -- 水平線(区切り線) -箇条書きのためのタグ --ul -- 番号なし箇条書き --ol -- 番号つき箇条書き --li -- 箇条書きの項目 --dl,dt,dd -- 説明つき箇条書き -リンクのためのタグ --a -- リンクを設定 **HTMLファイルの作成(2) [#aaf4277a] 前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、Webページとして必要な情報や、デザインや配色などを設定していきます。 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 **Webページに必要な情報 [#q4b697cb] ***箇条書き [#r3c5a18e] -<ul>...</ul>、<ol>...</ol> --箇条書きを設定します。 --ulタグは番号なし、olタグは番号つきの箇条書きに使います。 -<li>...</li> --箇条書きの中の項目を設定します。 --liタグは、次のようにul、olのタグの中の項目に使います。 <ol> <li>ひとつめ</li> <li>ふたつめ</li> </ol> -<dl>...</dl>, <dt>...</dt>, <dd>...</dd> --説明つき箇条書きを設定します。 --dlタグの中に、項目名(dtタグ)とその説明(ddタグ)を書きます。 <dl> <dt>項目1</dt> <dd>項目1の説明</dd> <dt>項目2</dt> <dd>項目2の説明</dd> </dl> 「〜ついて紹介します。</p>」のあとに、次のように入力しましょう。 <ul> <li>「わたし」について</li> <li>「街」について</li> <li>「わたし」と「街」</li> </ul> ***リンク [#s71479b1] -<a href="...">...</a> --他のWebページにジャンプするリンクを設定します。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。 --次のようにすると、[[Yahoo! JAPAN:http://www.yahoo.co.jp/]]にジャンプします。 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> --次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a> 「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a> 箇条書きの項目に、次のようなリンクを設定してください。 -「わたし」について:prefile.htmlへのリンク -「街」について:town.htmlへのリンク -「わたし」と「街」:memory.htmlへのリンク ***画像の配置 [#vda46367] 画像データを配置するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします ***表によるレイアウト [#me7b5fd4] -<table>...</table> --テーブル(表)を設定します。 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します(0にすると枠線が見えなくなる) -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<tr>...</tr> --テーブルのひとつの行を設定します。 -<td>...</td> --テーブルのひとつのマス目(セル)を設定します。 #ref(table_el.png,nolink); <table border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <table> |1|2|3| |4|5|6| -<table cellspacing="セルの間隔"> --セルとセルの間隔を設定します(セルと外枠の間隔も設定されます) -<table cellpadding="セル枠と内容との間隔"> --セルの枠と内容の間隔を設定します <table border="2" cellspacing="1" cellpadding="5"> ''<table>''要素は、本来、表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。 |>|CENTER:メインメニュー| |CENTER:サブメニュー|CENTER:コンテンツ(内容)| |>|CENTER:署名| **色の指定 [#n3b34c14] HTMLでは、文字や線の色などを指定できます。 指定するには、色の名前や色の値を使います。 :色の名前| 代表的な色(16色)には、名前がつけられています。 |COLOR(white):BGCOLOR(black):black|BGCOLOR(gray):gray |BGCOLOR(silver):silver|BGCOLOR(white):white | |BGCOLOR(red):red |BGCOLOR(yellow):yellow |BGCOLOR(lime):lime |BGCOLOR(aqua):aqua | |COLOR(white):BGCOLOR(blue):blue |BGCOLOR(fuchsia):fuchsia|COLOR(white):BGCOLOR(maroon):maroon|COLOR(white):BGCOLOR(olive):olive | |COLOR(white):BGCOLOR(green):green|COLOR(white):BGCOLOR(teal):teal |COLOR(white):BGCOLOR(navy):naby |COLOR(white):BGCOLOR(purple):purple| :色の値| 光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。 16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。~ blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。~ --参考:とほほの色入門:色見本 ---http://tohoho.wakusei.ne.jp/wwwcolor.htm ***文字の色・大きさの設定 [#t00e8a2b] 文字の色や大きさを設定するには、<font>要素にcolor属性やsize属性を追加します。 -<font color="指定した文字色"> 〜 </font> --文字色を設定します。 -<font size="指定した大きさ"> 〜 </size> --文字の大きさを設定します。 --1〜7の数字を使って指定することができます --big(大きく)やsmall(小さく)という指定もできます ---大きさの設定については、ブラウザによって実際に表示される大きさは異なります <font color="blue" size="6"> <font color="#FFCC00" size="small"> ***ページ全体の文字色・背景色の設定 [#s42bc8f9] ページ全体の文字色や背景色を設定するには、<body>要素にtext属性やbgcolor属性を追加します。 -<body text="指定した文字色"> 〜 </body> --ページ全体の文字色を設定します。 -<body bgcolor="指定した背景色"> 〜 </body> --ページ全体の文字色を設定します。 -text属性とbgcolor属性を組み合わせて使うこともできます <body text="#000000" bgcolor="#FFFF00"> **Webページに必要な情報 [#q4b697cb] ***HTMLのバージョンの指定 [#kb607450] HTMLにはいくつかのバージョンがあります。 現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。 HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ***文字コードの指定 [#z9d78161] コンピュータは世界中の国々で使われていますが、その国、その言語圏で使用される言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。日本語の文字コードには、おもに''シフトJIS''、''JIS''、''EUC''の3つがあり、Windowsで利用されているのは、シフトJISです。((http://tohoho.wakusei.ne.jp/wwwkanji.htm)) コンピュータは世界中の国々で使われています。 さまざまな国の言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。 日本語の文字コードには、おもに''シフトJIS''、''JIS''、''EUC''の3つがあり、Windowsで利用されているのは、シフトJIS、 電子メールで利用されているのは、JISコードです。((http://tohoho.wakusei.ne.jp/wwwkanji.htm)) もし、ブラウザの使用できる文字コードと、Webページ(HTML)ファイルで使用されている文字コードが合わない場合、「''文字化け''」という文字が正しく表示されない現象が起こります。 もし、ブラウザが表示しようとする文字コードと、HTMLファイルで使用された文字コードが合わない場合、文字が正しく表示されない現象(''文字化け'')が起こります。 しかし、HTMLファイルがどの文字コードを使用しているか書いておけば、 ブラウザが解釈して、正しく表示されるようになるます。 したがって、ブラウザが文字コードを正しく判断できるように、 HTMLファイルにどの文字コードを使用しているか書いておきます。 それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。 <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> ***署名の更新 [#zecd10dc] また、HTMLファイルがどこの国の言葉で書かれているかも、設定することができます。 <html lang="ja"> ***著作権表示と署名の更新 [#zecd10dc] ~<address>タグなどを使って、署名や連絡先、更新日などは、 必要があれば変更しておきましょう。 とくに更新日は、Webページの鮮度をあらわすものなので、 少しでも更新したら、日付を変更しておきましょう。 また、自分が制作したものを示すために、「著作権」の表示をしておきましょう。 著作権の表示には規程はありませんが、 慣習で使われている「Copyright (C) 発行年 著作者名. All rights reserved.」でよいでしょう。 <address> 制作年月日: 2003-12-17; 更新年月日: 2004-01-07<br> <a href="mailto:○○">○○^</a> Copyright (C) 2004 Minoru Kawano. All rights reserved.<br> 制作年月日: 2004-06-23; 更新年月日: 2004-07-07<br> <a href="mailto:自分のメールアドレス">自分の名前</a> </address> **スタイルシート [#l498ff6c] ***スタイルシートとは [#sf165ba0] ワープロソフトのWordには「スタイル」という機能があり、 フォントの種類や色などの書式のまとまりをスタイル(見出し、箇条書き等)として登録することで、 文書全体のデザインを統一できるのと同時に、デザインの変更をしやくすることができます。 HTMLでも、「''スタイルシート''」という手段があります。 文書の論理的な構造と、見栄えなどの表現の決まりごとを、分けて定義します。 ~<h1>や<p>などのタグが文書の構造を表現するのに対して、 スタイルシートでは、「<h1>タグの文字色は青」「<p>タグの文字の大きさは12pt」 のように表現のルールを決めます。 HTMLでのスタイルシートは、''CSS''(Cascading Style Sheet)といいます。 CSSを使うことで、タグを使った文書構造とデザインを分けて管理することができます。 ***CSSの書き方 [#j1f7730e] CSSの書き方にはいくつか方法があります。 CSSを利用するときには、<head>タグの中に次の行を書いておきます。 <head> <meta http-equiv="Content-Style-Type" content="text/css"> CSSでは、タグの「属性」に「値」を指定します。 たとえば、<h1>タグの文字色を赤に設定する場合を考えましょう。 (授業では、2.の方法を使います) +タグに<STYLE>属性を設定する(1ヶ所だけの指定) --書き方: <(タグ) style="(属性): (値);"> --例: <h1 style="color: red;">見出し</h1> +<head>タグの中に<style>タグを設定する(同じタグすべての指定) --書き方: (タグ) {(属性): (値); (属性): (値); ...} --例: <head> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- h1 {color: red;} --> </style> +CSSを書いた別ファイルを指定する --default.cssというファイルを用意する h1 {color: red;} --<head>タグの中に、次の行を追加する <link rel="stylesheet" href="default.css" type="text/css"> ***色の指定 [#p0c05d96] HTMLでは、文字や線の色などを指定できます。 指定するには、色の名前や色の値を使います。 -色の名前 --代表的な色(16色)には、名前がつけられています。 |COLOR(white):BGCOLOR(black):black|BGCOLOR(gray):gray |BGCOLOR(silver):silver|BGCOLOR(white):white | |BGCOLOR(red):red |BGCOLOR(yellow):yellow |BGCOLOR(lime):lime |BGCOLOR(aqua):aqua | |COLOR(white):BGCOLOR(blue):blue |BGCOLOR(fuchsia):fuchsia|COLOR(white):BGCOLOR(maroon):maroon|COLOR(white):BGCOLOR(olive):olive | |COLOR(white):BGCOLOR(green):green|COLOR(white):BGCOLOR(teal):teal |COLOR(white):BGCOLOR(navy):naby |COLOR(white):BGCOLOR(purple):purple| -色の値 --光の三原色である、赤(R)緑(G)青(B)の強さを値であらわします。 --16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)を使い、RGBそれぞれを00〜FFまでの256段階で設定することができます。 --blackは#000000、redは#FF0000、whiteは#FFFFFFのように、「#」のあとにRGBの値を設定します。 -参考:とほほの色入門:色見本 --http://tohoho.wakusei.ne.jp/wwwcolor.htm ***色の変更 [#xec7f7a1] 文字や線に色をつけたり、背景色を設定するには、次のようにします。 -色を設定するには、''color''属性を使います。 p {color: #000080} -背景色を設定するには、''background''属性を使います。 h2 {background: #FFFF80;} -2つ以上の設定は、つづけて書くことができます。 body {color: (文字色); background: (背景色);} ***文字の装飾 [#l63ef4b1] 文字の大きさや配置を設定するには、次のようにします。 -文字の大きさを設定するには、''font-size''属性を使います。 --大きさを指定には、3つの種類があります。 ---絶対的な大きさ:xx-small, x-small, small, medium, large, x-large, xx-large h1 {font-size: xx-large;} ---相対的な大きさ:larger, smaller p {font-size: larger} ---パーセンテージ:90%, 120%など address {font-size: 90%;} -文字の太さを設定するには、''text-wight''属性を使います。 --normalやbold, bolderなどがあります。 h2 {text-wight: bold;} -文字の位置を設定するには、''font-align''属性を使います。 --左(left)、右(right)、中央(center)に、文字を揃えることができます。 h1 {font-align: center;} ***枠の装飾 [#b74c9899] 見出しや段落には、通常、見えない枠があります。 枠のスタイルを設定することで、枠を描くことができます。 描いた枠には、太さや色を設定することができます。 -枠を設定するには''border''ではじめる属性を使います。 --''border-top''は上枠、''border-bottom''は下枠、''border-left''は左枠、''border-right''は右枠を設定します。 --すべての枠を同じように設定するには、''border''属性を設定します。 --使い方は、次のとおりです。border-topもborder-leftもborder-rightもborderも同じように設定できます。設定には、順序は決まっていませんし、省略できます。 border-bottom: (色の設定) (太さ) (線のスタイル); border-bottom: blue 3px double; --線の太さには、次の値を設定できます。 ---thin, meduim, thick(標準であるmediumから見た大きさ) ---2pxや4pxなど(具体的な太さ:pxはピクセル(画面上の点)) --線のスタイルには、次の値を設定できます。 ---none (枠を描かない:初期値) ---dotted (点線) ---dashed (破線) ---solid (実線) ---double (二重線) ---groove (溝のような線) 枠が溝のように描かれる。 ---ridge (盛り上がった線) 枠が盛り上がっているように描かれる。 ---inset (ボタンを押したような線) ---outset (ボタンが押される前のような線) -枠の外側の余白を設定するには''margin''ではじめる属性を使います。 --''margin-top''は上側、''margin-bottom''は下側、''margin-left''は左側、''margin-right''は右側を設定します。 --すべての余白を同じように設定するには、''margin''属性を設定します。 --使い方は、次のとおりです。margin-topもmargin-leftもmargin-rightもmarginも同じように設定できます。設定には、順序は決まっていませんし、省略できます。 margin-bottom: (余白の長さ); margin-bottom: 1em; --長さには、em(1emは1文字の高さ)などがつかます -枠の内側の余白を設定するには''padding''ではじめる属性を使います。 --''padding-top''は上側、''paddin-bottom''は下側、''paddin-left''は左側、''paddin-right''は右側を設定します。 --すべての余白を同じように設定するには、''paddin''属性を設定します。 --使い方は、次のとおりです。padding-topもpaddin-leftもpadding-rightもpaddinも同じように設定できます。設定には、順序は決まっていませんし、省略できます。 padding-bottom: (余白の長さ); padding-bottom: 1em; --長さには、em(1emは1文字の高さ)などがつかます **参考リンク [#f0ccd891] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |