CSSでデザイン100個できるかな(´･ω･`) 003「はまった」

入門書

基礎から勉強ということで『スタイルシートワークショップ CSS+XHTMLによる「Web標準」実践ガイド』でやってみることにした。

はまった(´･ω･`)

アマゾンのレビュー見たら同じようにハマった人いるね。数ヶ月前に買ったときはレビューひとつも無かったのになぁ。
しばらく積読状態だったから気付かなかった...(´･ω･`)

以下アマゾンのレビューから一部引用

前ページのコード表示になかった部分が、次には何の説明もなく加えられいたりする。また、ＵＲＬで指定する部分もピリオドが1つ足りなかったり（多かったり）
:
ソースの記述にミスが多い。
また、本書には記述されていないソースがサンプルとしてダウンロードしたものには記述されていて、その記述がないと、想定のデザインにならない。
:
初心者にも、と書いてありますが、本書どおりにソースを書き進めたら、表示がうまくいかないことが多々あり、どこが間違っているのかを探すことの方に時間が掛かってしまいます。
Amazon.co.jp：カスタマーレビュー: スタイルシートワークショップ CSS+XHTMLによる「Web標準」実践ガイド

それでも良書だと思う

デザイン -> コーディングの流れで学習するにはとても良書だと思うな。
それだけに正誤表が無いのはとても残念だけど、うまくいかなければ調べればいいだけのこと(・∀・)b

Workshop02

「タブ型ナビゲーションを用いたクールなサイトデザイン」

Before

書籍にのってるサンプルそのまま（デザイン前）

After

サンプルをベースにデザインしてみた（デザイン後）

おかしな部分

角丸の部分そのとおりにやってみたらうまくいかなくて、サンプルをよく見たら元が間違ってるようだった(||ﾟДﾟ)
サンプルは色的に分りにくいけど。右下が丸くなってない。

文字を増やすと

こんなんなっちゃうし(´･ω･`)

他の方法を考えよう(´･ω･`)

ソースの一部

html

	  <div id="main">
		<p class="key"><img src="./img/keyVisual.jpg"
                            width="736" height="294" alt="" /></p>
		<div class="section">
		  <div class="sectionOuter">
			<div class="sectionInner">
			  <h2>About</h2>
			  <p class="leftCol"><img src="./img/aboutPhoto.jpg"
                                      width="179" height="135" alt="" /></p>
			  <p class="rightCol">コンテンツコンテンツコンテンツコンテンツコンテンツ
				コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
				コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
				コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
			</div>
		  </div>
		</div>
	  </div>

css

#main {
		width: 800px;
		height: auto;
		background: url(../img/mainBack.jpg) repeat-x top center;
		text-align: center;
		padding-bottom: 20px;
}

#main a {
		width: 740px;
		height: 100px;
		color: #ffffff;
		font-size: 2.0em;
		text-transform: uppercase;
		text-decoration: none;
		display: block;	
		}
		
#main a:hover,a:active {
		color: #cccccc;