第13回　スケジューラーを作ろう(4) - CSSの基礎知識 - - PHP基礎講座

• 先週はお休みをしてしまい、申し訳なかったです。
• Saity先生、風邪ひいちゃったんだよね。
• そうなんだよ。急に寒くなったよね・・・
• 私なんて、毎日こたつの中でPHPプログラミングをしているわ。
• ははは。頑張ってるね。

見た目を整えよう

• さて、今回はちょっとPHPとは脱線するけれども、Webデザインを整えていこう。スケジューラー画面を見て貰ったら分かるとおり、正直「いけてない」よね。
• そうなんですよ。友達に自慢するにも、見た目で却下。。。
• じゃあ、最初に少し、見た目の調整をしていこう。
• ヤッタ～☆

今の時代、デザインはCSSで

• あらかじめ断っておくけど、僕はデザイナーじゃないし、CSSもそんなに得意じゃないんだよ。だから今回は、特別ゲストを召還したいと思いマース。
• ゲスト？誰ですか？？
• 僕の相棒、熊ちゃんさ。知る人ぞ知る、国内有数のCSSハッカーなんだよ～。
• 初めまして～！
• （お、Saity先生に劣らずいいオトコ☆♪）はじめまして～。今日はよろしくお願いします☆
• では、早速だけどCSSの基礎知識について少しだけ説明しましょうか。CSSは、W3C（World Wide Web Consortium）が勧告として作成した、HTMLやXMLの表示方法を指示するための仕様です。W3CはWebの主要技術を標準化するための団体で、HTMLやXHTML、XMLなども勧告しているんです。ちなみに、「CSS」というのはカスケード・スタイル・シートの略称なんですよ。
• ん～・・勧告って？？
• 英語でいうとRecommendationですかね。W3Cが仕様を策定する中で、議論や意見の受付もすべて終了し、確定したものを勧告と呼ぶんですよ。勧告が確定すると、それ以上の仕様変更は行われないんです。
• ってことは、CSSはこれ以上仕様変更が無いって事なんですか？ブラウザのバグが多いとか、予習段階でちらほら書かれていたんですが。。。
• いや、仕様というのはブラウザの実装とは異なるものなんです。CSSの場合は、Level 1（CSS1）とLevel 2（CSS2）という、２つのレベルが勧告されていて、現在はLevel 2.1（CSS2.1）やLevel 3（CSS3）が仕様策定のフェーズで進んでいるんですよ。詳しくは、WikiPediaを参照してもらえたら良いと思います。
• CSSにもバージョンがあるんですねぇ。。。普通に使ってると気づかないわ。
• そうですね。「勧告」には強制力がないので、ブラウザによってCSSのどの仕様を実装するかはまちまちだったんです。それが原因で、出た当初は全然使い物にならなかった。Netscape Navigator 4とかは、CSS周りのバグが多いことでも有名でしたし。
• ふむぅ。
• 最近のブラウザは、いろいろな問題を抱えつつも、「それなり」に正しく描画できるようになってきました。そのため、CSSを使ってデザインを作成することが当たり前になりつつあります。
• うん？CSSがあたりまえになってきた。。。って、CSSはデザインをするための仕様なんですよね？それ以外にもデザインの方法があるんですか？
• 昔、といっても今でも使われているけど、俗に言う「テーブルレイアウト」がWebデザインにとって必須の技術でした。HTMLのTABLEタグは表を作成するために用意されたものですが、その枠線を非表示にすることができるんです。そうしたテーブルを組み合わせることで、レイアウトを作っていく方法のことを、テーブルレイアウトと言うんです。
• なんか難しそう～。
• テーブルレイアウトのマズイ所は、アクセシビリティが全く考慮されないことなんです。
• うーん、アクセシビリティって？？
• 様々な人にとっての、利用しやすさのことです。例えば、目の不自由な方がインターネットを使う場合に、使いやすいかどうか？という事などですね。
• ふむふむ。。。
• そういった方は多くの場合、普通のブラウザではなく、HPの内容を読み上げてくれる「音声読み上げブラウザ」というものを使ってページにアクセスすることが多いんです。そのような時にテーブルレイアウトのHPだと、読み上げる順番がおかしくなったりしてしまうんですよ。もともと表を作るためのタグだから、当然なんですけどね。
• なるほど。そう言う人たちにとっては、不便なんですね。
• その通りです。細かいデザインの調節ができるため、テーブルレイアウトは今でも主流で、DreamWeaverなどのWebデザインソフトウェアでは今でも機能として実装されています。ただ、今後のWebサイトにおいては、CSSレイアウトを学んでおいた方が良いと思います。
• はい！頑張ります！！

CSSの基礎を学ぶには

• ただ、この講座はPHPについてを学ぶ場所なので、CSSの詳しい説明は省略したいと思います。
• じゃあ、なんか参考図書を教えてくださいよ！
• そうですね。僕が勉強したのは、「ごく簡単なHTMLの説明」ですね。このサイトはCSSだけでなく、HTMLの本質について適切に記述されたものです。このサイトの中にスタイルシートの項目がありますので、そちらを読み進めると良いでしょう。

• うーん、難しそうだなぁ～。
• 何を学ぶにも、はじめは簡単なのですが、だんだん理解をしていくと、一気に深みが見えてくる事って良くありますよね。CSSやHTMLもまさにその通りで、簡単に書こうと思うととても簡単なのですが、実際に「正しく」記述するのは難しいんです。
• うんうん。ちなみに、前回のHTMLは、熊さん的にはどうなんですか？
• 正直、０点以下ですね。これだと見た目も悪いですが、そもそもHTMLの仕様を満たしていませんね。
• うっ・・・orz
• うっ・・・orz

デザインを作成しよう

• では、前回のデザインを作り直してみましょうか。
• やった～
• では、書いていきますね。（コリコリ）

• こんな感じですかね。
• わぉー！めちゃめちゃ格好良くなった！！本当にありがとうございます～！
• CSSの内容は、HTMLの中に記述する方法と、別ファイルに添付する方法があるんですよ。今回は、１つのファイルにまとめていますが、別のファイルに分割することで、他のページと共用することもできます。
• なるほどぉ。
• では、そのソースコードを紹介しましょう。