当ブログについて | 管理人プロフィール | コンタクト

[1日更新]自宅でスタイルシート修正(まだやってる・・・)

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

写真結局、大塚からスタイルシートを修正しながら(?)上野駅まで歩いた。写真は上野公園内の不忍の池を根津側から撮影した写真。

今回は片足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サファリ
写真




コメント

わださん、とりあえずひと段落お疲れ様でした^^
僕はのんびり少しずついぢる派なので、わださんのジェットコースターのような勢いにフラフラしております♪

今回の更新の内容は、いろいろと参考になりました。自分で使えそうなところは頂きたいと思います。
ありがとうございました^^

投稿者: そらた (2007.01.31 02:11)

すごいなぁ・・なんか着実に「サイトリニューアル」が、進んでいる!
さすがわプロっすね(^_-)-☆
ど素人の自分には、すでに「読み物」になってますよ!(笑)

> ■「width」は「padding」を除いた数値

これは、昨日ちょうど自分も「お勉強」したところですw
FC2BLOGのカスタマイズサポートみたいなので、開いたらちょうどあったんですよ♪らっきー^^*
そもそもFC2のCSSファイル自体で見たこともない(笑)記述を発見し「なんぞや?(・ω・ )」と思ったのが始まりで読んでいくと。
「Internet Explorerのバグを利用」

「Internet Explorerの適用範囲にご注意を!」

「ボックスモデルハックを'ぐぐる'べし!」

となったので、ぐぐった結果。解りました(^^;)
自分がたどり着いたサイトさんで、古いie用と6以降のバージョンのモノ(ってか、自分7にしててこれも崩れるんですが・・)そして、Operaと全部に対応できるCSS記述を公開してらして、真ありがたい限りでした。
 
我が家・・とりあえず、今日はタイトルロゴ作らないと!って状況です(笑)
各コンテンツなんて、いつになるやら・・。テンプレートファイルは、これからですし・・死にそうです(-_-;)
 >おまけに月末だわ、外壁工事はあるわ!嫌がらせかぁ~!って思ってたり(笑)

投稿者: ごん (2007.01.31 06:51)

そらたさん、
私もなんかフラフラしてきました。
今日いっぱいで、なんとか目処をつけたいところです。
ちょっとでも何か参考になったのだとしたらうれしいです。

ごんさん、
そうなんですよ、結構ここ、ブラウザによって「width」どこまで含むのか異なるので、なんか理解ごちゃごちゃになりますよね。自分がHTMLを最初に学んだときは、padding含んでましたから、IEの場合。
外壁工事はいやですね・・・。早く終わりますよに。

投稿者: わだ (2007.01.31 20:54)





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

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

と言っても・・・自分の場合wご覧の通り(^^;) デザインを丸ごと変えていたりする・・・。XOOPSの性質上コンテンツがHTMLサイトの別ページって言うことでなくモジュール、そうブログラムを動かしているわけで・・。 で、XOOPSはそれを管理者の任意に表示することが出来る...(2007.01.31 10:45)
最新の記事

管理人プロフィール

和田 亜希子

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

Twitter

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

AMNパートナーブログ