上のエントリーは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標準を説明した入門書も多く良著も増えてきています。基礎や考え方を学ぶなら、内容の詰まった本でみっちりお勉強した方が無駄な試行錯誤と検索が減って効率よく勉強できるのではないかと思います。

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

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

ここからMdnのターン。

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

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

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

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

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

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

番外編

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

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

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

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

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

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

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今風のグラデーションを使ったボタンを作る方法 – 基礎
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• サンプル系のページを移動しました

リキッドデザインをするならやっぱり画像も伸び縮みしたほうが良いよね。文字だけフレキシブルだとスペースをもて余したりすることもあるし、何より横幅が広がるほど文字が読みにくくなるしね。

って事で足りない頭を使ってCSSで考えてみた。

.fximgcow {
background: #fff url(test1.jpg) no-repeat center;
height: 250px;
text-align: center;
}

<div class="fximgcow"></div>

よし！これで画像もリキッドだ！・・・divの中身が無いけどね・・・
htmlだけじゃ画像かどうか解らないし、さすがにこれはちょっとなぁ。
そうだ！こうしたら空タグじゃなくなる！

.fximgcow {
background: #fff url(test1.jpg) no-repeat center;
height: 250px;
text-align: center;
}

<div class="fximgcow"><img src="test2.jpg" alt="牛さんですよ" width="460" height="250" /></div>

demo
うん、なんとかやりたかった事は表現できた。なんか不必要なdivがあるような気がするがきっと気のせいだ。でも1つの画像の為に2種類の画像を読み込んでるってのは重さが心配。しかもよくよく考えたら、画像を使ったサイト全体のフレキシブルな背景を作る方法とまったく同じだった。

でもこれワンポイントでならサイズ次第で使えるような気がしたりしなかったり。画像が少ないページならアリかな。ただいま当ブログでは[これはひどい]をお待ちしております。

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [XHTML+CSS]CSS Spriteで表現する角丸

今回の記事は2008-12-07CSS Spriteで表現する角丸 | Commit Labの続きです。

これはCSS Spriteというテクニックを利用して作った角丸boxです。従来通りならば複雑になりがちな角丸のマークアップを、CSS Spriteで作る事ことによりシンプルで無駄なタグのない記述のhtml+CSSで角丸を表現しています。(IE5,5に対応するときはどうしてもdivが1つ増えますが)

文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。

今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。

またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。

それに伴いCSS Spriteの画像を変更してます。横幅が1.5倍になりましたが、サイズは10バイト少々増えた程度です。またそれに合わせてCSSのbackgroundを変更しました。

今回使用している画像
sample（1色のみのサンプル）
sample2(5色のバリエーション)
Download:kadomaru.zip
動作確認：IE5.5 IE6 IE7 Firefox2 Firefox3 Opera9.62 Safari3 chrome0.4

body, div, address, p, h2 {
margin: 0;
padding: 0;
}
body {
font:100%/1.231 Arial, Helvetica, sans-serif;
padding-top: 30px;
text-align: center;
}

.contentbox {
width: 350px;
padding-bottom: 10px;
margin: 0 auto;
background: url(scbb.png) right bottom;
}

h2 {
width: 350px;
color: #fff;
font: bold 108%/1.9 'メイリオ',Meiryo,;
text-align: left;
text-indent: 1em;
background: #2C6EBD url(scbb.png) no-repeat left top;
}

* html h2 {
padding-top: 3px;
line-height: 1.8;
}

.IE55 {
width: 350px;
background: url(scbb.png) repeat-y center top;
}

p {
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 83%;
padding: 7px 15px 0px;
text-align: left;
}

img {
float: left;
margin: 10px 15px 0px 10px;
}

.justify {
text-align: justify;
text-justify:inter-ideograph; /* IE独自 */
}

<div class="contentbox">
<h2>ipod nanoのアイコン</h2>
<div class="IE55">
<p class="justify">テキスト段落1</p>
<p class="justify">テキスト段落2</p>

</div>
</div>

IE5.5に対応しない場合はdiv=”IE55″ごと削除が可能。しかしその場合はDIV=”IE55″のbackgroundをPに設定(コピペ)する必要がある。

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• サンプル系のページを移動しました
• [追記]CSSでロールオーバーをするときは

