Category Archives: CSS(スタイルシート)で遊ぼう!!

Zen Cartのテンプレート

最近Zen Cartのテンプレートを制作しています。

試行錯誤しつつ、
何とか使いやすくて綺麗なデザインにしたいと思っています。

テンプレートを作るにあったって、
スタイルシートをかなり変更していくのですが、
表示ブラウザーによっての、
マージンの影響の違い、
フォントサイズの違い・・・

かなり色々悩まされています :-?

それでも、それらとしっかり折り合いをつけて、
満足できるテンプレート制作ができるように、
もっともっと頑張らないといけませんね :-D

ページレイアウトの話

ホームページのレイアウトをするとき、
何に重点を置くでしょう?

・見た目のかっこよさ
・見易さ
・わかりやすさ
・使いやすさ

等々、きっといろんなことが出てきますよね。

制作する人、デザインする人、管理する人、使う人・・・

その立場によって要望も変わってくるでしょう。

一番いいのは、
どんな要望も満たせるページなのでしょうが、
それはなかなか難しい・・・ :-?

それでも最近はどんな人にでも使いやすいページを作りたいなと思います。

そんな、ユーザビリティ、アクセシビリティをどんどん良くしていって、
それからデザインも良くできていったらいいな :-D
なんて思いつつ作業をしています。

良いテンプレートができたときは、
テーマ配布もできるかもしれませんね :lol:

floatの指定による不具合

divを左右に浮かべてならべる為に、
floatを使うと思います。

でもfloatを私用すると、
背景の設定がうまくいかなかったり、
指定したはずのborder-bottomが表示されなかったり・・・

[img align=left]http://www.obitastar.co.jp/uploads/img4732c045aa6c7.gif[/img] それは、左図のようになっているせいかもしれません。

浮かべているdivを囲んだdiv(左図:赤点線)が、
中のdivの高さに連動できていないのです。

なので、
赤点線のdivに背景やborder-bottomなどを指定していても
中のdivに邪魔されて表示されません。

では、ここからが解決法です!

赤点線のdivを中のdivの高さに連動させるには、
赤点線のdivにfloat:left;を追加すること!!

これだけです :-o

[img align=left]http://www.obitastar.co.jp/uploads/img4732c05480732.gif[/img] これだけで、
左図のように赤点線のdivが
中のdivの高さにつられてくれます :lol:

魔法の言葉、
float: left;です :-D

リストの背景に画像をはろう!!


左の画像のように、
メニューリストの背景に画像をはりつけて、
ボタン風に表示してみましょう :lol:

まず、
HTMLのソースは・・・

<div id=”menu”>
<ul>
<li>What’NEW</li>
<li>News&info</li>
~~~~~省略~~~~~~
<li>利用規約</li>
<li>プライバシーポリシー</li>
</ul>
</div>

いたって普通のリストです :-P

次に、
CSS(スタイルシート)、

リストのときに表示される黒点を表示しないように指定。
div.menu ul {list-style:none;}

div.menu li {background:url(画像アドレス) no-repeat 50%;
※liに背景画像を指定します。
背景画像
真ん中に画像がくるようにポジションは50%に!

line-height:30px;
※あまりメニュー同士にくっついて欲しくないときは、line-heightで調節。
heightでは文字の位置があわなかったりするので、ここはline-height!!

あとは、ここにtext-alignや、margin、paddingを使ってお好みの位置に表示しましょう。