Web ページプログラミング Lecture 4 Oct. 17th 2016 スタイルシートでデザイン（1） CSS (Cascading Style Sheets) スタイルシートでデザインを整えよう今まで制作した Web ページは HTML だけを使用して作った見た目のデザインを省いた簡素なものでした。そのページにデザインを施すのがスタイルシートの役割です。現状、見た目のデザイン面では HTML の機能を利用することが多いのも事実ですが、Web ページ制作方法のトレンドは、HTML とスタイルシートを分離する方向に流れています。メリット：複数のページを一括で管理できるスタイルシートの内容を設定しておけば、それを必要な箇所に適用できます。また、スタイルシートを一枚のファイルで管理し、Web サイト内の文書で共有すれば、修正もスタイルシートのファイル 1 枚で済むなど、見た目のデザインと管理作業を大幅に効率化できます。スタイルシートの記述方法： HTML のファイルと別にスタイルシートのファイルを用意し、HTML ファイルからスタイルシートのファイルにリンクする方法を学習します。 <head>タグ内の情報として、<link>タグでスタイルシートのファイルを読み込み、HTML ファイル全体に適用させます。スタイルシートの指定には、href 属性の値として、スタイルシートファイルのパス（場所）を記述し、スタイルシートファイルへのリンクであることを示すために rel 属性と type 属性も合わせて記述します。 <head> ... <meta http-equiv=”Content-Style-Type” content=”text/css” /> <link href=”mystyle.css” rel=”stylesheet” type=”text/css”> </head> 同じスタイルシートを複数ページに対して使う場合には、とても便利な方法です。この方法 1 Web ページプログラミング Lecture 4 Oct. 17th 2016 だと、後のサイトメンテナンス時においても、スタイルシートファイルを 1 枚修正するだけで済むので、作業の手間を省くことができます。なお、スタイルシートのファイルは、拡張子を「.css」と付けて保存します。背景の色を変えるには： background-color スタイルシートファイル (mystyle.css) body { background-color: # FF7F50; } p { color: brown; } 文字の色を変えるには： color: 色 mystyle.css スタイルシートファイル: body { background-color: lightyellow ; color: #000080; } h1 { background: green; color: white; } ここまで、HTML は文章の意味的な役割を記述するもので、表示はブラウザ次第であることを強調してきました。あるブラウザでの表示方法を前提に、HTML で見た目を制御しようとすると、他の環境では意味が通じにくい、相互運用性の低い情報となってしまいます。 Web の表現を作者が指定するには、HTML ではなく、スタイルシートという別の機能をもちいます。HTML では「意味」だけを記述し、その意味に対してスタイルシートで「表現」を対応づけるという分業を行なうのです。意味と表現を分離することで、HTML の相互運用性が確保されます。また、環境に応じてスタイルシートを取り替えれば、全く同じ HTML を用いつつ、それぞれの特長を生かした表現が可能になります。 CSS のスタイルは、HTML 文書の「誰の」「何を」「どうする」という情報を宣言します。たとえば h1 要素を赤い文字にするには h1 {color: red}という具合です。ここで誰(h1)の部分を「セレクタ」、何(color)を「プロパティ」、どうする（red）をその「値」と呼びます。 <head> …略… <link href=”mystyle.css” rel=”stylesheet” type=”text/css”> </head> 2 Web ページプログラミング Lecture 4 Oct. 17th 2016 外部スタイルシートの長所：１．外部スタイルシートを利用することで、ヘッダー部分に記述する情報が少なくなり、サーチエンジン最適化には効果的となります。検索エンジンでは、キーワードの出現位置がソースの最初の方であるほど、重要視されると言われているためです。ヘッダー部分のデータが少なくなれば、必然的に、コンテンツの出現位置が上位になるというわけです。２．外部スタイルシートは複数のページで共有することが可能です。そのため、外部スタイルシートを利用することで、簡単に複数ページのデザインを統一することができます。同じようにデザインされていることで、ユーザーはどこが重要な見出しで、どこにメニューがあるのかといったことを、すぐに判断することができるためです。いきなり大きくデザインが変わってしまうと、「他のサイトにジャンプしたのだろうか？」とユーザーを悩ませることにもなるかも知れません。もう一つのやり方としては、 CSS ルールを直接 HTML ファイルの中に埋め込む方法があります。スタイルシートを入力し始めるために、head タグの中に style タグを入れます。スタイルシートはすべて style タグの中に入力していきます。 <head> …略… <style type="text/css"> <!-CSS ルール --> </style> </head> <head>タグ内に<style>タグを記述し、その中にスタイルシートを記述する方法です。<style>タグには「text/css」を値に持った type 属性を記述し、<style>タグの中身がスタイルシートであることを示します。基本的には、この記述だけで十分なのですが、スタイルシートを認識しないブラウザの場合、スタイルシートの文字をブラウザ上に表示してしまうことがあります。これを防ぐために、コメントタグ「」でスタイルシートの部分をさらに挟み込みます。埋め込み方式は、そのページ独自のスタイルを指定したいときによく利用されます。背景の色を変えるには： background-color 見出し文字の大きさを変えるには： h1 { background-color: lightseagreen; } size: 文字の大きさ文字の色を変えるには： h1 { font-size: 1.5em; } color: 色 h2 { background-color: #20B2AA ; 24px; font- 0.6cm; 18pt; 150% color: #E0FFFF; } 3