[PR]DoCoMoご利用の方必見!:無料の運命鑑定≪スピリチュアルの館≫

Webデザイン入門


2002/09/03 作成 (by Maria)

○Webデザイン初歩の初歩

 えー、本当なら「Web」つーのは何だとかWWWつーのは何かとかHTMLつーのは何だとかブラウザっちゅーのはいかなるものなのかとか、そういう話をしなければならないのどす。ですが、「とにかく始めなければならない」という制約があるので、そういう話はすべてすっ飛ばして、「HTMLでスクリプトを書く」というところから始めてしまいたいと思います。考えたら“スクリプト”っつーのは「書く」ということだから、「スクリプトを書く」っつーのは変な日本語だけどまあいいや。つまりは、WWW(ワールド・ワイド・ウェブ)という全世界的(ワールドワイド)なコンピュータ・ネットワーク(つまりはインターネットのことです)があり、それに加盟っちゅーか加入しているコンピュータのどっかに「スクリプト言語」(HTMLがその代表)っちゅーので書いた「スクリプト・ファイル」っちゅーのを置いておくと、世界中のどっからでもそのファイルの所在(URL)がわかればブラウザというソフトウェアを使ってそのファイルが読めて(表示できて)、そのファイルをどう書くと読む側ではどんなふうに見える(表示される)かを勉強しよう、つーことなわけです。おわかりか?

 そんなわけで、必要なのは

の二つです。なに、「テキストエディタ」とか「ブラウザ」とかいうのが何だかわからない? そういう人は近くにいるコンピュータに詳しい人に相談してね。(そういやフロントエンドプロセッサだとかデバイスドライバだとかいった言葉も説明しとかないといけないのかも。ふにゃー)

○とにかく書いてみようではありませんか

 まず、エディタを立ち上げてください。よっこらしょ。(←立ち上げている)
 で、以下のコードを打込んでください。一部インデントを表示するために全角の空白を使っていますが、これはタブなり英数半角スペースで置きかえてください。なに、何を言ってるのかさっぱりわからない? 困ったなぁ。そういう人はやっぱり近くにいるコンピュータに詳しい人に相談してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html"; charset="Shift_JIS">
 <title> Hello </title>
 <style type="text/css">
 </style>
</head>
<body>
 Hello world!
</body>
</html>

 ここでちょっと注意。一行めの
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
は、本当にファイルの「一行め」、「最初の行」に書いてください。なんなら書かなくていいです。この一行があるから動かないことはあっても、この一行がないから動かないことはありません。単なるお呪(まじな)い以下の一行です。「だったらなぜそういうものを書くのだ!」と腹が立つかもしれませんが、理由はずっと後で説明します。
 入力が終わったら、“hello.html”という名前で保存してください。
 で、次にブラウザを立ち上げます。ブラウザの「ファイル」メニューから「ファイルを開く」を選び、hello.htmlを選んでください。ウィンドウが開き、
Hello world!
と表示されたら成功です。ウィンドウのタイトルは“Hello”になっていますか? いちおう確認してください。

○それではさっそく応用編

 えー、じつは、ここまで来ればWeb道は成ったも同然であります。後は何をするかというと、
 <title> 〜 </title>の部分を適宜書き換える。
 <style>行と</style>行の間にあれこれ書く。
 <body>行と</body>行の間にあれこれ書く。
の三つをするだけ。とはいえこの三つか結構大変なのではありますが、とにかく全体の枠組はこれで完成したわけです。

 では、さっそく応用スクリプトを書いてみましょう。hello.htmlをfavor.htmlという名前でコピーします。で、以下のように書きかえてください。書換え部分は上の三点だけです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html"; charset="Shift_JIS">
 <title> お気に入りサイト </title>
 <style type="text/css">
 </style>
</head>
<body>
<ul>
 <li><A href="http://users.hoops.ne.jp/joshya/"> 雑魚亭 </a></li>
</ul>
</body>
</html>

 えー、こういうファイルを作っておくと、いちいちブラウザを起動しなくても、このファイルをダブルクリックしてお気に入りのサイトの名前をクリックするだけでそのサイトを見ることができます。ついでながら、ちょっと変えるとメールを送ることだってできるんだよ。わくわく。

○将来性を考える。

 廃止を予告されたエレメントを使わない。

 以下の十個は HTML 4.0 で廃止を予告されたエレメント。
<APPLET>〜</APPLET>
  <CENTER>〜</CENTER>
  <DIR>〜</DIR>
  <FONT>〜</FONT>
  <BASEFONT>〜</BASEFONT>
  <ISINDEX>〜</ISINDEX>
  <MENU>〜</MENU>
  <STRIKE>〜</STRIKE>
  <S>〜</S>
  <U>〜</U>
 

補足:
 以下の三つはHTML 4.0 ですでに廃止されたエレメント。
  LISTING
  PLAINTEXT
  XMP(→PREで代用可能)
 

○スタイルシートを活用する。

<CENTER>〜</CENTER>タグ
 クラス定義で
  text-align:center;
とし、
 <SPAN>〜</SPAN>で囲ってクラス指定をする。(text-align:center;)

 物理エレメントはなるべく使わず、論理エレメントに置き換えるなどして、意味に即した表現をする。
 物理エレメントの例
  <B>〜</B>タグ(太文字/bold)
   →スタイルシートで置換える。
  <I>〜</I>タグ(イタリック/斜体/italic))
   →CITEやEMで置き換える。
  <TT>〜</TT>タグ(等幅(タイプライタ(TeleTypeか?)))
  <SUP>〜</SUP>タグ(上付添字/superscript)
  <SUB>〜</SUB>タグ(下付添字/subscript)

 以下の三つはHTML 4.0で廃止を予告されたエレメント。
  <U>〜</U>タグ(下線/underline)
   →スタイルシートで置換える。
  <S>〜</S>タグ(打消線)
  <STRIKE>〜</STRUKE>タグ(強調)

 これ以外にも、BIGやSMALLがある。

 なお、論理エレメント
  <CITE>〜</CITE>タグ(引用文)

  <CODE>〜</CODE>タグ(コンピュータのプログラム)
  <VAR>〜</VAR>タグ(変数)
  <DFN>〜</DFN>タグ(予約語)
  <KBD>〜</KBD>タグ(キーボードからの入力)
  <SAMP>〜</SAMP>タグ(サンプル出力)

  <EM>〜</EM>タグ(強調)
  <STRONG>〜</STRONG>タグ(強調(EMより強い))

などがある。

 以下の二つはHTML 4.0で廃止を予告されたエレメント。
<FONT>〜</FONT>タグ
<BASEFONT>
 →スタイルシートで置き換え。

○閲覧者の環境に配慮する。

 特定のブラウザに固有の機能を用いない。
 低解像度ディスプレイでの表示にも配慮する。
 視覚障礙等、閲覧者のハンディキャップに配慮する。


[タイトルページに戻る]
[先頭に戻る]

[PR]≪占い奇跡の恋愛術≫初回無料:幸せな結婚へ導きます。本格結婚鑑定