RIGHT:[[授業のページへ戻る>Lecture/CompPracR2003]] *コンピュータ演習(再) 第13回 [#v2c816a4] **HTMLファイルの作成(2) [#n1e48cfa] 前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、Webページとして必要な情報や、デザインや配色などを設定していきます。 **Webページに必要な情報 [#v4aae4f5] ***HTMLのバージョンの指定 [#b604a70e] HTMLにはいくつかのバージョンがあります。 現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。 HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ***文字コードの指定 [#a87044fc] コンピュータは世界中の国々で使われていますが、その国、その言語圏で使用される言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。日本語の文字コードには、おもに''シフトJIS''、''JIS''、''EUC''の3つがあり、Windowsで利用されているのは、シフトJISです。((http://tohoho.wakusei.ne.jp/wwwkanji.htm)) もし、ブラウザの使用できる文字コードと、Webページ(HTML)ファイルで使用されている文字コードが合わない場合、「''文字化け''」という文字が正しく表示されない現象が起こります。 しかし、HTMLファイルがどの文字コードを使用しているか書いておけば、 ブラウザが解釈して、正しく表示されるようになるます。 それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。 <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> ***署名の更新 [#q0331b98] ~<address>タグなどを使って、署名や連絡先、更新日などは、 必要があれば変更しておきましょう。 とくに更新日は、Webページの鮮度をあらわすものなので、 少しでも更新したら、日付を変更しておきましょう。 <address> 制作年月日: 2003-12-17; 更新年月日: 2004-01-07<br> <a href="mailto:○○">○○^</a> </address> **スタイルシート [#pea44d25] ***スタイルシートとは [#iae24541] ワープロソフトのWordには「スタイル」という機能があり、 フォントの種類や色などの書式のまとまりをスタイル(見出し、箇条書き等)として登録することで、 文書全体のデザインを統一できるのと同時に、デザインの変更をしやくすることができます。 HTMLでも、「''スタイルシート''」という手段があります。 文書の論理的な構造と、見栄えなどの表現の決まりごとを、分けて定義します。 ~<h1>や<p>などのタグが文書の構造を表現するのに対して、 スタイルシートでは、「<h1>タグの文字色は青」「<p>タグの文字の大きさは12pt」 のように表現のルールを決めます。 HTMLでのスタイルシートは、''CSS''(Cascading Style Sheet)といいます。 CSSを使うことで、タグを使った文書構造とデザインを分けて管理することができます。 ***CSSの書き方 [#l9207f11] 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"> ***色の指定 [#ia781c71] 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 ***色の変更 [#qe54f2d6] 文字や線に色をつけたり、背景色を設定するには、次のようにします。 -色を設定するには、''color''属性を使います。 p {color: #000080} -背景色を設定するには、''background-color''属性を使います。 h2 {background-color: #FFFF80;} -2つ以上の設定は、つづけて書くことができます。 body {color: (文字色); background-color: (背景色);} ***文字の装飾 [#p6cda06e] 文字の大きさや配置を設定するには、次のようにします。 -文字の大きさを設定するには、''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-align''属性を使います。 --左(left)、右(right)、中央(center)に、文字を揃えることができます。 h1 {text-align: center;} ***枠の装飾 [#scc6cfc6] -枠の太さ --border-width --border-top-width --border-bottom-width --border-left-width --border-right-width -枠のスタイル --border-style -枠の色 --border-color **参考リンク [#kb02c929] -とほほの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/ |