!!!ポートフォリオについて（その２）
ポートフォリオに使う画像や映像をそろそろ集めておいてください。素材がなければ、作品はできません。仮にでもいいので、とりあえず一度作ってみるのをオススメします。手を動かすことで、脳は働きだします。上でも書いたとおりです。ぼんやり考えてるときは、実は考えていないものなんです。実際に書いたり作ったりしてはじめて実感し思考できます。特にWEBサイトの場合は、とりあえず必要な画像データ、テキストデータを用意して基本構造を作っておき、スタイルシートでデザイン要素を作るようにしておけばいくらでもデザインし直せます。

はじめにポートフォリオの話をしましたが、もう一度確認しておきます。
最終的に提出してもらうものは、
*ポートフォリオ（クリアーファイルや本にしたもの）
*WEBサイト
*名刺

です。WEBサイトは動画やゲームなどが実際に見れたりプレイできるようになっている方がよいです。そして、3点はデザインラインが統一されている方がよいかもしれません。自分が人事担当者になったつもりで、それらを見るようにしてください。

!!!CSS基礎
!!CSSの記述方法
前回の授業でやったHTMLタグを使うことで、どのような要素がそのページの中に記述されてるかを示すことができます。現在、多くの人が使っているWEBブラウザでそのHTMLファイルを開くと、その要素にしたがって、大文字にしたり、リスト化したり、表を組んでくれたりするわけです。つまりWEBブラウザがレンダリングして表示してるわけです。

<h1>タグで囲んだ文字はそのページの大見出しという役割を持っているという意味ですので、通常はページの最初に記述してあります。そして目立つように大きな文字で太字にして表示するのが一般的です。ですが、CSSを使うことでその表示の仕方を変更させることができます。このページの右上にある「CG演習２-第5回-2007」の文字は<h1>タグで書かれてるのですが、小さく、太字で、右端に寄るようにCSSでカスタマイズしてあります。<h1>で指定した文字はすべて、このスタイルで表示されるようになっています。

 h1 {
 	text-align       : right;
 	background-color : #FFFFFF;
 	font-family      : Verdana,Arial,Helvetica,sans-serif;
 	font-size        : 80%;
 }

左側に表示されているメニューは、ソースファイル上では、一番下に記述されているのですが、CSSで一番左上に表示されるようになっています。メニュー部分のCSSを見てみます。

 div.sidebar {
 	position        : absolute;
 	top             : 10px;
 	left            : 10px;
 	width           : 150px;
 	font-size       : 75%;
 	padding         : 0pt;
 	border          : #87CEEB 1px solid;
 	color           : #000000;
 	background-color: #EEEEEE;
 }

HTMLファイル上の'''<div class="sidebar"></div>'''で囲まれた部分がメニュー部分なのですが、'''class="sidebar"'''がdivタグに追加されているところに注目してください。このclassというので名前付けしています。ここでは「sidebar」という名前をつけていますが、半角文字で書いてあればどんな名前でも構いません。「hentai」でも「seian」でもいいわけです。このWEBサイトでは他に、「body」「adminmenu」「main」などのクラスを作ってあり、それぞれ違うデザイン要素を割り当てるために使われています。

上のh1タグのようにクラス名をつけないで直接タグにCSSの指定した場合は、h1タグ全てにCSSが適用されます。<h1 class="name01">や<h1 class="name02">のようにクラスをつけておけば、name01のh1タグと、name02のh1タグにそれぞれ違うスタイルを割り当てられるわけです。

divタグというのは、もともとレイアウトするときに、右寄せとか左寄せとかを指定するものなのですが、<div>だけでは何も機能しません。何も機能を持たないというのを利用して、クラス指定するためだけに利用しているわけです。<div class="sidebar"></div>で囲んだ部分は「sidebar」というCSSを適用しますという意味になります。

