2011年05月20日 情報科学類 コンピュータリテラシ 筑波大学 システム情報工学研究科 コンピュータサイエンス専攻, 電子・情報工学系 新城 靖 <yas@is.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2011/2011-05-20
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
HTML で記述できる文書の構造:
表示の方法:
<HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp"> <TITLE>スタイルシートの例題:タグへの設定</TITLE> <STYLE TYPE="text/css"><!-- H1 { color: blue; } --></STYLE> </HEAD> <BODY> <H1>青いH1の見出し</H1> <H2>普通のH2の見出し</H2> </BODY>表示例
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- (ここにスタイルシートを書く) --></STYLE> </HEAD>別ファイルに書いて読み込む。 スタイルシートのURLは、
filename.css
のようなファイル名が多い。
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <LINK rel="stylesheet" type="text/css" href="スタイルシートのURL"> </HEAD>
<HTML> <HEAD> <TITLE>タイトルです。</TITLE> <STYLE TYPE="text/css"><!-- @import url(スタイルシートのURL); (ここにスタイルシートを書く) --></STYLE> </HEAD>
複数 @import することもできる。 複数のスタイルは、混ぜられる(カスケード)。 対立する定義は、後から出てきた方が有効になる。
HTML のタグの属性として書く。宣言部分だけ。
<P STYLE="color:#444444">文。文。文。</P>
/*
と */
で括った部分がコメントとなる。
この表記法法は、C言語やJava言語と似ている。
(他の言語では、この表記法は使えないことがある。)
コメントは、デバッグ時など一時的に
コンピュータ言語の機能を無効にしたい時にも使える。
セレクタ { 宣言; } セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言; }1つひとつの宣言は、次の形式。
プロパティ:式「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。
例
H1 { color:blue; } /* <H1></H1> だけ */ UL LI { color:blue; } /* <UL></UL>の中の <LI> だけ*/ OL > LI { color:blue; } /* <OL></OL>の直接の子供の <LI> だけ*/ H1 + P { color:blue; } /* <H1></H1>に隣接する <P> だけ*/ * { color:blue; } /* 全ての要素 */ .important { color:blue; } /* class="important" と指定したものだけ */ P.important { color:blue; } /* <P class="important"></P> と指定したものだけ */ #n10 { color:blue; } /* id="n10" と指定したものだけ */ P:first-line { color:blue; } /* <P></P> の中の最初の行だけ */ P:first-letter { color:blue; } /* <P></P> の中の最初の1文字だけ */ A:link { color:blue; } /* 未訪問のリンク */ A:visited { color:blue; } /* 訪問済みのリンク */ A:active { color:blue; } /* アクセス中 */ A:hover { color:blue; } /* カーソルを重ねた時 */
<HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp"> <TITLE>スタイルシートの例題:クラスの利用</TITLE> <STYLE TYPE="text/css"><!-- .important { color:red; } /* class="important" と指定したものだけ */ --></STYLE> </HEAD> <BODY> <H1>普通のH1の見出し</H1> <P> 普通のパラグラフ </P> <P class="important"> 重要なパラグラフ </P> <H2>普通のH2見出し</H2> <H2 class="important">重要な普通のH2見出し</H2> <P> 普通の言葉。<SPAN class="important">重要な言葉。</SPAN>普通の言葉。 </P> </BODY>表示例
+----------------------------------------------+ | margin | | +--------------------------------------+ | | | boarder | | | | +------------------------------+ | | | | | padding | | | | | | +----------------------+ | | | | | | | element | | | | | | | +----------------------+ | | | | | +------------------------------+ | | | +--------------------------------------+ | +----------------------------------------------+ | the width of element | | the width of box |
注意点
http://www.tohoho-web.com/css/,とほほのスタイルシート入門
http://park19.wakwak.com/~zashiki/css-make/,Cascading Style Sheets解説
http://www.w3.org/Style/CSS/,W3C Cascading Style Sheets home page
(http://www.a2ztutorial.com/Style/CSS/,日本語
)
http://jigsaw.w3.org/css-validator/,W3C CSS Validator
http://validator.w3.org/,W3C HTML Validator
C-x 2
、C-x 3
C-x 1
、C-x 0
C-x b
C-x C-b
C-x 2 | ウインドウを2つに分割(現在のバッファを複数ウインドウで表示) |
C-x 1 | ウインドウを1つにする(他のウインドウを閉じる) |
C-x 0 | 現在のウインドウを閉じる |
C-x o | 他の(other)ウインドウにカーソルを移動。 |
C-x C-b | バッファのリストを表示 |
C-x b | 別のバッファを表示する |
以下の問題、および、回答をテキスト・ファイルに記述し、 レポート提出ページから提出しなさい。
(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。
(2) The Unix Super Text の次の部分を読みなさい。
(4) [加点] (1) で、講義の範囲を超えたスタイルシートの機能を利用しなさい。 そして、その機能の説明、どこに利用しているか、および、その機能の有用性 を書きなさい。
(5) [加点] CSS にはブラウザによる互換性の問題があり、様々な種類のブラウ ザで見た時にまったく異なる表示になってしまうことがある。様々な種類のブ ラウザで表示が似ていると期待されるCSSの機能を 10-15 行でまとめなさい。 また、表示が大きく異なってしまうような CSS の機能としては何があるか、 3-5 行でまとめなさい。「表示が大きく異なる」ようなCSS の機能を用いた WWW ページを 1 つ作成し、その URL、および、表示に用いるべきブラウザの種 類をレポートに含めなさい。