スタイルシート URL http://www.nikonet.or.jp/spring/sanae/inf_box/ E-mail [email protected] <H2>-時代を引き継ぐコンテンツの蓄積化・共有化の重要性-</H2> <H3>札幌新川高校 早苗雅史</H3> <OL> <LI>教育の情報科が進む中で見失ってはいけないこと </OL> <P> 教育の情報化は急速な勢いで教育現場に浸透してきています。特に最近は,コンピュータネットワークや IT を活用した自学・自習システム「e-Learning」が隆盛を極めています。学習者はいつでも,・・・ </P> HTML ファイル内にスタイルの指定をする方法としては,HTML ファイルの中でスタイルを設定 スタイルシートは,正式には「カスケーディングスタイルシート」(CSS)と呼ばれています。これ する方法もありますが,外部のスタイルシートを呼び出す方が一般的です。 は,W3C (World Wide Web Consortium) という団体によって 1996 年に提唱されたホームページのス 上のソースファイルをよく見ると,例えば<H1>タグ一つで背景色や文字位置などが指定されてい タイルを制御するための規格です。スタイルシートでは,スタイル(レイアウト,デザインなど見栄 ますね。実はそうした様々なスタイルを外部スタイルシートで設定しているのです。具体的にスタ えに関連するもの)だけをまとめて記述します。 イルシートを見てみましょう(テキストファイルになっていて,拡張子は「.css」)。 CSS を用いることで HTML ファイルに書式を設定するより,はるかに凝ったレイアウトにするこ とができます。また HTML ファイルを編集しなくても,スタイルシートを変えるだけで見栄えを変 えるたり,複数の HTML ファイルに統一したデザインを適用することができます。 次の 2 つのページを見てみましょう。同じ内容ですが,ページのデザインだけを変えてあります。 H1{ background-color : #4de88e; padding-top : 5px; padding-left : 5px; padding-right : 5px; padding-bottom : 5px; text-align : center;border-top-style : solid;border-left-style : solid;border-right-style : solid;border-bottom-style : solid; color : #aa82e6;border-top-color : #9888d7;border-left-color : #9888d7;border-right-color : #9888d7;border-bottom-color : #9888d7; border-width : 2px;border-left-width : 35px;border-right-width : 35px;border-bottom-width : 2px; font-weight : bolder; } ・・・ このように外部スタイルシートで“タグ”にスタイルを設定しているのです。このスタイルシー トは実習で用いている「ホームページビルダー」を使って,簡単に作成することができます。是非 自分なりの見栄えのいいページを作成してみませんか。 スタイルシート「style01.css」適用 スタイルシート「style02.css」適用 この 2 つのページのソースファイルは実は同じなのです。実は正確には一行だけ違うのですが,そ の一行というのがスタイルシートを呼び出すタグになります。次のソースファイルの赤字の部分で スタイルシートを呼び出しています。 <HTML> <HEAD> <TITLE>ネット上のコンテンツの充実</TITLE> <LINK rel="stylesheet" href="style01.css" type="text/css"> </HEAD> <BODY> <H1>ネット上のコンテンツの充実</H1>
© Copyright 2024 Paperzz