css デザインを体験してみる <その1>

HTML ソースの作成や編集を全く経験したことがない人を対象に、css を使ったウェブページデザインの基本を体験してもらうためのページです。ちょっと長いですが、がんばってやってみてください。先に「css の基本的な考え方」のページを読んでいただけると、より理解が深まると思います。

1. 空の HTML ファイルを用意する

1. まず、下記の Test.htm をクリックしてください。ブラウザが空白のページを表示するはずです。

2. 次に、ブラウザの[表示]メニューから[ソース]を選択してください。テキストエディタがページのソースを表示するはずです。(ソースがブラウザで開かれてしまう場合は、表示されたソースをテキストエディタにコピーして使って下さい。)

3. 以下、ページの編集は全て テキストエディタを用います。

2. ページの紹介文を書く

さあ、実際にソースを書いてみましょう。各ステップで書くのは赤字の部分です。ページの内容は全て、ソースの <BODY> と </BODY> の間に記述します。下の例にしたがって、自分でページの紹介文を書いてみましょう。(文章は、 <P> と </P> の間に書きます。またソース内の改行は一切無視されます)

ソース 1

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE></TITLE>

</HEAD>

<BODY>

<P>このページは自分の好きな動植物についてのページです。</P>

</BODY>

</HTML>

3. 「はじめに」という名前の見出しの下に紹介文を収める

「はじめに」という名前の見出しを作って、上記の紹介文をその下に含めましょう。見出しを表すタグ <H1> </H1> を使います。

ソース 2

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE></TITLE>

</HEAD>

<BODY>

<H1>はじめに</H1>

<P>このページは自分の好きな動植物についてのページです。</P>

</BODY>

</HTML>

4. サブ見出しを作る

ページ全体の紹介が終わったので「動物」と「植物」いう二つのサブ見出しを作ります。 <H1> </H1> より1段階小さな見出しを表すタグ <H2> </H2> を使います。

ソース 3

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE></TITLE>

</HEAD>

<BODY>

<H1>はじめに</H1>

<P>このページは自分の好きな動植物についてのページです。</P>

<H2>動物</H2>

<H2>植物</H2>

</BODY>

</HTML>

5. サブ見出しの内容を書く

サブ見出しの内容を書きます。紹介文と同じく <P> と </P> を使います。

ソース 4

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<TITLE></TITLE>

</HEAD>

<BODY>

<H1>はじめに</H1>

<P>このページは自分の好きな動植物についてのページです。</P>

<H2>動物</H2>

<P>動物にもいろいろあるね。</P>

<H2>植物</H2>

<P>植物にもいろいろあるね。</P>

</BODY>

</HTML>

6. チェックしてみよう!

ブラウザを使って、今まで作ってきたソースがどのように見えるかチェックしてみましょう。作成中のファイルをいったん上書き保存し、InternetExplorer などのブラウザで、[ファイル] - [開く] - [参照] から Test.htm を指定して開いてください。(ウェブページ作成ソフトを使っている方は、プレビューモードにするだけで確認できますよね。)

どうですか? 「超」地味ですよね。でもこれが HTML の本来の姿なのです。最も基本的なウェブページの姿です。いくつかの段階のある見だしと本文という組み合わせは、伝えたい情報がシンプルにまちがいなく伝わる形式でもあります。でも「これじゃあんまりだ」と、おそらくほとんどの方が思われるでしょう。さて、どうするか。ほとんどの人はここで、ウェブページ作成ソフトにあらかじめ装備されている「らくらく作成術」や「簡単モード」などを使って、用意されている画像を使用したりレイアウトをします。しかしこれらを使用して作られたページは MoogaOne トップページの「css の基本的な考え方」で述べたとおり、ユーザビリティの観点から見ると優れたページとはいえません。

7. css を使用する

下記のテキストファイルを Notepad などの簡単なソフトで開き、[ファイル] - [名前をつけて保存] を選択し、名前は Test.css にして保存します。保存場所は必ず Test.htm と同じ場所にしてください。このファイルの中身はテキストですが、拡張子を .css にすることで、パソコンにこのファイルを css 文書として扱うよう指示してあります。内容の編集などは Notepad などで行えます。

次に、下記の1行を Test.htm のソースに追加します。追加する場所は、 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> と <TITLE></TITLE> の間にしてください。

<LINK REL="stylesheet" HREF="Test.css" TYPE="text/css">

ソース 5

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">

<LINK REL="stylesheet" HREF="Test.css" TYPE="text/css">

<TITLE></TITLE>

8. チェックしてみよう!

ここでもう一度上書き保存して後、ブラウザを使って、ソースをチェックしてみましょう。

どうですか? css が正しく適用されていれば、<H1> 見出しは空色に白抜き文字、 <H2> 見出しは紺色に白抜き文字に変わっているはずです。文字サイズも見やすく変更されていると思います。HTML ファイルから独立した css ファイルにデザインを書いておき、HTML から参照させることで、デザインをコントロールする。これが css によるデザインの基本です。

| css デザイン体験2>>

お問い合わせメールはmoogaone@gmail.com(@は小文字にして)まで

Design Concept by MoogaOne