CSSでフルスクリーンレイアウトを作成する

（5年前） CSS

シェアする

フリーランスのIT・Web業界案件なら⇨ITエンジニア専門のエージェント【フォスターフリーランス】

 

画像をウィンドウいっぱいにフルスクリーン表示させるフルスクリーンレイアウトを紹介します。

 

背景画像をフルスクリーンにする

CSSコード

body {
  background-image: url(https://dl.dropbox.com/s/4clq0a5g0tqys0t/04.jpg?dl=0);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #888;
  color: #fff;
}

 

背景画像を設定するときには「background-image」を使用します。url(…)の…には画像のパスを記述します。

「background-size: cover;」を設定することで、縦横比を維持しながら、要素を覆う最小サイズになるように背景画像を拡大縮小します。

「background-position: center center;」では、画像が縦方向、横方向、それぞれ中央に配置するようにしています。

「background-repeat」では画像の繰り返しが設定できます。今回は繰り返したくないので「no-repeat」と指定します。

「background-attachment: fixed;」では、スクロールしても背景画像が動かないように位置を固定しています。

 

タイトルとボタン

HTMLコード

<main>
　<div id="content">
    <div id="title-logo">
      <h1>Site title</h1>
    </div>
    <div id="top-btn"><a href="#">Enter</a></div>
  </div>
</main>

解説

mainタグの中にcontentというidを持ったdivを配置し、その中にサイトタイトルとボタンを配置しています。

ボタンは<button>～</button>を使わず、divとaタグで今回は作成していきます。

 

CSSコード

#title-logo h1 {
  font-size: 60px;
  text-align: center;
}

#top-btn a {
  display: block;
　margin: 0 auto;
  width: 160px;
  height: 40px;
  border: 1px solid #fff;
  font-size: 18px;
  text-align: center;
  letter-spacing: 1em;
  text-indent: 15px;
  line-height: 39px;
}

#top-btn a:hover {
  background-color: #fff;
  color: #000;
}

 

解説

サイトタイトルは文字を中央寄せにします。

id=”top-btn”の中のaタグを「display: block;」で、まずブロック要素にします。

また、「margin: 0 auto;」でボタンを中央に配置します。

そして、ボタンのサイズやボーダー、文字サイズ等の指定を行います。（width～text-align）

「letter-spacing」とは文字の間隔を指定するプロパティです。今回は1emと設定しているので、親要素の文字サイズ（18px）分間隔があくことになります。

「text-indent」では文字の始まりの位置を調整しています。

「line-height」によってボックスの縦方向を中央に揃えています。

 

そして、:hoverでマウスカーソルをのせた時の設定をします。

今回は重ねた時文字色とボタンの背景色を入れ替えるように設定してます。

 

タイトルとボタンを中央に揃える

CSSコード

html, body {
height: 100%;
}

main {
position: fixed;
width: 100%;
height: 100%;
display: table;
}

#content {
display: table-cell;
vertical-align: middle;
}

 

解説

まず、htmlとbodyの高さを100%に。

そしてmainも幅と高さを100%にして画面いっぱいに設定し、「display: table」でテーブル化します。

また、固定するために「position: fixed;」とします。

中央に揃える#contentでは、「display: table-cell」としてテーブルのセル（td要素）にすると、vertical-alignが指定できるようになるので、middleとして縦方向に中央に揃えています。

中央にそろっていない場合はpadding-topで微調整してみてください。

サンプル

See the Pen RBOyPP by Nssh (@shtg11) on CodePen.0

 

以上でフルスクリーンレイアウトの完成です。
フルスクリーンレイアウトを実装する際には、参考にしてください。