ネタ元は有名所コリスさんのこれ
コリス CSS 一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
そのネタ元はコリスさんの方から見れる。

私は最近DesignWalkerさんのエントリーを読んでからCSS Spriteに興味がありまして、自分の仕事の中で可能であればコッソリしこんでます。これ系のテクニックってよく使いながらも、総称のようなものを知らなかったので、知って目からうろこというかなんというか。でもこれ複数人でコーディングする場合は混乱を招く可能性があるんでそこは注意を。

これも有名所DesignWalkerさん。CSS Spriteの簡単な説明と利点。
DesignWalker CSS Spriteを活用しよう

でまぁ今回のネタについてはコリスさんを読んでいただくとして、これをテストしてみました。まず、Demo2をダウンロードして試した感想としては「こりゃ凄い！」という驚き。無駄なタグがない！。ありそうでなかった発想に脱帽。僕のようにjavascriotがまったく使えない人間でも、スライスしてDivをテーブルレイアウトの様に配置しなくても簡単に実現できる所が良いです。(他にもやり方ありますけどね)とりあえず日本語向けにCSSをカスタマイズしてみた。

Demo

こんな感じです。何処かで見たことがあるというか、はてな丸パクリですが、まぁお遊びということでお許しください。fontは僕の好みでh2のみメイリオです。で、これに使ってる画像はこれ一枚です。

実サイズの画像(448バイト)
画像次第でサイズを落とすことも可能でしょう。

で、ここで「やったー出来た出来た」と喜んでいたんですが、コリスさんのコメントを見るとどうやらIE5.5では崩れるらしい。まぁぶっちゃけ「Ie5.5は無視しよっかな・・・」と思ったんですが、とりあえず問題はPを背景として使うから生じるんだから、pのwrapを作って背景を指定すれば崩れないなと。(wrapper+inner否定派の方ごめんなさい)

で、Pを包んだ結果がこれ。

Demo2 ついでに画像も入れてみた。

Demo2の主なCSS

body, div, address, p, h2 { margin: 0; padding: 0;}

body { font: 100%/1.231 Arial, Helvetica, sans-serif;}

.contentbox {
width: 350px;
background: url(画像) no-repeat left bottom;
padding-bottom: 15px;
margin: 0 auto;
}

.contentbox h2 {
width: 320px;
background: url(画像) no-repeat left top;
padding: 0 15px;
font-family:"メイリオ";
color: #fff;
font-size:108%;
font-weight:bold;
line-height: 2;
height: 35px;
}

.contentbox p {
width: 318px;
background: url(画像) repeat-y right top;
padding: 10px 16px 0 16px;
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 85%;
}

Demo2のhtml

<div class="contentbox">
<h2>タイトル</h2>
<div class="IE55"><img alt="" />

文章

</div>
</div>

IE5.5用にdivが一つ増えてる。もっと良い方法があるかも。

これならIE5.5でも崩れずに表示可能です。ただしIE Testerの5.5でしか確認してないんで、実機では不明。いけるかな？で、例のごとくソースが殴り書きなんで整理整頓せれてなくて汚いです。これだけの手間で角丸が使えてフレキシブルなら、常用できるテクニックだと思うんだけどどうでしょうか。

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [Webデザイン] 企業サイトの横幅はどれくらい？～住宅メーカー編～

「僕の持っている 教科書には書いてない　か、僕が見落としている XHTMLとCSS」

なのでニュアンス的にはちょっとした小技みたいな感じで受け取ってくれるとこちらも気が楽ですけど、いかがなものでしょうか。さて情けない逃げ口上もすんだことですので、本題に入ります。

テキストリンクのアンダーラインをボーダーで表現する

リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの”飾り”を指定する場合は背景でやります)

1.が普通に指定したアンダーラインのあるリンク

2.飾りがnoneでボーダーの下が2pxのdotted

2.hoverの飾りがnoneでボーダーの下が2pxのsolid

IEデフォルトのツールチップを表示させない

html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。

しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。

そんなときは＜img＞の中にtitle=”"を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。

DTDによる画像の下に出現する意図しない隙間を埋める

僕がサイトを作る場合、基本的にXHTML 1.0 Strict+XML宣言で作ります作ってました。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。

