HOME > 開発者向けBLOG >  Webデザイン

Technology Note 開発者向けBLOG

Webデザイン

立体的な影を表示

CSSだけで立体的な影を表示する方法をご紹介いたします。 ポイントは「div.shadow_box」での「position: relative;」の相対指定と「top: -5px;」、「left: -5px;」です。位置を移動させる要素に相対指定し、上と左にマイナスを指定をして、影があるように見せています。 div.shadow_area { width: 150px; hei...

続きを読む

半透明表示

cssだけで背景色を半透明にする方法をご紹介します。 今回は半透明表示をわかりやすくするために、bodyに背景で画像を表示させています。 半透明をしたい要素に基本となる色を指定し、半透明にするプロパティを記述します。ここでは10行目から13行目までが半透明にするプロパティに当たります。半透明にするプロパティのopacityは対応ブラウザを多少選びますので、クロスブラウザ対応の場...

続きを読む

内容全体を上下中央の真ん中に設置

CSSだけで全体を上下中央に表示する方法をご紹介いたします。 全体のdivに「position: absolute;」で絶対位置の指定をし、topとbottomに「50%」、マージンでは幅と高さの半分の値をマイナス指定します。もしこの時、パディングの指定がある場合は、パディングの領域も含めた値を指定します。 div.container { position: absolute;...

続きを読む

リストの一番上のborder線を消す

リストの一番上のborder線を消す方法をご紹介いたします。 通常、リストで最後の線が必要ない場合は、「 border-bottom」に線を指定して、最後のli要素にクラスを指定しボーダーを消すなどの方法が思い浮かびますが、下記のCSSのように「border-top」で実現することもできます。 12行目ではliに「margin-top: -1px;」と上に対して、1pxマイナス...

続きを読む

liにクラスを指定せず横幅内でぴったりと表示

リストにクラスを指定せず横幅内でぴったりと表示させる方法をご紹介いたします。 横幅が290pxのboxがあると仮定し、そのbox内のulのliを横に並ばせます。liを3つ記述し、横幅を90px、それぞれのスペース用に右マージンで10pxを指定します。この時、通常は最後のli要素に右マージン0pxなどのクラス指定をしないと、liの要素が横に並ばずに下に落ちてしまいます。 クラスの...

続きを読む

PAGETOP