XHTML/CSS・トップ | XHTML/CSS・目次

●スタイルシートを学ぶにあたって

 スタイルシートの学び方に王道はありません。書いて書いて書きまくる。あるいは、作って作って作りまくるのみです。当サイトのスタイルシートの作り方は書籍やほかのWebサイトではなかなか解説されていない実践的な作り方をあまねく網羅しています。スタイルシートだけでなく、ホームページの作り方と結び付けて解説していますので、きっと役に立つと思います。説明不足が多々あるかと思いますが、どうぞ外部スタイルシートの作り方の参考にしてください。ホームページ作成ソフトのツールを使わない自力でのスタイルシートの作り方を解説していますが、学ぶにつれ、作成ソフトのツールからのスタイルシートの作り方も自然と覚えてきます。作成ソフトの素材として付いているスタイルシートを使う場合でもスタイルを自由に変更することができるようになるでしょう。当サイトのCSSプロパティでは物足りない部分はスタイルシート辞典などで補ってください。

 当サイトの学び方に順序はありません。疑問に思っていること、やってみたい個所から入っても構いません。当サイトで使っているCSSソースの内容を理解することよりも実際に作ってみたほうが理解や上達が早いと思います。そういう意味ではいきなり、「HTMLファイルとCSSファイルを作ってみよう」から始めても良いでしょう。当サイトのスタイルシートを学ぶ上で、以下の点に注意してください。

■拡張子

 当サイトはウィンドウズ環境で解説しておりますが、ファイル名内の半角ドット( . )の後に続く拡張子(extension)が表示されていることを前提に解説しています。

 拡張子の表示方法は、Windows XP環境で、「ウィンドウのメニューバー」→「ツール」→「フォルダオプション」→「表示」タブ→「詳細設定」欄の"登録されている拡張子は表示しない"のチェックマークを外します。

 拡張子はCSSファイルの拡張子が「css」、HTMLファイルの拡張子は「htm」か「html」のどちらかなのですが、ホームページ公開サービスとして利用しているプロバイダによってはどちらを使うか決まっている場合があります。当サイトは「html」の拡張子で解説しています。

■半角英数字について

 拡張子については半角英字の小文字使用です。また、ドット( . )および、拡張子を含まないファイル名についても半角英数字の小文字で解説しています。拡張子を含むファイル名については半角英字または半角英数字の大文字が使えるケースもありますが、ホームページ公開サービスとして利用しているプロバイダによっては制限されている場合があります。使用する半角英数字は小文字使用が一般的なのとトラブルがないので当サイトは小文字に統一して解説しています。なお、拡張子とドットの部分を除くファイル名については条件付きでアンダーバー( _ )やそのほかの半角記号が使える場合があります。それぞれ利用するプロバイダのサイトで確認してください。

 HTMLソース(出力文字としてのタグ、属性)、CSSソースの英数字についても当サイトは使えるところはすべて半角英字または、半角英数字の小文字に統一していますが、作者の任意で大文字を使っても構いません。ただし、XHTML 、XMLにおいては要素名、属性名などは半角英字の小文字を使用する決まりがあります。

■テキストエディタ

 ウィンドウズに標準で付いている"メモ帳"のテキストエディタを使って解説していますが、テキストエディタであればなんでも構いません。ただし、拡張子は"txt"から"css"に変更します。

■インデント

 インデントとは段落の文頭としての字下げの意味もありますが、ここでいうインデントとはCSSファイル内に記載するCSSの書式または、HTML文書内にstyle要素としてCSSの書式を記載するときの左端からの空白(スペース)のことを意味します。どちらのケースでもインデントを設けた場合、CSSの書式はタブキーか半角スペースで左余白をとってください。全角スペースでインデントした場合、CSSのスタイルが反映されないことがあります。ひとつひとつの書式ごとに前述の方法でインデントしてください。

■HTMLソースとCSSソースの見方

 実際のソースの見方は関連ページの解説を参照していただくとして、お使いのパソコン環境によって、ソース内容の見え方に違いがあります。例えば、筆者のパソコン環境はウィンドウズですが、作成したCSSファイル内の書式を整形(改行)していてもIEのブラウザでWeb上の訪れたサイトのCSSファイルをプレビューすると整形なしで表示されます。一方、ネットスケープのブラウザでプレビューするとソースは整形されています。また、表示されているWebブラウザの「ファイル」→「名前を付けて保存(※注)」をクリックして、HTTPでダウンロードして、CSSファイルを入手した場合、逆の現象が起こります。HTMLファイルと同時にダウンロードされた「files」フォルダ内にあるCSSファイルはネットスケープではレイアウト通り、筆者が記載した小文字表示ですが、ソースは整形されていません。IEだとソースは整形されていますが、筆者が小文字に統一していても大文字で表示されています。従って、訪れたWebページのCSSソースは訪れるユーザーのパソコン環境によって、表示が異なる点に留意してください。

※注:訪れたWebページを保存するとき、IEブラウザの場合だとWebページの保存ダイアログボックスにおいて、保存するファイル形式として、‘Webページ、完全(※htm:※html)’を選択する必要があります。

■CSSファイルへの指定方法(リンク要素)

 外部ファイルであるCSSファイルへの指定には相対パスが入ったリンク要素を使っていますが、この相対パスの意味が理解できていないとつまづくことが想定されます。もし、相対パスの意味がわからない場合は、別項の「CSSファイルへの指定方法(リンク要素)」をご参照ください。相対パスはホームページを作っているとき、自分のパソコン内に架空のサイトを作っている関係で相対パスでなければ都合悪いからです。相対パスでなければパソコン内の任意のファイルを指定できません。作成するファイルの位置を基準として、ディレクトリと階層を把握し、意識することは大変重要です。例えば、作成ソフトを使って予定のディレクトリへの取り込みに失敗しても対応できますし、画像ファイル、そのほかのファイルを自由に作者の意図したディレクトリ階層へ移動させることができます。特にディレクトリごとのサブページの多いサイトを作るときは相対パスになれておくことは必須条件です。

■CSSファイルのアイコンと登録について

 最近のパソコンではCSSファイルが登録されており、ファイルを開いて直接編集することができますが、筆者がスタイルシートを作った頃はパソコンに標準で割り振られておらず、「css」の拡張子を登録しなければなりませんでした。もし、ファイルが開かない、または編集できないときはCSSファイルをお使いのパソコンに登録して使えるようにすることもできます。

■コピー&ペースト用テキストエディタ

 スタイルシートを書きやすいように、編集しやすいようにCSSのプロパティや書式などを掲載したスタイルシート編集用のテキストエディタがあります。CSSソースを記載するときにお使いください。(※当サイトにはXHTML文書用のXHTML/DTDテキストエディタもあります。)

■関連ページ

 XHTML/CSS・トップ | XHTML/CSS・目次

Copyright (C) 2005 http://www.xml.vc/