• 広告を利用しています/紹介製品の価格・スペックは記事作成時点のものです

[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サファリ
写真

とある一日の記録の記事一覧