« [1日更新]トップページのHTML作成 | Home | [1日更新]マックでスタイルシート修正 »

2007年1月30日

[1日更新]トップページのスタイルシート作成

広尾で久しぶりの飲み会。
ビール一杯、芋焼酎一杯、栗焼酎一杯。
エジプト話で大盛り上がり。
REIKA先生は、やっぱ格好いい。

電車の中で気持ちよく寝て、12時過ぎに気持ちよくおうちに帰ってきたんだけど、このままだと気持ちよくベッドには入れない・・・ということで、スタイルシートだけ作成した。

スタイルシート作成済みのトップページはこちら
 
 

 
 
さすがに、ブログ記事をしっかり書くパワーはもう残っていないので、これだけで寝ます。軽く酔っ払っているので、多分変になってるところもいっぱいありそうだけど、そのあたりはまあ、明日しらふの時に直すゆうことで。あ、でも明日は2件アポだ。うーん、いつ完成するんだろう、このサイト。

スタイルシートの内容はこんな感じ。
(翌日追記:このスタイルシートの記述、間違いがいっぱいでした)

body { background: #FFFFCC url(../img/bg01.gif) repeat-y center; text-align: center; color: #333333; font-size: 12px; border-top-color: #333399; border-top-width: 20px; }

a {
text-decoration: underline;
}

a:link {
color: #993300;
}

a:visited {
color: #996600;
}

a:active {
color: #006600;
}

a:hover {
color: #006600;
}
#container {
width: 800px;
text-align: left;
font-size: 12px;
line-height: 120%;
padding: 0px 15px 10px 15px;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#toptitle h1 {
font-size: xx-small;
display: none;
}
#toptitle h2 {
font-size: 12px;
line-height: 120%;
margin-bottom: 10px;
}
.list03 {
list-style: inside url(../img/btn01.gif);
margin-left: 10px;
}

#topcenter {
position: relative;
width: 580px;
float: left;
}
#topright {
position: relative;
width: 160px;
float: left;
margin-left: 30px;
}
#topitemphoto {
float: left;
}
table {
font-size: 12px;

}
td {
vertical-align: top;
}
.list01 {
list-style: inside url(../img/btn01.gif);
margin-left: 0px;
line-height: 140%;
}
.box01 {
border: dotted #333399 2px;
width: 580px;
padding: 5px 5px 5px 5px;
}

#footer {
background: #FFFFCC;
text-align: center;
}
#copyright {
text-align: right;
font-size: 10px;
color: #999999;
}

コメント(4)

スタイルシート作成済みのトップ、見やすいです。
それにとってもきれい!
こんな風に完成までの過程を見てると、このサイトに愛情沸いちゃいますね^ー^

Macのfirefoxやsafariだとレイアウトが崩れてしまうようですよ。是非MacBookで確認してくださいね。今回のサイト作成手順大変勉強になりました。人それぞれ作り方があって、面白かったです。いつもDreamweaverだけでサイト作成していましたが、Fireworksも買ってみようかな。

このままだとFirefoxで見たときに(多分Macも)センタリングされないので、#containerに「margin:0 auto;」と追記することをオススメします^^

とことこ散歩さん、
ありがとうございます!
> こんな風に完成までの過程を見てると、このサイトに愛情沸いちゃいますね^ー^
あ、そんな効果もあるんですね(笑

lonestarさん、
ああ、ありがとうございます。今日(もう昨日か)慌てて直しました。せっかくMacBook持っているのに、お恥ずかしい限りです。これまでは「Mac表示確認できないからいいや」という気持ちがどっかにあったんですが、実際に自分でマックで見て「!!!」だったので、必ずしっかり表示確認しようと思いました。

うかさん、
助かります。これ教えてもらってなかったら、悩んでいたと思います(前に別ブログ作るときにも、ここで間違えちゃっていたんでした)

コメントする

カテゴリ

月別 アーカイブ

この記事について

このページは、wadaが2007年1月30日 02:18に書いた記事です。

ひとつ前の記事は「[1日更新]トップページのHTML作成」です。

次の記事は「[1日更新]マックでスタイルシート修正」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。