右の場合は特に問題ないのですが、装飾要素のある部位だと困ります。なのでそういうときはCSSでimgに対して

vertical-align: bottom;

を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。

Fiirefoxの縦スクロールバーを常時表示させる

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [XHTML+CSS]CSS Spriteで表現する角丸

では、これの作り方ですが、まず

という二枚の画像を用意します。はい、これでもう8割方終わりましたお疲れ様です。

もしかして･･･と思った方！そのとおりです！あとは一枚目の画像をaのbackgroundに指定して、a:hoverのbackgroundに二枚目のアナウンスが出てる方を指定して完成です。

いやー出来た出来た。なんか釈然としないけど。

a.ann {
display: block;
overflow: hidden;
width: 230px;
height: 142px;
background-image: url(一枚目の画像);
background-repeat: no-repeat;
background-position: center center;
text-indent: -999px;
}

a.ann:hover { background-image: url(二枚目の画像);}

CSSでのロールオーバーの応用ですね。たぶん2枚の画像を上下なり左右なりに並べて一枚の画像にして、hoverでbackground-positionを一枚の長さ分指定しても出来ると思う。

でまぁ結論としては、text-indent:-999ってあんまり行儀がよくない気がするし、そもそも画像を編集するのも量が多いと面倒だし枚数分だけ個別にCSSを書いてやる必要があるので、大量に使うことがわかってるならこれでやらない方がいいですね。まぁこういう感じのをピンポイントで即座に求められた時にいかがでしょうか。

関連する投稿

• [XHTML+CSS] 引用を装飾してみる
• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• サンプル系のページを移動しました

引用符　wikipedia
引用符（いんようふ）は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす、引用部分を囲む一対の記号。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号とも言う。

こういうの装飾方法って、おしゃれ系ブログとかで良く見ますよね。うちのCSSはこんな感じです。

blockquote {
	background-color: #F2F2F2;
	background-image: url(/画像1.gif);
	background-repeat: no-repeat;
	background-position: 2% 0.5em;
	width: 95%;
	margin: 0 auto 1em auto;
	padding: 0px;
	border: 4px solid #939393;
}
blockquote p {
	text-align: justify;
	text-justify:inter-ideograph; /* IE独自 */
	background-image: url(img/画像2.gif);
	background-repeat: no-repeat;
	background-position: 98% bottom;
	padding: 2em 13.5% 1.5em 13.5%;
	margin-bottom: 0.5em;
	font-size: 85%;
	line-height: 1.5;
}

blockquoteの背景に左上の”(ダブルクオート)を指定して、中のPの背景に右下の”(ダブルクオート)を指定するかんじです。

うちは横幅が960px-760pxの擬似リキッドですので、ちょっと数値とかが面倒です。あと、いろいろ色指定したりボーダー使ったりしてるんで長いっすね。backgroundはあえてショートハンドで書いてません。

普通にやるなら

blockquote {
	width: 500px;
	padding-left: 60px;
	background: url(img/画像.gif) no-repeat left top;
}
blockquote p {
	padding-right: 60px;
	background: url(img/画像2.gif) no-repeat right bottom;
}

をベースとしていじっていく方がいいと思います。

関連する投稿

• [CSS]CSSで簡単に拡大画像をアナウンスする
• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• サンプル系のページを移動しました

なんか題名が意味不明になってしまいました。メイン部とサイドバーが白銀比を保ちつつ、指定した横幅(例：760px～960px)まで可変なエラスティックレイアウトです。

うんごめん日本語苦手なんだ。こういうのってなんて呼べば良いんだろう。勉強不足で申し訳ない。

たぶんいろんな所でCSSに詳しい人が解説してるんじゃないかと思うので、運悪くこのページを開いてしまった人へ参考までに。
(と予防線を張る)

発想の元ネタはこれ、以前お話した黄金比と白銀比を出してくれるZAPA先生のZAPA GS
[Z]ZAPAブロ〜グ2.0 Webデザイン白銀比計算ツール
airappli.com 黄金比・白銀比計算ツール「ZAPA GS」

