2005年02月19日
スタイルシート入門 第１章その１
数回に分けて、ブログ活用のためのスタイルシートの解説をおこないます。
使用するテキストは、できるシリーズの「できるホームページスタイルシート入門」を利用します。
はじめに、スタイルシートの意味
ホームページを作るには、htmlという言語を使って作りますが、htmlには本文のみを記述し、文字の色や大きさ、 配置などをスタイルシートに記述させ役割分担をさせることです。htmlのみで作るより遥かに細かにデザインを制御できます。 このようにデザイン部を別に担当させることで、サイト内のイメージの変更を効率よくでき、しかもブログでも是非知っておくべき内容です。 スタイルシートという言語には、CSS（シーエスエス）を今回は利用します。
この講座で用意するもの
- テキスト（できるホームページスタイル入門）
- メモ帳などのテキストエディタ（推奨テキストエディタ：無料ではTeraPad、 有料では EmEditor Professional 2004 を推奨します）
当初は、ホームページを作成するソフトは、不要です。
では、本に従って説明していきます。今回はP２４からP32まで第１章の内容です。
ここでのポイントは、P28 の３）
linkタグを書くとP30のスタイルシートの基本的な書き方です。
スタイルシートを利用するには、必ずlinkタグを書く必要があります。それも別ファイルに書く習慣をつけてください。（説明は、
EmEditor Professional 2004
を利用して説明します）
注意）事前にP36の「ファイルの種類が分かるようにするには」の設定を済ませておいてください。
実習
１）ディスクトップ上のアイコンが無い部分で右クリックし、新規作成＞テキストドキュメントを選択してください。 今回は２個の新規テキストドキュメントを作成します。そして１個は、test.html、 もう１個はmystyle.cssに名前を変更します。
２）test.htmlを右クリックして 送る＞EmEditorをクリックし
welcome!
と入力し(これだけでいいです）保存後、右クリックして開くをクリックしてください。ブラウザで確認できましたか？
３）次にこのtest.htmlにP28の３に書いてあるlinkタグをwelcome!と入力した部分より上に入力してください。 保存後ブラウザで確認した際、welcome!以外の文字が出ている場合、入力間違いですので、テキストをよく見て、 間違いが無いか確認してください。
４）このwelcome!の文字に対して、 P31を参考に<h1>welcome!</h1>と入力してください。 この状態でブラウザで確認すると大きな字になります。
５）いよいよ先程作ったに P30を参考に
h1 {
color: red;
}
と入力し保存してください。（一行に続けて入力しても問題ありませんが、後で見やすいように心がけてください）。
６）test.htmlをブラウザで開いたら大見出しの赤い字がでましたか？色を変更する場合は、
P19から21のホームページ色名一覧を参考に変更してみてください。
: 2005年02月19日
トラックバック
このエントリーのトラックバックURL:
http://www.tuskinoura.com/trackback.cgi/70