CSS Archive

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
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;
}

全文を読む

久々に「これイイ！！」というものに出会いました。会社の人に教えてもらったのですが、これさえあればIEのチェックは問題ないようです。他にもスタンドアローン版やIE3ぐらい〜IE6までセットになったものを使用したことはあるのですが、これは確認するときに緑のボタンをクリックすればすぐさま確認ができますし、パソコンに変なソフトをインストールしたりする必要もありません。
今後は有効に使っていきたいと思います。

ほとんどナビなんかでは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を指定する必要がないみたいです。
たぶんこれは初歩的な技だと思われるので、今後使用したいと思います。今まで技術さんに苦労させてきたなと思うとちょっと情けないです。
備忘録までに。。。

最近はコーディングばかりしているんですが、一カ所つまずいてしまうところがありました。
現状でもはっきりとうまくいけてないんですが、
とりあえずCSSの方をこんな感じで対処していたと思います。

全文を読む

先日IE6でボックス内の要素が溢れちゃって、解決するのに無駄に時間をかけてしまいました。原因は、floatする要素の前にコメントがあることによって、溢れちゃうみたいです。
いやーなんかこんなんで考えてしまう自分が情けないです。もっと勉強をしなくては！！
最近会社には新卒が入ってきて、スキルは自分よりもはるかに高くていいプレッシャーになっています。

ここ数日先にかかえているサイト改修がとても不安です。ページ数自体は50前後と決して多くはないのですが、なんせ自分一人でやんなくてはいけなく…何からやれば良いのか。現在CSS、JavaScript、PHPの影響範囲などを洗い出したり、コーディングガイドラインの作成を同時に進めていこうかなと計画しています。これを乗り越えれれば少しは入社当初に比べれば成長したかななんて思えるのかなと、越えなくてはならない壁って感じです。