Written by
watanabe
内容全体を上下中央の真ん中に設置
CSSだけで全体を上下中央に表示する方法をご紹介いたします。 全体のdivに「position: absolute;」で絶対位置の指定をし、topとbottomに「50%」、マージンでは幅と高さの半分の値をマイナス指定します。もしこの時、パディングの指定がある場合は、パディングの領域も含めた値を指定します。 div.container { position: absolute;...
Written by
watanabe
CSSだけで全体を上下中央に表示する方法をご紹介いたします。 全体のdivに「position: absolute;」で絶対位置の指定をし、topとbottomに「50%」、マージンでは幅と高さの半分の値をマイナス指定します。もしこの時、パディングの指定がある場合は、パディングの領域も含めた値を指定します。 div.container { position: absolute;...
Written by
watanabe
リストの一番上のborder線を消す方法をご紹介いたします。 通常、リストで最後の線が必要ない場合は、「 border-bottom」に線を指定して、最後のli要素にクラスを指定しボーダーを消すなどの方法が思い浮かびますが、下記のCSSのように「border-top」で実現することもできます。 12行目ではliに「margin-top: -1px;」と上に対して、1pxマイナス...
Written by
watanabe
リストにクラスを指定せず横幅内でぴったりと表示させる方法をご紹介いたします。 横幅が290pxのboxがあると仮定し、そのbox内のulのliを横に並ばせます。liを3つ記述し、横幅を90px、それぞれのスペース用に右マージンで10pxを指定します。この時、通常は最後のli要素に右マージン0pxなどのクラス指定をしないと、liの要素が横に並ばずに下に落ちてしまいます。 クラスの...
Written by
watanabe
CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。 ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。 コンテンツは「overflow: au...
