CSSレイアウト 実践講座最終回 main要素

CL company

今回で実践講座最終回です。

記事を見返してみれば、説明不足の所もあったような...
もし気になった所があった時はコメントでも下さい。

最終回main要素と指定しているコンテンツ部分です。

…ここからが続き

main要素

CL companyとは?ってなってる部分

/*----------------------- main Style-- */
#main h2	{
	height: 28px;
	background: url(../images/title_h2.jpg) no-repeat;
	font-size: 133.3%;
	padding: 12px 0 0px 35px;
	clear: both;
	margin-bottom: 10px;
	color: #333;
}
#main p	{
	margin-bottom: 1.5em;
}
#main .textL	{
	width: 340px;
	float: left;
	padding: 10px 0 10px 10px;
}
#main .imgR	{
	float: right;
	padding-right: 10px;
}

新着情報部分

/*----------------------- main Style-- */
#main dl	{
	padding: 0px 5px 15px;
}
#main dl a	{
	color: #304064;
}
#main dl a:hover	{
	color: #304064;
}
#main dl dd	{
	padding: 3px 10px;
	margin-bottom: 5px;
	border-bottom: solid 1px #CCC;
}
#main dl .new	{
	background: url(../images/icon_new.gif) no-repeat;
	padding-left: 40px;
}

完成したらこうなります

最後に

実際「講座」って形で書いていくのは難しいかったです...
説明不足部分もいっぱいありますし、分かりずらい所があったと思うので、気になった事があった場合は遠慮なくご連絡下さい。

参考程度に書いておきますが、自分でデザインしたって事もありコーディングにかかった時間は1時間ほどです。
CSSを始めたての人なら、3日くらいを目標に頑張って下さい。

今後ともよろしくお願い致します。

Comments

MIYA

MIYA

yoshiさん。理解力がなくてすみませ><本当ですね;;
早速修正しておきたいと思います!教えて頂きありがとうございました!

2009年08月25日 22:14

yoshi

yoshi

すいません。
説明がうまくできてないみたいで・・・

練習用フォルダ内のhtmlにclass="○○"というのがぬけていて、講義内に記述を促す部分がなかったと思います。

2009年08月25日 20:16

MIYA

MIYA

yoshiさんからご指摘い頂いた点なんですが、sub要素に関しては前回の「CSSレイアウト 実践講座5 sub、footer要素 」で開設をしているつもりです…

それとmain dl .newも記述してあるはずなんですが…

検討違いの返答をしているなら申し訳ございません><

2009年08月25日 10:35

yoshi

yoshi

こんにちは。
とても勉強になりました。
ありがとうございます。


subのclass指定でnavi、bnrの指定と
main dl .new の指定が抜けていませんか?

最後までやってちょっと違うなぁと思って、htmlに書き足したのですが・・・

見落としだったらすいません。

これからも勉強させていただきます。
よろしくお願いします。

2009年08月24日 23:51

初心者です

初心者です

ありがとうございました!
できました〜♪
これからも楽しみにしています。

2009年04月01日 11:13

MIYA

MIYA

すみません。

修正しておきたました。
#globalNaviのwidthの数字が間違っていました…

ご指摘ありがとうございます。

2009年03月31日 19:18

初心者です

初心者です

こんにちわ、
すごく丁寧に書いてあって分かりやすいので時々勉強しに
きています!

実践講座の最終的な「CL company」なのですが、全体は中央によっているのですが、IE6だとコンテンツの右側が空きませんか?

もちろんIE7、FFなら大丈夫なのです。

自分で組んだものも同じ症状が出たので、なんでかなー
と思って。

教えてください!

2009年03月31日 16:10

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article