CSSでかっこいいランディングページをスタリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

ランディングページのスタリングを学びましょう。

demoは、「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css
└── ps.jpg
└── xbox.jpg

$ tree

├── index.html

├── script.js

└── style.css

└── ps.jpg

└── xbox.jpg

ps.jpgは、「こちら」、xbox.jpgは、「こちら」です。

HTML&JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Split Landing Page
    </title>
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <h1>Playstation 5</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
      <div class="split right">
        <h1>XBox Series X</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Split Landing Page

</title>

</head>

<body>

<h1>Playstation 5</h1>

</div>

<h1>XBox Series X</h1>

</div>

</body>

</html>

// 要素を取得する
const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

// mouseenterイベントを登録する
left.addEventListener(
  'mouseenter', () => container.classList.add('hover-left'))
right.addEventListener(
  'mouseenter', () => container.classList.add('hover-right'))

// mouseleaveイベントを登録する
left.addEventListener(
  'mouseleave', () => container.classList.remove('hover-left'))
right.addEventListener(
  'mouseleave', () => container.classList.remove('hover-right'))

// 要素を取得する

const left = document.querySelector('.left')

const right = document.querySelector('.right')

const container = document.querySelector('.container')

// mouseenterイベントを登録する

left.addEventListener(

'mouseenter', () => container.classList.add('hover-left'))

right.addEventListener(

'mouseenter', () => container.classList.add('hover-right'))

// mouseleaveイベントを登録する

left.addEventListener(

'mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener(

'mouseleave', () => container.classList.remove('hover-right'))

このHTMLをブラウザ上で表示すると以下のようになります。

スタイリング

CSSでスタイリングしていきましょう。項目に出てくるbodyやh1はHTMLの要素です。

全体の設定

まずは、ページ全体で使用する設定を定義します。

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* 変数の定義 */
:root {
  --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

* {
  /* ボックス要素のサイズを算出
  paddingとborderを
  widthと高さheightに含める */
  box-sizing: border-box;
}

/* フォント */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* 変数の定義 */

:root {

--left-bg-color: rgba(87, 84, 236, 0.7);

--right-bg-color: rgba(43, 43, 43, 0.8);

--left-btn-hover-color: rgba(87, 84, 236, 1);

--right-btn-hover-color: rgba(28, 122, 28, 1);

--hover-width: 75%;

--other-width: 25%;

--speed: 1000ms;

}

* {

/* ボックス要素のサイズを算出

paddingとborderを

widthと高さheightに含める */

box-sizing: border-box;

}

body

bodyのスタイリングをします。

body {
  font-family: "Roboto", sans-serif;
  /* ビューに対して100%の高さにする */
  height: 100vh;
  /* はみ出た部分はカット */
  overflow: hidden;
  margin: 0;
}

body {

font-family: "Roboto", sans-serif;

/* ビューに対して100%の高さにする */

height: 100vh;

/* はみ出た部分はカット */

overflow: hidden;

margin: 0;

}

container

containerのスタリングをします。

.container {
  /* absoluteの開始地点 */
  position: relative;
  width: 100%;
  height: 100%;
  /* 背景色 */
  background: #333;
}

.container {

/* absoluteの開始地点 */

position: relative;

width: 100%;

height: 100%;

/* 背景色 */

background: #333;

}

ページ上部の白い線は、h1のmargin領域のようです。

h1

h1のスタイリングをします。

h1 {
  /*
  rem -> root emの略
  ルート(html)のフォントサイズを1として考える単位
  html要素が16pxの場合4remは、64px
  */
  font-size: 4rem;
  color: #fff;
  /* 要素の絶対位置を指定 */
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translatex(-50%);
  white-space: nowrap;
}

h1 {

rem -> root emの略

ルート(html)のフォントサイズを1として考える単位

html要素が16pxの場合4remは、64px

font-size: 4rem;

color: #fff;

/* 要素の絶対位置を指定 */

position: absolute;

left: 50%;

top: 20%;

transform: translatex(-50%);

white-space: nowrap;

}

split

splitのスタイリングです。

.split {
  /* 要素の絶対位置を指定 */
  position: absolute;
  width: 50%;
  height: 100%;
  /* はみ出た画像は非表示 */
  overflow: hidden;
}

.split {

/* 要素の絶対位置を指定 */

position: absolute;

width: 50%;

height: 100%;

/* はみ出た画像は非表示 */

overflow: hidden;

}

split.left

split.leftのスタイリングです。

.split.left {
  left: 0;
  background: url("ps.jpg");
  /* 画像の繰り返しなし */
  background-repeat: no-repeat;
  /* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */
  background-size: cover;
}

/* オーバーレイをかける */
.split.left::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--left-bg-color);
}