本当にビールの一杯でもご馳走させていただきたいくらい便利。ZAPA GSの右下を掴んでグイグイ大きさを変えるのがとても楽しい。数値を入力するだけじゃなくてマウスで大きさを変えられるのが実に良い。しかも透明度もいじれる。

おかげでふと気になるWebサイトを見つけるとZAPA GSを使ってブラウザ上で黄金比や白銀比を探してみたり。とても勉強になります。

で、これでグイグイ動かしてるときに「俺のブログもこんな感じで白銀比(黄金比)を保ったまま動かしたい」と思った。でもmin-width,max-widthを使わなきゃ普通にエラスティックで比率保てるのでそんなに意味が無い気もしたりしなかったり。

以前メモしたマイナスマージンを使った2カラムのレイアウトをいじってみた。
リキッドレイアウトの最大横幅を固定する-minmax.js

単にmin-, max-を使っただけで、たぶん他のちゃんとしたコーダー系の人がどこかで解説してると思うし、思いつきなのであしからずご了承を。（予防線多すぎ）

考え方は全体をemで指定して中身を%で指定する感じ。

で、サンプル
白銀比固定でリキッドでエラスティック

min-,max- 使ってるんでIE6の場合は100%で表示するようにしてます。IE6も同じように見せるならminmax.jsかexpression属性とかいうのを使ったらできる！　出来ると思う…　できるんじゃないかなorz=3 (試してない。というかFirefox3&2 IE7でしか確認してない)

でも冷静になってみると単に外だけemで指定して、中身をマイナスマージンの％で指定しただけで、単なる応用だった事に気づいた。

さて、パワポタ3のサクセスで天才型投手が出るまでリセットを繰り返す作業に戻ります。

[追記]
よくよく考えたらこれ、エラスティックレイアウトの解説をして、こんな事もできるって持っていほうが良かったのかも…

まぁいいか誰も見てないブログだし　

いいんだ・・・たんにワードプレス触ってみたかっただけだもん　ノωT)

ついでにサンプルに画像を足してみました。
白銀比固定でリキッドでエラスティックへ

関連する投稿

• リキッドレイアウトの最大横幅を固定する-minmax.js
• [Webデザイン] 企業サイトの横幅はどれくらい？～住宅メーカー編～
• [Webデザイン] YahooとgoogleのMap APIと銀行の地図
• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01

例として
A「ブログ形式(weblog)で更新していくなんてどうですか？」
B「ブログ形式(日記)？そんなもんいらないよ」
みたいな

まぁこれはどちらも間違いじゃないですし詳しい方が歩み寄れば良いのですが、やはり現場レベルの人間と営業の方が話したりすると、そういう言葉に対する認識のズレによってギスギスしちゃったりするもんです。

webにそこそこ詳しい人に「それ違うよ」と言われても、あまり詳しくない人からしてみれば揚げ足を取られている気分になってしまうかもしれません。しかし要は最初からキチンと理解しておけば問題ないのです。

また社内でのやり取りならまだしも、他の会社とのやり取りで対等に話してたつもりが、いつの間にか下に見られてるなんて事があるかもしれません。

中には積もりに積もったストレスが原因で、webに詳しくない同僚が「ホームページ」と口にしたことに対して「ホームページってなんだよ！Webサイトって言えよ！」と怒鳴った人もいるみたいです。

もちろんそれは怒鳴った人が人間として終わってるという事は変わりありませんが、やはり不確かな単語の意味などはさっさと自分で調べるなり詳しい人に聞くなりした方が後々仕事がスムーズにいくに違いありません。

間違っても教えてくれる人に対して「お前に教えてあげたいという気持ちが足りないから、俺たちは理解できないんだ」だなんて、不遜な態度をとったりしないよう…ははっ　そんな人いるわけないですよね。
（あれ…おかしいな…目から涙が止まらないよ・・・)

とりあえず社内でレクチャーする為にまとめたものをここに乗せときます。
明らかな間違いなどありましたらコメントから叩いてやってください。

HTML(HyperText Markup Language)はマークアップ言語

マークアップ言語とはデータ記述言語に分類され、文章構造や文字にそのものに関する情報を文章と共に記述するための言語である。つまりHTMLは文章構造を表す言語ということになる。

CSS(Cascading Style Sheets)はスタイルシート言語