メニュー部分のCSSを見てみると、「 '''div.sidebar {''' 」ではじまっています。divタグのsidebarクラスはこういう風にカスタマイズしますよ、{ }で囲まれた部分がその内容ですよ、という意味です。そのCSSの命令の内容については、タグ辞典や、前回の授業で紹介した解説をしているホームページを見てもらう方が早いと思いますが、このdiv.sidebarで指定してる内容を説明すると以下のようになります。

!左側メニュー「div.sidebar」の説明
*'''position        : absolute;'''
**位置指定の仕方はabsolute（絶対位置）指定です。左上(x,y)=(0,0)の位置から指定していきます。
*'''top             : 10px;'''
**上から10ピクセル
*'''left            : 10px;'''
**左から10ピクセル
*'''width           : 150px;'''
**横幅150ピクセル
*'''font-size       : 75%;'''
**文字の大きさはオリジナルの75パーセントの大きさ
*'''padding         : 0pt;'''
**セルの余白は0ポイント
*'''border          : #87CEEB 1px solid;'''
**枠の指定です。色を87CEEB（薄い青色）に、枠幅1ピクセル、ベタ塗り
*'''color           : #000000;'''
**文字色は000000（黒色）
*'''background-color: #EEEEEE;'''
**背景色はEEEEEE（薄いグレー）

!見出し「h2」の説明
文字に帯のような装飾をつける方法の例としてh2タグを参照してみます。

 h2 {
 	background-color : #87CEEB;
 	font-family      : Verdana,Arial,Helvetica,sans-serif;
 	font-size        : 100%;
 	padding-top      : 2pt;
 	padding-bottom   : 2pt;
 	padding-left     : 4pt;
 	margin-bottom    : 5px;
 	border-left      : #4682B4 20px solid;
 	border-bottom    : #4682B4 2px solid;
 }

*'''background-color : #87CEEB;'''
**背景色は87CEEB（薄い空色）
*'''font-family      : Verdana,Arial,Helvetica,sans-serif;'''
**フォントはVerdana,Arial,Helvetica,sans-serifのどれかを使います。
*'''font-size        : 100%;'''
**フォントの大きさは100%です。
*'''padding-top      : 2pt;'''
**余白上部は、2ピクセル空けます。
*'''padding-bottom   : 2pt;'''
**余白下部は、2ピクセル空けます。
*'''padding-left     : 4pt;'''
**余白左側は、4ピクセル空けます。
*'''margin-bottom    : 5px;'''
**他要素との下側への隙間は5ピクセル空けます。
*'''border-left    : #4682B4 20px solid;'''
**枠線の左側は、色4682B4（濃い青色）、幅20ピクセル、ベタ塗りです。
*'''border-bottom  : #4682B4 2px solid;'''
**枠線の下側は、色4682B4（濃い青色）、幅2ピクセル、ベタ塗りです。

