CSS

先日遭遇したので備忘録。
コーディングがある程度してふとIEで確認すると絶対配置した画像が消えていたのでとても焦りました。自分の中ではabsolute指定するとまあブラウザのどこかにいるだろうという考え合ったのですが、border指定しようが、background-color指定しようがいなかったです。いろいろと調べてみたところ、position指定する前後のfloatしているものやhasLayoutが絡んでいるみたいです。

とりあえずclearをしたら回避できました。
まだまだ知識不足ですが、こういうのに遭遇できると楽しいです♪

twitter関連のサイトみたいです。twitter使ったことないんでいまいちわからないですが。
この動きはFlashではなくJavaScriptでやっていみたいで、CSSの使い方も上手いなと思いました。
JavaScriptはまだまだなんのこっちゃわからないですが、クオリティの高いサイトを見ると勉強したくなりますね。
デザインも結構好きです。

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓

■html

<ul>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
<li><a href=""><img src="" /></a></li>
</ul>

■CSS

ul {
list-style:none;
}

li {
margin-bottom:2px;
}

全文を読む

通勤時間を使って読んだのですが、内容が面白くあっという間に読み終えてしまいました。

全文を読む

ほとんどナビなんかではul要素を使用していて、記述はこんな感じになるのですが、
■html
<ul id=”nav”>
<li><a href=”">ホーム</a></li>
<li><a href=”">ページ１</a></li>
<li><a href=”">ページ２</a></li>
<li class=”lastNav”><a href=”">ページ３</a></li>
</ul>

■css
#nav {
width:495px;
}

#nav li {
float:left;
width:120px;
margin-right:5px;
}

#nav li.lastNav {
margin-right:;
}

いままでこのように、幅が決まっている場合には最後のliにclass=”lastNav”で余白を消していたのですが、
ul属性に
#nav {
width:495px;
margin-right:-5px;/*←追記*/
}

margin-rightに大してネガティブマージンをいれることで、最後のli属性にわざわざclassを指定する必要がないみたいです。
たぶんこれは初歩的な技だと思われるので、今後使用したいと思います。今まで技術さんに苦労させてきたなと思うとちょっと情けないです。
備忘録までに。。。