スタイルシート言語とは構造化文書の見た目を記述するコンピュータ言語である。一般的にスタイルシートというとCSSの事をを指すが、そもそもCSSとはスタイルシート言語の中の一つである。また単に見た目等の装飾だけではなく、それを一定の規則に基づいて再利用する事が可能である。

インターネットとWeb(www=World Wide Web)

インターネットとはコンピュータネットワーク自体をさす言葉であり、WWWブラウザを使用してwebサイト等にアクセスする場合は「Webを見る」と言う方が正しい。
日本人の日常用語として「ネットを見る」などとよく言うが、これはWindows95日本語版に付属していたwwwブラウザのデスクトップアイコンにインターネットと表記されていたために広まったとされている。

ホームページとWebサイト

日本ではウェブページ全般やウェブサイトをホームページと呼ぶ傾向がある。しかしホームページという言葉は、本来ウェブブラウザを起動した際に最初に表示されるウェブページの事を指す。またホームページの省略形としてHPと表記することがあるが、これはヒューレットパッカードの省略名として定着しているので、このような表記は行わないようにしなければならない。

ITとWeb(www=World Wide Web)

ITとは往々にしてインターネット・テクノロジーと間違えられる事が多いが、正しくはインフォメーション・テクノロジーの省略形である。ITとWebという言葉は混同されがちだが、ITとは文字通り情報技術のことをさしており、インターネットを中心とした通信ネットワーク網を生活やビジネスなどに活用できるようにする技術や設備がITである。解りやすく単純化するとITとはインフラであり、Webはサービスという事になる。

ブログ

ブログは元々Weblog（ウェブログ）と呼ばれWorld Wide Web上のウェブページのURLとともに覚え書きや論評などを加えログ（記録）しているウェブサイトの一種であった。また元々はアンチメジャーメディア、個人で行えるジャーナリズムとしての趣きもあった。しかし日本ではレンタルブログサービスが利用者に”Blog”という謎のワードを説明する為に”日記”と訳してしまった事からブログ＝日記という認識が広まっていった。

Web2.0

Web2.0とはオライリーメディアの創立者であるティム・オライリーらによって提唱された概念であり、2000年代中頃以降における、ウェブの新しい利用法を総称するマーケティング用語である。理解しやすく単純化すると、Web1.0とはWeb2.0以前の固定されていた情報の送り手と受け手の関係の事であり、Web2.0とはその垣根を無くしコミュニティを利用する全ての人物を情報の送り手として取り込む技術やサービスの事である。

参考サイト
[Z]ZAPAブロ～グ2.0 ブログはもう終わったのか
ウィキペディア　各ページ

関連する投稿

• [Webデザイン] 意外と難しい「契約までの流れ」のページ
• [Webデザイン] 企業サイトの横幅はどれくらい？2～人力検索はてな編～
• [Webデザイン] YahooとgoogleのMap APIと銀行の地図
• webサイト制作用データのまとめページを作りました
• webサイト制作用データ

もちろんレイアウトはズレて無いのですが、製作中にいちいちカクカクされると本来なら気づくべきレイアウトのミスも見逃してしまいがち。また最終的に出来上がったときにカクカクされるとイマイチ印象がよくない。なのでそういうときはＣＳＳで常にスクロールバーを表示させましょう。一番簡単なやり方は

CSS

html>/**/body { overflow-y:scroll;}

このhtml>/**/bodyはIE7以外(Operaもだよね？)のモダンブラウザにCSSを適用させる為のCSSハック。
Firefox2, safari3.1.1(win), IE6, 7 , 8(IEtester) で確認。
注意として、この場合Operaには適用されないみたいなので気をつけてください。
なので完全にしたい人は別々にハックしてください。

あとIE8 beta1についてはまさしくインターネットファッキンエクスプローラー（どこかのサイトがそう呼んでた）
なのでノーコメントで。

てかIE8だとズレまくりんぐ。

関連する投稿

• mediaboxとzoomifyで簡単に楽して画像をリッチに見せる
• CSS Gradient Text Effectをやってみた
• 横幅960pxのグリッドレイアウト
• 僕のFirefox2子ちゃんがFirefox3.0君と同棲を始めました
• 今週のweb制作情報まとめ | Web Design Scratch 01