« ［1日更新］中身ページのコーディング方針 | Home | ［1日更新］中身ページのHTML・スタイルシート作成 »
2007年1月31日
［1日更新］自宅でスタイルシート修正（まだやってる・・・）
結局、大塚からスタイルシートを修正しながら（？）上野駅まで歩いた。写真は上野公園内の不忍の池を根津側から撮影した写真。
今回は片足0.6kgウェイトで、結構いい運動になった。ウェイトをつけた状態で膝を傷めないよう歩こうとすると、結構太ももの筋肉を使うためだ。
ところで、途中からこのシリーズを読んでいる人のために解説をしておこう。
日曜日の朝、「そうだ今日一日集中作業して、ロフトベッド購入ナビを一気に更新しよう！」と思いついたところから話が始まっている（最初の記事）。
決意が揺らがないよう、ブログで宣言してみた。
自分自身がだれてしまわないよう、途中経過もブログに書くことにした。タイトルに「1日更新」と入っているのは、その名残だ。
え、今日は何曜日かって？
もう水曜日だよ。誰だよ、一日で終わるなんて楽観しした奴は・・・。
まさかこんな「長期連載実況中継」になるとは・・・。
＋＋＋
さて、スタイルシートでもうひとつ修正が必要な部分、
それはリストの表示だ。
通常「ul」「li」タグを使ってリスト（箇条書き）を書くと、左側にインデントがかかる。
- さくらがさいた
- さくらはバンカーショット
- さくらがばれた
このインデント部分をなくして左寄せにしたい。
そのために、こんなスタイルシートにした。
▼HTMLソース<ul class="list01">
<li>ロフトベッドとは？</li>
<li>ロフトベッドのメリット＆デメリット</li>
<li>ロフトベッドの種類いろいろ</li>
</ul>▼CSSソース
.list01 {
list-style: inside url(../img/btn01.gif);
margin-left: 0px;
}
これだと、こんな風にIEとFireFoxで異なった表示になってしまう。
▼IE（自分はSleipnir）
▼Firefox（Macのサファリでも同じ感じ）
ここについても、初期の記事に、うかさんからアドバイスをもらっていた。
対策としては、「marginを指定したらpaddingもネ！」みたいなことだと思います。
ふむ。
やってみた。
.list01 {
list-style: inside url(../img/btn01.gif);
margin-left: 0px;
padding-left: 0px;
}
▼修正後Firefoxで表示
わお、一発OK！
ただまだ、いろいろ余白がおかしくなっているので、
今晩はここまで修正をして寝ようと思う。
＋＋＋
■「width」は「padding」を除いた数値
追加で修正した点。
いつもここ忘れちゃうんだよな。古いIEの感覚のままで。
▼修正前
#container {
width: 800px;
text-align: left;
font-size: 12px;
line-height: 120%;
padding: 0px 15px 10px 15px;
margin:0px auto;
}▼修正後
#container {
width: 770px;
text-align: left;
font-size: 12px;
line-height: 120%;
padding: 0px 15px 10px 15px;
margin:0px auto;
}
（他にも数点、同じ間違いをしてしまっている箇所があった）
あと、HTMLソースの冒頭に下記を追加した。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
まだちょっとおかしなところがあるが、
他にいくつか細々とした点を修正し、とりあえず、IE、Firefox、Macサファリでだいたい同じように表示されるようになった。
▼IE
▼FireFox
▼Macサファリ
トラックバック(1)
と言っても・・・自分の場合ｗご覧の通り(^^;) デザインを丸ごと変えていたりする・・・。XOOPSの性質上コンテンツがHTMLサイトの別ページって言うことでなくモジュール、そうブログラムを動かしているわけで・・。 で、XOOPSはそれを管理者の任意に表示することが出来る... 続きを読む
わださん、とりあえずひと段落お疲れ様でした＾＾
僕はのんびり少しずついぢる派なので、わださんのジェットコースターのような勢いにフラフラしております♪
今回の更新の内容は、いろいろと参考になりました。自分で使えそうなところは頂きたいと思います。
ありがとうございました＾＾
すごいなぁ･･なんか着実に「サイトリニューアル」が、進んでいる！
さすがわプロっすね(^_-)-☆
ど素人の自分には、すでに「読み物」になってますよ！（笑）
＞ ■「width」は「padding」を除いた数値
これは、昨日ちょうど自分も「お勉強」したところですｗ
FC2BLOGのカスタマイズサポートみたいなので、開いたらちょうどあったんですよ♪らっきー^^*
そもそもFC2のCSSファイル自体で見たこともない（笑）記述を発見し「なんぞや？(・ω・ )」と思ったのが始まりで読んでいくと。
「Internet Explorerのバグを利用」
↓
「Internet Explorerの適用範囲にご注意を！」
↓
「ボックスモデルハックを'ぐぐる'べし！」
となったので、ぐぐった結果。解りました(^^;)
自分がたどり着いたサイトさんで、古いie用と6以降のバージョンのモノ（ってか、自分7にしててこれも崩れるんですが･･）そして、Operaと全部に対応できるCSS記述を公開してらして、真ありがたい限りでした。
我が家･･とりあえず、今日はタイトルロゴ作らないと！って状況です（笑）
各コンテンツなんて、いつになるやら･･。テンプレートファイルは、これからですし･･死にそうです(-_-;)
＞おまけに月末だわ、外壁工事はあるわ！嫌がらせかぁ～！って思ってたり（笑）
そらたさん、
私もなんかフラフラしてきました。
今日いっぱいで、なんとか目処をつけたいところです。
ちょっとでも何か参考になったのだとしたらうれしいです。
ごんさん、
そうなんですよ、結構ここ、ブラウザによって「width」どこまで含むのか異なるので、なんか理解ごちゃごちゃになりますよね。自分がHTMLを最初に学んだときは、padding含んでましたから、IEの場合。
外壁工事はいやですね・・・。早く終わりますよに。