KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/8th/review のバックアップ(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/8th/review へ行く。
  • 1 (2004-11-25 (木) 23:14:33)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

前回の復習

前回の内容

前回は、CSS (Cascading Style Sheet)を使った、 Webページの表現を実習しました。 次のような設定を紹介し、Webページに設定しました。

まず、CSSの使い方について紹介しました。

• 単位について
• ボックスについて
• CSSの設定のしかた

次に、CSSのいくつかの具体的な設定も紹介しました。

• 文字の色
• 行間の設定
• 枠線の太さの設定
• 枠線の色の設定
• 枠線のスタイルの設定

おさらい: CSSとは

情報の「かたち」と「視覚」のデザイン

HTML (Hyper Text Markup Language) とは、 「見出し」や「段落」といった文書の構成要素を、 タグを使って文書に指定する、 「情報のかたち」を表現するための、道具でした。

しかし、HTMLは、もともと構造を表現するものであり、 表現（視覚的なデザイン）には機能的な限界があります。

そこで、「情報のかたち＝構成要素」を 具体的にどう表現するかを指定するために、 「スタイルシート」という技術があります。 スタイルシートを使えば、次のようなメリットがあります。

• ひとつの文書を「構造」と「表現」に分けて管理できる
• 複数の文書のデザインを統一できる
• 多彩な表現が可能になり、作者の意図した表現を提供できる

CSS

HTMLで、 スタイルシート（情報のかたちの表現）をする方法として、 CSS (Cascading Style Sheet) があります。

CSSでは、スタイルを指定する対象（構成要素など）を選び、 スタイルの種類や値を設定します。 次のように、記述します。

セレクタ {プロパティ:値}
</pre>

「セレクタ」とは、
スタイルを指定する要素を指定する部分です。
「{...}」のカッコ内で指定したスタイルが適用されます。
「プロパティ」とは、
適用するスタイルの種類です。
色やフォントなどの種類を指定します。
「:」（コロン）で区切って、設定する「値」を指定します。

たとえば、次はh1要素に「文字を赤くする」というスタイルを指定するものです。
#pre(novervatim){{
h1 {color: #ff0000}
</pre>





次へ進んで、
今回の内容を見てください。
----
#navi2(Lecture/InfoDesignB2004/8th,toc,next)