HTMLとCSS入門者にオススメできる本

htmlとかCSSってどこで勉強すればいいんだよ-スチーム速報という記事を読んだ。

上のエントリーはwebでの勉強が中心なんですが、やはり本で勉強したい人もいると思うのです。(コメントにある「本よりネットの方がリソースの質が良い」っていうのは、HTMLとCSSの良し悪しが理解できる人の意見だと思うし)

なのでガチガチで混み混みのテーブルレイアウトを作った事が無く、最初からweb標準とValidを意識してHTMLとCSSを学び始めた僕が読んだ本の一部を紹介することで、これから勉強しようとする本が好き派の人へ参考になればと思います。(と偉そうに言ってもこのブログはValidじゃないんだけど)

まず一番最初は必ずしも本は必要ではないと思います。HTMLやタグリファレンスで検索して出てくるサイトを見ながら、メモ帳でHTMLを書いてみましょう。

とりあえずやってみないことには何ともいえないので、古いと言われている「とほほ」でも“最初は”問題ないです。ただ1つ頭の何処かに「デザインはCSSで行うものだ」という言葉を置いておいてください。意味はそのうちすぐに理解できます。

個人的にはHTMLクイックリファレンスがオススメ。本を買っても途中で投げ出しちゃっいそうなら最初はこれで。サイトをプリントアウトしちゃえば勉強しやすいかも。
とほほのwww入門
HTMLクイックリファレンス

入門本を買う場合は(これは全部的に言える事なんだけど)あまり古い本は買わないように。作ってみるのが第一目標ではありますが、HTMLとCSSも他言語と同じくここ数年でブラウザの変化や、作る人たちの技術の向上により変化が著しいです。内容が古いと、後々また新しいルールを勉強するはめになりますので注意を。(個人的には3年以上前の本は読まない)

では、よく使うHTMLタグをそこそこ理解しCSSで遊んだ後で「もっとHTMLとCSSを詳しく知りたい」と思ったならば、大きめな本屋に行ってみましょう。最近はW3Cの仕様(HTMLを書くうえでのルール)やweb標準を説明した入門書も多く良著も増えてきています。基礎や考え方を学ぶなら、内容の詰まった本でみっちりお勉強した方が無駄な試行錯誤と検索が減って効率よく勉強できるのではないかと思います。

さてやっと本題にたどりついたので、僕が読んだ中でオススメな本を紹介していきます。

[tmkm-amazon]4774136840[/tmkm-amazon]

web標準とCSSレイアウトについて書かれている本。通称ホップ本。HTML+CSS初心者がステップアップしたい頃に読むと最適。本書は発売当初より評判が高かったのだが、出版社が倒産し一時は絶版状態になる。中古品が(記憶が確かならAmazonで)9000円前後で売りに出されていた頃もあった、ある意味で伝説の本。現在は出版社が変わり定価で購入できます。web標準の基本はこれで身に付ける事ができると思います。

ここからMdnのターン。
[tmkm-amazon]4844359002[/tmkm-amazon]

タイトルのとおりwebサイトを作る為に必要な基礎を書いてある本。レイアウト見本や配色・CSSレイアウト・ユーザビリティ・web2.0・サイト構造・SEOなどwebサイトを作るうえで必要な知識を広くまとめた本。プロとして恥ずかしくないシリーズは基礎から教えてくれて、全体的にハズレはないと思います。(同じような内容が載ってる場合は多いけど)

[tmkm-amazon]4844358146[/tmkm-amazon]

ちょっと古くなるけど、純粋にデザイン面を求めるならこっち。レイアウト見本・CSSテクニック・配色・web標準と内容も絞られている。だけどもうAmazonでは(中古しか)売ってません。

[tmkm-amazon]4844359754[/tmkm-amazon]

これもデザインの大原則とおなじような内容もあるがワークフローなどのページがある。前者が文章で読ませるが中心なら、こちらはCSSの使い方を画像とソースを見て学ぶ本。またテクニックも小回りのきくものが中心で、サイト作りのアクセントとして取り入れやすい。

はい、白状すると私は紙のデザインをやってる頃からMdn系が好きでした。さて上のホップ本とムックを1~2冊読めばだいたい思い通りにHTMLとCSSが書けて、サイトを作るうえでの基礎知識は学べると思います。よりCSSを知りたい人に対して今オススメな本は

[tmkm-amazon]4839923167[/tmkm-amazon]

原題は「Transcending CSS」。内容も素晴らしいが、訳と監訳のおかげでストレスなく読める。Transcending CSSは卓越したCSSという意味で、これからのCSSのスタンダードとなる可能性を秘めている。簡単に説明すると古いブラウザに合わせてCSSハックやフィルタを使うのではなく、これからは新しいブラウザ基準でCSS3やCSSセレクタを使ってデザインしていこうという内容。昨年末くらいだろうか、一部のブログで「IE6にはアップデートを催促するメッセージを出そう」という話題が持ち上がっている頃、著者のAndy Clarke氏のwebサイトが何度か引き合いに出されたことがあった。彼のサイトはIE6で見ると、サイト全体がモノクロになってしまう。
Stuff and Nonsense

#Transcending CSSはMOSeと呼ばれる事もあります。個人的には積極的にブラウザの独自拡張を使用するのがMOSeだと思っているのだけど、どうなんでしょう。

番外編
[tmkm-amazon]4839924341[/tmkm-amazon]

Dreamweaverを使い慣れたら是非とも読みたい一冊。HTMLやCSSの本ではないが、Dreamweaverの効率の良い使い方を学ぶ事で作業効率が上がります。「独学で使ってます」という人は必ず得るものがあるはず。Dreamweaverを使わない人には必要ないものなのでご注意を。