.split.left {

left: 0;

background: url("ps.jpg");

/* 画像の繰り返しなし */

background-repeat: no-repeat;

/* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */

background-size: cover;

}

/* オーバーレイをかける */

.split.left::before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

background-color: var(--left-bg-color);

}

split.right

split.rightのスタイリングです。

.split.right {
  right: 0;
  background: url("xbox.jpg");
  /* 画像の繰り返しなし */
  background-repeat: no-repeat;
  /* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */
  background-size: cover;
}

/* オーバーレイをかける */
.split.right::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--right-bg-color);
}

.split.right {

right: 0;

background: url("xbox.jpg");

/* 画像の繰り返しなし */

background-repeat: no-repeat;

/* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */

background-size: cover;

}

/* オーバーレイをかける */

.split.right::before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

background-color: var(--right-bg-color);

}

btn

btnのスタイリングをします。

.btn {
  /* 要素の絶対位置を指定 */
  position: absolute;

  /* アイテムを要素の中央に配置 */
  left: 50%;
  top: 40%;
  transform: translateX(-50%);

  /* flex要素へ */
  display: flex;
  /* flexアイテムを中央付近にまとめる */
  align-items: center;
  /* アイテムを中央に寄せる */
  justify-content: center;

  /* aタグの下線を消す */
  text-decoration: none;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  /* 文字を太文字 */
  font-weight: bold;
  /* 全て大文字 */
  text-transform: uppercase;
  width: 15rem;
  padding: 1.5rem;
}

/* 左ボタンをフォバーした時 */
.split.left .btn:hover {
  background-color: var(--left-btn-hover-color);
  border-color: var(--left-btn-hover-color);
}

/* 右ボタンをフォバーした時 */
.split.right .btn:hover {
  background-color: var(--right-btn-hover-color);
  border-color: var(--right-btn-hover-color);
}

.btn {

/* 要素の絶対位置を指定 */

position: absolute;

/* アイテムを要素の中央に配置 */

left: 50%;

top: 40%;

transform: translateX(-50%);

/* flex要素へ */

display: flex;

/* flexアイテムを中央付近にまとめる */

align-items: center;

/* アイテムを中央に寄せる */

justify-content: center;

/* aタグの下線を消す */

text-decoration: none;

color: #fff;

border: #fff solid 0.2rem;

font-size: 1rem;

/* 文字を太文字 */

font-weight: bold;

/* 全て大文字 */

text-transform: uppercase;

width: 15rem;

padding: 1.5rem;

}

/* 左ボタンをフォバーした時 */

.split.left .btn:hover {

background-color: var(--left-btn-hover-color);

border-color: var(--left-btn-hover-color);

}

/* 右ボタンをフォバーした時 */

.split.right .btn:hover {

background-color: var(--right-btn-hover-color);

border-color: var(--right-btn-hover-color);

}

アニメーション

アニメーションのスタイリングをします。

/* アニメーション */
.split.right,
.split.left,
.split.right::before,
.split.left::before {
  transition: all var(--speed) ease-in-out;
}

/* ps5 */
.hover-left .left {
  width: var(--hover-width);
}
.hover-left .right {
  width: var(--other-width);
}

/* xbox */
.hover-right .right {
  width: var(--hover-width);
}
.hover-right .left {
  width: var(--other-width);
}

/* レスポンシブ対応
画面サイズ800px以上の場合以下を読み取る */
@media (max-width: 800px) {
  h1 {
    font-size: 2rem;
    top: 30%;
  }

  .btn {
    padding: 1.2rem;
    width: 12rem;
  }
}

/* アニメーション */

.split.right,

.split.left,

.split.right::before,

.split.left::before {

transition: all var(--speed) ease-in-out;

}

/* ps5 */

.hover-left .left {

width: var(--hover-width);

}

