WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:WordPressページ遷移時に画面がチラつくorページ読み込みが重い時の改善法
HOME
次の記事:ファビコンとウェブクリップアイコンの設定方法

ウェブサイト全体の中央揃え、ボックス背景色を画面下まで伸ばす

Web知識

 

現在ホームページ(rarecard.jp※)がまっさらな状態です。せっかくなので、Webデザインを始めたての人が頭を抱えるであろうウェブサイト全体の中央揃えについて説明書きを残しておきます。そう書いた方が伝わり易いと思いウェブサイト全体の中央揃えと書きましたが、正確にはウェブページのメインボックスの中央寄せですね。

※ホームページには、このブログへのリダイレクト(自動ジャンプ)設定を施しています。

 

 

左に寄ったメインボックス

左に寄ったメインボックス(白部分)を・・・

 

中央揃えしたメインボックス

メインボックス内の文字や画像は左に揃えたまま中央に寄せます。

 

 

以下手順となります。

  1. 親ボックス(上図だと黒背景部分)の横幅を指定
  2. 子ボックス(上図だと白背景部分)の横幅を指定
  3. 子ボックスに対して左右のスペースを自動調整する { margin: 0 auto; } を適用

 

 

p009

 

body { width: 100%; }

まず、今回親ボックスとなるbody要素の横幅を100%に設定します。

 

次に、中央に寄せたいエリアを全てボックスを生成して包み込みます。これが子ボックスになります。上のソースで赤く囲った部分がそれにあたります。子ボックスに付けるid名はなんでも構いません。ただ、wrapperとは(包み込む)ラップの事で、メインコンテンツを包み込むボックスのid名として一般的に使われます。

 

#wrapper { width: 60%;  margin: 0 auto; }

最後に子ボックスの横幅の設定と、marginでボックス(外)の余白調整を行います。

marginで値を2つ指定した場合、{ margin: 【上下】【左右】; } このような形で指定している事になります。

{ margin: 0 auto; } と指定する事で、ボックス(外)の上下の余白は0、左右の余白は均等になるように自動調整され、親ボックスに対して子ボックスを中央に寄せる事が出来ます。

もちろん { margin: 50px auto; } などと記述して、上下に余白を設けると同時にボックスを中央寄せする事も可能です。

 

これでメインボックスの中央寄せは出来たと思います。

 

 

中央寄せ現実

しかし、実際に上で書いた最低限のスタイルしか適用しないと、ページの上に余計なスペースがあったり、子ボックスの背景色が下まで伸びきっていないスタイルになります。

 

まずページの上の余計なスペースですが、これはh1要素にデフォルトで設定されているmarginの値が原因です(正確にはブラウザ側の設定)。ちなみにmarginはボックス外の余白なので、対象のボックスに指定した背景色は表示されません。

他の要素にもmarginや、ボックス内に余白を設けるpaddingの値が設定されている事があり、それがページをレイアウトする上で障害になる事があります。

 

* {
 margin: 0;
 padding: 0;
}

そういった値をリセットする方法として、CSSの最初にこのように記述する方法があります。

*は全称セレクタ(ユニバーサルセレクタ)といい、全ての要素が適用範囲となります。一度全要素のmarginとpaddingのデフォルト値をリセットするのです(リセットCSSといいます)。

しかし、これは極端過ぎるという事で今はあまり推奨されないやり方と耳にしました。自分で必要な要素だけに設定を行うなり、有志によって作られたリセットCSSテンプレートをコピペするやり方がベターとの事です。

とりあえず今はこのやり方で通します。上の余分なスペースは消せました。

 

 

html {
 height: 100%;
}
body {
 height: 100%;
} 
#wrapper {
 min-height: 100%;
}

子ボックスの背景色を下まで伸ばす設定ですが、まずhtml要素と、body要素のheightを100%に設定します(両要素ともheightのデフォルト値はauto)。

そして子ボックス(今回であれば#wrapper)のmin-height(最小画面サイズ)を100%に設定します。

 

 

中央寄せ完成

全要素の余白設定を無効にしているのでメインボックス内がピッチピチですが、ひとまずはこれで目標のレイアウトになりました。

 

 

オマケ

 

html { overflow-y: scroll; }

PC表示の場合、画面右にスクロールバーがあるかないかでサイトの見え方が少し変わります(スクロールバーの表示分横幅がズレます)。表示を統一化する為、CSSでhtml要素にoverflow-y: scroll;を設定し、画面右にスクロールバーを固定表示します。

ただ、これをやってもMacの一部OSがスクロールバーを表示しない設定になってるとかなんとか。一応参考リンクだけ貼っておきます。

参考: スクロールの幅に依存しないスタイル指定

 

||

ウェブサイト全体の中央揃え、ボックス背景色を画面下まで伸ばす

0件のコメント

コメント

カテゴリ

月別アーカイブ