このまま行くと怒涛のアソシエイト地獄になりそうなので自重。きになる本があった方はまず、本屋で手にとって内容を確認してみてください。とりあえずまとめると、

1.まずはタグの使い方を知るためにリファレンスを見ながらサイトを作ってみる
2.HTMLとCSSが楽しいと感じたらホップ本なりweb標準の本を読んでみる。
3.その後はwebやムック本中心でデザインやCSSを掘り下げてみる。

てな感じでどうでしょうか。「昔とあんまり変わらねーよ」と言われるかもしれませんね。

習うより慣れろが気軽にできるのがHTMLとCSSのいい所だと思うので、最初から「W3Cが」とか「DTDは」とかではじまるより、リファレンスだけでやりたい放題ヘンチクリンなやつを作って挫折してみて、まず楽しいと感じる事が一番かなと思います。

と今でもヘンチクリンなサイトばかり作ってる俺が言ってました。

SSIでincludeするときにIEで謎のスペースが!

ひょんなことから管理することになった情報サイトの直帰率が異常に高いので、とりあえず新規のページだけフッターに関連記事や新着記事等のリンクをincludeさせる事にした。

phpでやろうかと思ったのですが(includeくらいしか使えないレベルですが)、それもいろいろ設定するのが面倒なので、とりあえずしばらくはテストと割り切ってssiで実験してみた。

一通り作り終わった後に気づいたのですが<ul>とひとつめの<li>との間に謎の20px程のスペースが入るのです。

最初は「あーまた変なところにマージン付けちゃったかな」と思ったのだが、何度CSSを見直してもそれらしきモノが見当たらない。困った困ったという事でGoogle先生にご相談。

それで出てきた答えがこちら
Webアクセシビリティについての覚書
何も悪いことをしていないのに、SSI(インクルード)を使ったらIEで謎の半角スペースが入ってしまう問題

なんとか問題は解決。UTF-8の場合BOMをつけてるとIEで半角スペースが入るようです。それプラス読み込む方読み込まれる方のダブルパンチが原因で変な20px程の謎マージン?が入ってしまったのですね!><;

覚えておこう。

mediaboxとzoomifyで簡単に楽して画像をリッチに見せる

mediaboxとzoomifyのサンプル

「手軽にネット上でチラシを配信したいんだけど…できればFlashを使った今風な感じで・・・」という相談を持ちかけられたのでお手軽な方法を考えてみた。忘れないうちにメモを。

今回はまずサンプルページをご覧ください。
mediabox&zoomifyサンプルページ

では下準備として今回Zoomifyで表示させたい画像を用意してください。今回は利用者にFlashでズームしながら画像を見てもらうわけなので、準備する画像もそこそこの解像度のものを選びましょう。ちなみにサンプルページの画像は2400x1800pxです。

用意をするのが面倒な方はサンプルで使用した変な画像をお使いください
sample.jpg – 2.08MB
つかえるもんならフリー素材として使っていただいて結構です。

続きを読む mediaboxとzoomifyで簡単に楽して画像をリッチに見せる

リキッドレイアウトの最大横幅を固定する-minmax.js

まずリキッドレイアウトの説明からですが、横幅100%で2カラムのリキッドレイアウトを作ります。3カラムはその応用になるので割愛。また現実問題としてサイドバーは固定の方が使いやすいので200pxで固定します。今回の肝はリキッドさせながらサイドバーを固定させる所でしょうか。投稿記事の表示される部分はwidth:100%;を指定してサイドバーは200pxを指定します。

全然目新しいことでもなんでもないのですが、とりあえず忘れないようにメモっときます。

CSS

#container {
float: left;
width: 100%;
margin-right: -200px;
}

#content { margin-right: 200px;}

.post {
width: 90%;
margin: 0 auto;
}

#sidebar {
float: right;
width: 200px;
}

XHTML

<div id="container">
<div id="content">
<div class="post">テスト</div>
</div>
</div>
<div id="sidebar">サイドです</div>

これに背景色等を加えるとこうなります
サンプル1

これはこれで良いのですが、最近は解像度が高いディスプレイも増えてきているので、100%だと間延びしてしまいかねません。

ですのでリキッドを生かしながら、サイトの横幅の最小値を従来どおりの760px、最大値を最近増えてきている960pxで固定させてみます。つまりサイトの横幅がユーザーのディスプレイにあわせて、760px~960pxの間で可変するようなります。

今回は簡単に#liquid-fixを作り、上で使ったXHTMLの全体をそれで包み込みます。その為には#liquid-fixに最大幅と最小幅を指定します。
指定にはmax-width / max-height / min-width / min-heightを使います。

対応ブラウザについてはHTMLクイックリファレンス – max-width をどうぞ。それに加えIE7でも正式対応しております。

ではmin&max-widthを利用して#liquid-fixに横幅を指定します。

CSS

#liquid-fix {
min-width: 760px;
max-width: 960px;
}

これを上のCSSに書き足して、あとはHTMLで全体を包むとこうなります。
サンプル2

しかしこのままでは先ほど説明したとおり、IE6ではmin-width等をサポートしていないためサンプル1と変化がありません。ここでdoxdesk.comminmax.js を使います。

利用は簡単で、minmax.jsをサーバーにアップロードしてhead内に
<script type=”text/javascript” src=”○○/minmax.js”></script>
と書くだけです。

するとIE6でもmin-width等を利用することができるようになります。
サンプル3