.hover-left .right {

width: var(--other-width);

}

/* xbox */

.hover-right .right {

width: var(--hover-width);

}

.hover-right .left {

width: var(--other-width);

}

/* レスポンシブ対応

画面サイズ800px以上の場合以下を読み取る */

@media (max-width: 800px) {

h1 {

font-size: 2rem;

top: 30%;

}

.btn {

padding: 1.2rem;

width: 12rem;

}

「hover-left」や「hover-right」は、JavaScriptで制御しています。

これで、完成です。

おわりに

スタイリングは、ブロックを意識すると実装しやすいかもしれません。

bodyという大きなブロックの中に、containerブロックを設置し、さらに、ps5・xboxそれぞれのブロックを左右に分割し、positionで位置決めしていく、みたいな感じですね。

何度か実装していくと慣れると思います^^

それでは、また！

CSSまとめ

CSS学習記事まとめ

CSSソースコード

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* 変数の定義 */
:root {
  --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

* {
  /* ボックス要素のサイズを算出
  paddingとborderを
  widthと高さheightに含める */
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  /* ビューに対して100%の高さにする */
  height: 100vh;
  /* はみ出た部分はカット */
  overflow: hidden;
  margin: 0;
}

.container {
  /* absoluteの開始地点 */
  position: relative;
  width: 100%;
  height: 100%;
  /* 背景色 */
  background: #333;
}

h1 {
  /*
  rem -> root emの略
  ルート(html)のフォントサイズを1として考える単位
  html要素が16pxの場合4remは、64px
  */
  font-size: 4rem;
  color: #fff;
  /* 要素の絶対位置を指定 */
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translatex(-50%);
  white-space: nowrap;
}

.split {
  /* 要素の絶対位置を指定 */
  position: absolute;
  width: 50%;
  height: 100%;
  /* はみ出た画像は非表示 */
  overflow: hidden;
}

.split.left {
  left: 0;
  background: url("ps.jpg");
  /* 画像の繰り返しなし */
  background-repeat: no-repeat;
  /* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */
  background-size: cover;
}

/* オーバーレイをかける */
.split.left::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--left-bg-color);
}

.split.right {
  right: 0;
  background: url("xbox.jpg");
  /* 画像の繰り返しなし */
  background-repeat: no-repeat;
  /* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */
  background-size: cover;
}

/* オーバーレイをかける */
.split.right::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--right-bg-color);
}

.btn {
  /* 要素の絶対位置を指定 */
  position: absolute;

  /* アイテムを要素の中央に配置 */
  left: 50%;
  top: 40%;
  transform: translateX(-50%);

  /* flex要素へ */
  display: flex;
  /* flexアイテムを中央付近にまとめる */
  align-items: center;
  /* アイテムを中央に寄せる */
  justify-content: center;

  /* aタグの下線を消す */
  text-decoration: none;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  /* 文字を太文字 */
  font-weight: bold;
  /* 全て大文字 */
  text-transform: uppercase;
  width: 15rem;
  padding: 1.5rem;
}

/* 左ボタンをフォバーした時 */
.split.left .btn:hover {
  background-color: var(--left-btn-hover-color);
  border-color: var(--left-btn-hover-color);
}

/* 右ボタンをフォバーした時 */
.split.right .btn:hover {
  background-color: var(--right-btn-hover-color);
  border-color: var(--right-btn-hover-color);
}

/* アニメーション */
.split.right,
.split.left,
.split.right::before,
.split.left::before {
  transition: all var(--speed) ease-in-out;
}

/* ps5 */
.hover-left .left {
  width: var(--hover-width);
}
.hover-left .right {
  width: var(--other-width);
}

/* xbox */
.hover-right .right {
  width: var(--hover-width);
}
.hover-right .left {
  width: var(--other-width);
}

