HOME > 開発者向けBLOG >  2011 December

Technology Note 開発者向けBLOG

開発者向けBLOG アーカイブ December, 2011

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

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の要素が横に並ばずに下に落ちてしまいます。 クラスの...

続きを読む

ヘッダーとフッターを固定

CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。 ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。 コンテンツは「overflow: au...

続きを読む

PAGETOP