§03-07…CSSの文法チェック(CSS Validator)
(01) CSSの文法が間違っていないかを調べることができるWebサービスもあります。「W3C CSS 検証サービス」を開きましょう。URLは 「」です。メニュータブからへ移動します。 (02) CSSのソースをテキストエリア内にコピー/貼り付けしてからをクリックしましょう。 (03) 問題がある場合はエラーや警告が表示されます...
§03-06…1つの要素に複数のclass属性を設定する【参考学習】
ひとつの段落に複数のclass属性を設定することができます。属性値を半角スペースで区切るだけです。以下の例では、「main」と「sub」という二つのclass属性を持つ段落を作成したことになります。 <h2 class="main sub">サイドメニュー</h2> もちろん、属性値ごとに「class="～"」で定義してもかまいま...
§03-05…CSSにコメント
CSSファイル側にもコメントを書き込むことができます。CSSファイルにコメントを書き込む場合には先頭に「@charset "shift_jis";」と入力した状態で 「/＊あいうえお＊/」のようにコメント内容を「/＊」と「＊/」の中に書き込みます。以下はサンプルです。 @charset "shift_jis"; /＊デフォルト設定＊/ ＊{ ...
§03-04…HTMLにコメント
Webページ側にコメント(表示されない文字列)を書き込みたい場合にはコメント文字列を「 <!--あいうえお--> 」のように、「<!--」と「-->」の中に書き込みます。以下はサンプルです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUB...
§03-03…CSSの初期化・基本設計
(01) さて、OSやブラウザーなどの環境により、初期状態でのフォント・margin・paddingなどの仕様が若干異なります。できる限りその差異を埋めるためには、CSSの先頭に以下のような記述をしておきます(「transparent」は透明の意)。こうしておくと各要素の書式設計をいちから(たとえば「a要素には青字・下線を設定」など)しなければなりませんが、...
§03-02…CSSを適用しないでブラウジングする
(01) OperaやFirefoxでは、Webページを閲覧する際に、CSSを適用させないようにすることができます。Firefoxでメニューからをクリックしましょう。 (02) CSSを適用しない状態でWebページが表示されます。Webページを作成する際には、CSSを適用しなくても内容がわかるように作成してください。これは、何らかの理由(例えば...
§03-01…ブラウザーの種類
(01) これまでは作成したWebページをInternet Explorer(IE)で閲覧・確認してきました。しかしながら、IEには「8～11」など複数のバージョンが存在し、バージョンによっては作成したページのレイアウトが崩れてしまう可能性があります。そのため意図通りに表示されるか、できるだけ複数の環境で閲覧確認をするべきでしょう。 また、IE以外にも「G...
§02-10…全称セレクタ(＊)
(01) すべての文字間隔を「+0.5文字」にします。すべてを指定するセレクタは「＊」です。もちろん「h1,h2,h3,p,ul,…」のようなセレクタを利用しても良いのですが、面倒です。以下のCSSを追加してからブラウジングしましょう。 ＊{ letter-spacing:0.5em; }
§02-09…リスト記号に画像ファイルを使用する
(01) 画像ファイル「check01.gif」をサイト(フォルダー)内にコピーしておいてください。この画像ファイルのサイズは「16×16」pxです。 (check01.gif) (02) この画像ファイルを第二レベルのリスト記号に採用します。画像ファイルをリスト記号に採用する場合には「list-style-image」プロパティで画像ファイルのURLを...