/* レスポンシブ対応
画面サイズ800px以上の場合以下を読み取る */
@media (max-width: 800px) {
  h1 {
    font-size: 2rem;
    top: 30%;
  }

  .btn {
    padding: 1.2rem;
    width: 12rem;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

/* フォント */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* 変数の定義 */

:root {

--left-bg-color: rgba(87, 84, 236, 0.7);

--right-bg-color: rgba(43, 43, 43, 0.8);

--left-btn-hover-color: rgba(87, 84, 236, 1);

--right-btn-hover-color: rgba(28, 122, 28, 1);

--hover-width: 75%;

--other-width: 25%;

--speed: 1000ms;

}

* {

/* ボックス要素のサイズを算出

paddingとborderを

widthと高さheightに含める */

box-sizing: border-box;

}

body {

font-family: "Roboto", sans-serif;

/* ビューに対して100%の高さにする */

height: 100vh;

/* はみ出た部分はカット */

overflow: hidden;

margin: 0;

}

.container {

/* absoluteの開始地点 */

position: relative;

width: 100%;

height: 100%;

/* 背景色 */

background: #333;

}

h1 {

rem -> root emの略

ルート(html)のフォントサイズを1として考える単位

html要素が16pxの場合4remは、64px

font-size: 4rem;

color: #fff;

/* 要素の絶対位置を指定 */

position: absolute;

left: 50%;

top: 20%;

transform: translatex(-50%);

white-space: nowrap;

}

.split {

/* 要素の絶対位置を指定 */

position: absolute;

width: 50%;

height: 100%;

/* はみ出た画像は非表示 */

overflow: hidden;

}

.split.left {

left: 0;

background: url("ps.jpg");

/* 画像の繰り返しなし */

background-repeat: no-repeat;

/* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */

background-size: cover;

}

/* オーバーレイをかける */

.split.left::before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

background-color: var(--left-bg-color);

}

.split.right {

right: 0;

background: url("xbox.jpg");

/* 画像の繰り返しなし */

background-repeat: no-repeat;

/* 元画像の縦横比は保持し要素をちょうどよく覆うサイズにする */

background-size: cover;

}

/* オーバーレイをかける */

.split.right::before {

content: " ";

position: absolute;

width: 100%;

height: 100%;

background-color: var(--right-bg-color);

}

.btn {

/* 要素の絶対位置を指定 */

position: absolute;

/* アイテムを要素の中央に配置 */

left: 50%;

top: 40%;

transform: translateX(-50%);

/* flex要素へ */

display: flex;

/* flexアイテムを中央付近にまとめる */

align-items: center;

/* アイテムを中央に寄せる */

justify-content: center;

/* aタグの下線を消す */

text-decoration: none;

color: #fff;

border: #fff solid 0.2rem;

font-size: 1rem;

/* 文字を太文字 */

font-weight: bold;

/* 全て大文字 */

text-transform: uppercase;

width: 15rem;

padding: 1.5rem;

}

/* 左ボタンをフォバーした時 */

.split.left .btn:hover {

background-color: var(--left-btn-hover-color);

border-color: var(--left-btn-hover-color);

}

/* 右ボタンをフォバーした時 */

.split.right .btn:hover {

background-color: var(--right-btn-hover-color);

border-color: var(--right-btn-hover-color);

}

/* アニメーション */

.split.right,

.split.left,

.split.right::before,

.split.left::before {

transition: all var(--speed) ease-in-out;

}

/* ps5 */

.hover-left .left {

width: var(--hover-width);

}

.hover-left .right {

width: var(--other-width);

}

/* xbox */

.hover-right .right {

width: var(--hover-width);

}

.hover-right .left {

width: var(--other-width);

}

/* レスポンシブ対応

画面サイズ800px以上の場合以下を読み取る */

@media (max-width: 800px) {

h1 {

font-size: 2rem;

top: 30%;

}

.btn {

padding: 1.2rem;

width: 12rem;

}

CSSでかっこいいランディングページをスタリングしよう!

実装するもの

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

body

container

h1

split

split.left

split.right

btn

アニメーション

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年3月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

実装するもの

ワークスペース

HTML&JavaScript

スタイリング

全体の設定

body

container

h1

split

split.left

split.right

btn

アニメーション

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[React]~Ambassador画面:ソースコードをまとめます!~

Go言語とPostgreSQLで遊ぼう!~ Transaction編~

Terraform~記事まとめ~

JavaScriptでフィルタリングアプリを作成しよう!

[golang]fiber API11~Ambassador: Rankin…

[golang]fiber API3~Admin:ユーザー認証・ログアウト~

[Go言語]Chain of Responsibilityパターンを学ぼう!…

JMeterの'Cannot allocate memory' (errno…

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル