Sheets」の略で通常CSSと記述されます。本来Webページのデザインを詳細に設定するための技術であり、HTMLからデザイン的な設定を分離することが目的で開発されました。HTMLが誕生し、一般に普及するようになったころからHTMLにビジュアル要素を求められるようになりました。結果、本来表組みであったテーブルタグがレイアウトに使用されるなど、文章の論理的構造を表すことを目的としたHTMLは本来の目的から離れました。デザイン優先で作成されたWebページは非常に複雑なソースとなり、情報アクセシビリティが無視されていました。現状ではまだまだテーブルタグや、HTMLでデザインを行っているWebサイトが多く存在しますが、今後はCSSでのデザイン設定が主流になるでしょう。その理由として、メンテナンスを容易に行え、Webページのデザインを統一することができること、CSSに変更を加えるだけで多くのWebページを制作できるなど、メリットが多い点にあります。Webアクセシビリティが重要視される中、現在を含め将来、高齢者の方や障害者の方など、あらゆる方に情報を提供できるWebサイトを実現していかなければなりません。それを行うためにもCSSの知識は欠くことができないでしょう。CSSの簡単な設定方法からページデザインにいたるまで、CSSノウハウを公開していきます。設定方法も多種多様で、サイトごとに特異性のあるものなので、参考のひとつにしていただければ、と思います。定義と記述について◎定義についてCSSでは「セレクタ」「属性」「値」の3つを組み合わせて定義します。「セレクタ」はスタイルを適応する対象、属性には適応するCSSの種類を指定します。セレクタ{属性:値;}セレクタ名を半角スペースで区切って表示すると、セレクタ内の他のセレクタにスタイルを適用できます。(例)pタグの中のaタグにのみフォントカラーのスタイルを設定します。a{color:#FF0000;}※この時、pタグの中に入っていないaタグにはスタイルは適応されません。◎複数の属性をまとめて定義する方法についてセレクタ{属性:値;属性2:値2;}ひとつのセレクタに対して、複数の属性を「;」で区切ることで設定できます。(例)h1タグにフォントカラー設定を行い、背景色を設定します。値3;}ひとつの属性に対して、複数の値を半角スペースで区切ることによって設定できます。1px;}◎コメントの書き方CSSでは「/*」「*/」で挟まれたテキストはコメントになります。どの箇所の設定であるなど、分かりやすいコメントは更新の際に役立ちます。*/h1{color:#FF0000;}◎セレクタについてセレクタは以下の種類になります。1.HTMLのタグに指定する「基本セレクタ」2.1つのHTMLの中で1つのみ設定できる「IDセレクタ」3.複数の要素に対して同じ設定ができる「classセレクタ」1.基本セレクタについて<h1><p><ul><ol>など、HTMLのタグに指定します。設定したタグが記述されると、自動的にスタイルが適応されます。2.IDセレクタについてIDセレクタは定義した要素にのみ適応されるので、HTMLの中で使用できるのは1回のみとなります。記述は先頭に「#」をつけ、名前は任意で設定します。1px;}「#footer」とした場合、=「IDセレクタ」になるので、ページの中で一度しか使用できません。3.classセレクタについてclassセレクタは先頭に「.」をつけ、名前は任意で設定します。複数のタグに同じ設定ができ、また何度でも使用できます。1px;padding:3px;}以上、第一回目はCSSの記述方法についてでした。次回は簡単なページの作成方法を取り上げたいと思います。お楽しみに!デザイン制作・ホームページ制作・SP制作のご相談はiconまでお問い合わせください。12日ヒコーキスキン配布スキンの配布について※配布スキンの表示確認はIE、Firefox、Safariでおこなっておりますが、状況によりレイアウト崩れを起こす可能性があります。スキン編集によるHTMLやCSSソースの破損は自己責任でご利用ください。いるスキンを適用することで、再度マイブログを正しく表示させることができます。iconからヒコーキスキンの配布です。メッセージを入力してください。