CSS 画面上の隙間を無くす

ホームページを作れる人なら解ると思いますが、パッディングというのは要素と周りの間のアキ数値(微妙に違うか)のことです。レイアウトしていく時によく使うのがこのパッディング、マージンですね。ところが、ページ全体を画面の上に隙間なくつけようと思ってbodyにmargin=”0px”と入れても隙間はなくなりません。これは、ブラウザの初期値として勝手に隙間が空いてしまっているためです。隙間を無くすためには、初期値をクリアにしなければなりません。CSSのできるだけ上の位置に次のコードを書き込みます。

*{margin: 0; padding: 0; }

これでOK! こちらも参考になります。

 

 

CSS 背景画像が表示されない

いや〜、こういうのはイライラします。

ここのところ、出来ないながらにCSSとHTMLばかりいじっています。こんな感じのビジュアルで、背景画像を固定した上にリンクボタンとなる画像を横に3つ並べる。位置調整は教科書通りCSSのpojishonでというもの。ところが、背景画像が表示されない。パスも変更してみたり、pngをgifにしてみたり・・・。

ググってみるとこんなページが! http://design0.e1blue.net/design/status/129

助かりました。こういうのは時間の無駄ですからね。結論から言うと、clear both;を入れる。なぜかはわかりませんが、ちゃんと表示されました。

背景画像が出なかった画像

CSS 罫線を引く

サイドメニューの罫線が太い。1pxじゃないんです。多分2px。

これを解消すべく、いろいろと調べました。罫線はボックス要素の枠線の太さで指定し、左右と上の線が表示されなければいいと思ってコードを書いたんですがうまくいきません。HTMLに<hr>で書いてもみましたが、どうもwidth 200pxに指定すると位置がズレてしまいます。

ググってみると、こんなページが。

そのまま使用!左右幅、色を指定して出来上がりです。こんな簡単な事が出来ないなんて・・・。でも、少しずつ進んでいます。

 

 

p.sideborderで解決。その上がダメだったhr。

 

 

 

 

細くなりました。

 

 

画像ボタンにホバーを設定するCSS

こんなにカンタンとは思わなかったのでメモ。

html

<a href=”http://magic-design.org/html/about.html class menu”><img src=”../img/global_02.gif”></a>

css

a.menu:hover{

opacity:0.6;

filter:alpha(opacity=60);}

a.menu:hoverってのがみそでした。こんな使い方出来るんだ。面白いね。

CSS ポジション設定

■問題点:CSSでポジションの設定がうまくいかない

↓うまくいかなかった設定

親ボックスに position:relative; 画像にposition:absolute;を設定。一つ目の画像のみ位置設定が効くが2.3個目が効かない。

CSS

#menubord{

width:700px;

height:700px;

float:right;

padding:0px;

position:relative;

background-color:red;

}

.menu_a{

position:absolute;

left:20px;

top:10px;

.menu_b{

position:absolute;

left:50px;

top:10px;

}

.menu_c{

position:absolute;

left:1200px;

top:10px;

}

 

HTML

<div id=”menubord”>
<p class=”menu_a”><img src=”../img/menubord01.png”></p>
<p class=”menu_b”><img src=”../img/menubord02.png”></p>
<p class=”menu_c”><img src=”../img/menubord03.png”></p>
</div>

 

 

 

 

 

→→→→→→→→

ボックスを横に3つ並べて、それぞれに画像を入れる事で回避。この方法が正しいかどうかはわからない。

Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