当ブログについて | 管理人プロフィール | コンタクト
<スポンサードリンク>

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

2007.01.30 日記・コラム・つぶやき C(4) TB(0) このエントリーを含む「はてなブックマーク」 この記事を「livedoorクリップ」! 「Yahoo!ブックマーク」に登録

広尾で久しぶりの飲み会。
ビール一杯、芋焼酎一杯、栗焼酎一杯。
エジプト話で大盛り上がり。
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;
}



コメント

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

投稿者: とことこ散歩 (2007.01.30 05:51)

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

投稿者: lonestar (2007.01.30 07:20)

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

投稿者: うか (2007.01.30 08:30)

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

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

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

投稿者: わだ (2007.01.31 00:17)





トラックバック
http://app.cocolog-nifty.com/t/trackback/5901/13712500

内容に関連性のある記事からのトラックバックは歓迎です。記事内リンクも特に必要ありません。過去交流のないブログでもまったく問題ありません。ただし「単に部分的なキーワードつながり(関連性が薄すぎ)」「自動で大量トラックバック送信」「自身がトラックバックを受付けていないブログからの一方的なトラックバック」は、削除します。

最新の記事

管理人プロフィール

和田 亜希子

利根川流域に生息するアラフォー独女。ニッチなテーマで小さなサイトを作る「ミニサイト職人」で、主に運営サイトの広告収入で生計たてるようになり早10年経ちました。「パソコン一台携え、旅しながらサイト運営で生計立てる」ベドウィン・モバイラーの夢まであと一歩。大切にしたいのは「好奇心」と「向上心」。うさぎは2011年の干支、ヘビ年バージョンはこちらです。(詳細

Twitter

著書一覧(Amazon)
Yahoo!プロフィール
YouTube動画一覧

AMNパートナーブログ