*前回の復習 [#k959e80e] **前回の内容 [#z94576bf] 前回は、CSS (Cascading Style Sheet)を使った、 Webページの表現を実習しました。 次のような設定を紹介し、Webページに設定しました。 まず、CSSの使い方について紹介しました。 -[[単位について>Lecture/InfoDesignB2004/7th/unit]] -[[ボックスについて>Lecture/InfoDesignB2004/7th/box]] -[[CSSの設定のしかた>Lecture/InfoDesignB2004/7th/css_setting]] 次に、CSSのいくつかの具体的な設定も紹介しました。 -[[文字の色>Lecture/InfoDesignB2004/7th/fontcolor]] -[[行間の設定>Lecture/InfoDesignB2004/7th/line_space]] -[[枠線の太さの設定>Lecture/InfoDesignB2004/7th/border_width]] -[[枠線の色の設定>Lecture/InfoDesignB2004/7th/border_color]] -[[枠線のスタイルの設定>Lecture/InfoDesignB2004/7th/border_style]] **おさらい: CSSとは [#ze27efd4] ***情報の「かたち」と「視覚」のデザイン [#s8260148] HTML (Hyper Text Markup Language) とは、 「見出し」や「段落」といった文書の構成要素を、 タグを使って文書に指定する、 「''情報のかたち''」を表現するための、道具でした。 しかし、HTMLは、もともと構造を表現するものであり、 表現(視覚的なデザイン)には機能的な限界があります。 そこで、「情報のかたち=構成要素」を 具体的にどう表現するかを指定するために、 ''「スタイルシート」''という技術があります。 スタイルシートを使えば、次のようなメリットがあります。 --ひとつの文書を「構造」と「表現」に分けて管理できる --複数の文書のデザインを統一できる --多彩な表現が可能になり、作者の意図した表現を提供できる ***CSS [#l6f49fd9] HTMLで、 スタイルシート(情報のかたちの表現)をする方法として、 ''CSS (Cascading Style Sheet)'' があります。 CSSでは、スタイルを指定する対象(構成要素など)を選び、 スタイルの種類や値を設定します。 次のように、記述します。 <pre> #pre(novervatim){{ COLOR(red):セレクタ {プロパティ:値} </pre> }} 「''セレクタ''」とは、 スタイルを指定する要素を指定する部分です。 「{...}」のカッコ内で指定したスタイルが適用されます。 「''プロパティ''」とは、 適用するスタイルの種類です。 色やフォントなどの種類を指定します。 「:」(コロン)で区切って、設定する「''値''」を指定します。 たとえば、次はh1要素に「文字を赤くする」というスタイルを指定するものです。 <pre> #pre(novervatim){{ COLOR(red):h1 {color: #ff0000} </pre> }} &br; &navi2(Lecture/InfoDesignB2004/8th,next);進んで、 今回の内容を見てください。 ---- #navi2(Lecture/InfoDesignB2004/8th,toc,next) }} |