!CSS記述の定義
今まで使ってきた「h1」や「h2」、クラス名の「sidebar」などは、HTML上ではタグと呼ばれていますが、CSSでは'''セレクタ'''と呼んでいて、スタイルを指定する対象をあらわします。HTMLタグであるh1やh2、クラス名であるsidebarのどれにも同じようにCSSは機能します。タグは'''基本セレクタ'''、クラス名は'''CLASSセレクタ'''と呼びます。他に'''IDセレクタ'''や'''擬似クラス'''と呼ばれるものがあります。タグ辞典などを見てもらえばもっと詳しく書いてあります。
 h1 { color : #000000; }
のように記述しても、
 h1 {
     color : #000000;
 }
のように記述しても同じです。ブラウザは単語の間など以外のスペースや改行は無視するからです。下のように記述されることが多いですが、指定する属性が一つとかなら、上のでも問題ないと思います。下のように書くのは単純にソースを見やすくするための配慮です。

CSSの記述の定義を書くと次のようになります。
 セレクタ { 属性 : 値 }
セレクタとは、HTMLタグやクラス名のことです。属性とは、文字色や枠線の太さなどスタイルの要素のこと、値はその数値や状態のことです。値の例としては色を指定する#000000やleftなどのように位置など表したり属性によって使い分けます。属性と値の間を「:」（コロン）で区切ります。

１つのセレクタに対して、複数の属性を指定することができます。
 セレクタ {
       属性1 : 値1;
       属性2 : 値2;
       属性3 : 値3;
 }
のような具合に、属性と属性の間を「;」（セミコロン）で区切ります。

複数のセレクタに対して同じスタイルシートを適用させることができます。
 セレクタ,セレクタ {
       属性1 : 値1;
       属性2 : 値2;
       属性3 : 値3;
 }
のように、「,」（コンマ）で区切ることによって、複数のセレクタを扱えます。
 h1,h2,div.sidebar {
     color : #000000;
 }

CLASSセレクタの指定の仕方は、CLASSセレクタの先頭に「.」（ピリオド）をつけて書きます。
 .クラス名 {
       属性1 : 値1;
       属性2 : 値2;
 }
 
 基本セレクタ.クラス名 {
       属性1 : 値1;
       属性2 : 値2;
 }
下のようにすれば、その組み合わせのみにスタイルシートが適用されます。上なら、そのクラス全てに適用されます。

!!外部CSSと埋め込みCSS
このホームページでは別ファイルとして置いてあるCSSを読み込んできて使用するものと、ページ内に埋め込んで使用するCSSの2種類が使われています。ソースを見てみます。
<head>タグの中に、
'''<link rel="stylesheet" type="text/css" href="./theme/watersky/watersky.css">'''
という部分があります。これが外部CSSを読み込むための記述です。linkタグで、watersky.cssというスタイルシートのファイルを読み込んで来い、という命令になります。そのスタイルシートは[こちら|./theme/watersky/watersky.css]です。メモ帳などで記述してテキスト保存したあと、拡張子をcssに変更すればOKです。

もう一つ、ページ内に記述されているCSSもあります。少し下の方を見てもらうと
 <style type="text/css">
 <!--
 .error {
     color       : #FF0000;
     font-weight : bold;
 }
 
 span.nopage {
     background-color : #FFFF88;
 }
 
 /* partedit */
 div.partedit {
     text-align : right;
     font-size  : 80%;
 }
 
 /* calendar */
 td.today {
     background-color : #FF8888;
 }
 
 td.have {
     font-weight : bold;
 }
 
 .calendar td {
     text-align : right;
 }
 -->
 </style>

と、<style type="text/css">タグで囲まれた部分がCSSになります。中身は外部のものと同じ記述方法です。別ファイルとして作っておくか、ページ内に書いておくかの違いだけです。外部ファイルとして保存しておけば、たくさんのページのスタイルを一気に変更できますし、あるページだけの例外的なスタイルを使いたいときは、ページ内に書いておいた方がいいかもしれません。どちらの方が便利かを考えて使い分けてください。

!!他人のソースから盗め
前回と今回でHTMLとCSSについて紹介しましたが、実際に書けばすぐにマスターできます。ゲームのプログラミングなどのように、演算させたりするわけではなく、短絡的に指定した色やサイズを表示させるだけなので、まねをして書けばいいだけです。

そこで勉強方法としてオススメなのは、他人のホームページから盗むという方法です。これ、いいなと思ったら、右クリックしてソースファイルを見ましょう。そして、該当部分をその中から探してください。Dreamweaverやホームページビルダーなどで記述されたホームページはものすごく複雑なソースになっていることもありますが、冷静に見ていけば、難しいことはありません。そして、自分でいろいろ数値などをいじってみてください。タグ辞典をみれば、HTMLやCSSの命令について説明が書いてありますから、それを参照しながら、カスタマイズすることで、身についていきます。プログラムやHTMLなどは、「ソースを盗む」が学ぶための基本スタイルです。（…だと思う）