最適なレイアウトのための CSS ボックスモデルとマージンのマスター

はじめに

高品質なペットケアサービスを提供するウェブサイト「Pet's House」の賑やかなデジタル環境の中で、才能あるウェブ開発者であるジョーダンは、ウェブサイトのレイアウトとデザインを改善する任務を担っています。シーンは、街のスカイラインが一望できる快適なオフィスに設定されており、ジョーダンは CSS ボックスモデルとマージンの原則を綿密に適用することでユーザー体験を最適化することを決意しています。この実験では、CSS ボックスモデルやマージンなどのプロパティを使ってレイアウトを微調整します。

ボックスモデルの理解

要素を設計通りの場所に表示させる方法について考えてみましょう。

このステップでは、CSS ボックスモデルについて掘り下げます。これは、ウェブページのレイアウトを制御する基本的な概念です。ページ上の各要素は、マージン、境界線、パディング、および実際のコンテンツで構成されるボックスと見なされます。このモデルにより、開発者は要素の間隔とサイズを正確に制御することができます。

CSS ボックスモデル図

F12 キーを押して開発者ツールを開き、以下の図のように <li> 要素を選択すると、Computed セクションに要素のボックスモデルを確認できます。

開発者ツールのボックスモデル表示

次に、ボックスモデルの 3 つの重要なプロパティを紹介します。

border
padding
margin

境界線

境界線の CSS ショートハンドプロパティは、要素の境界線を設定します。これは、border-width、border-style、およびborder-colorの値を設定します。使用形式は以下の通りです。

border: width style color;

たとえば、<p>要素に境界線を追加するには、次の CSS を使用できます。

CSS 境界線の例のコード

ペットページで、フォーム内のボタンに境界線がある場合、style.cssファイルに次のコンテンツを追加してスタイルを設定できます。

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
}

また、border-radiusプロパティを使用することで、ボタンに角丸の効果を与えることができます。追加方法は以下の通りです。

form.txt-box {
  width: 100%;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
  border-radius: 4px;
}

「会社概要」セクションで、円形の画像効果を表示するには、border-radiusプロパティを使用することができます。適用方法は以下の通りです。

.circle {
  width: 950px;
  height: 650px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
}

パディング

パディングの CSS ショートハンドプロパティは、要素の 4 辺すべてのパディング領域を一度に設定します。使用形式は以下の通りです。

padding: top right bottom left;

padding-top: top padding value;
padding-left: left padding value;
padding-right: right padding value;
padding-bottom: bottom padding value;

たとえば、<p>要素にパディングを追加するには、次の CSS を使用できます。

CSS パディングの例の図解

style.cssファイルに次の内容を追加します。

h1 {
  padding-bottom: 30px;
  padding-left: 0.5em;
  text-align: center;
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  padding-bottom: 15px;
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.container {
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
section {
  width: 100%;
  padding: 10% 0;
}
.cover-sect {
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  padding: 0 20px;
}
.service figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.contact-section p {
  padding-right: 2em;
  padding-left: 3em;
}

.form-box {
  padding-top: 1em;
}

form.form-content {
  padding: 0.8em 0;
}

form.txt-box {
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  border-radius: 4px;
  padding: 0.7em;
}

マージン

マージンの CSS ショートハンドプロパティは、要素の 4 辺すべてのマージン領域を設定します。使用形式は以下の通りです。

margin: top right bottom left;

margin-top: top margin value;
margin-left: left margin value;
margin-right: right margin value;
margin-bottom: bottom margin value;

たとえば、<p>要素にマージンを追加するには、次の CSS を使用できます。

CSS マージンの例の図解

style.cssファイルに次の内容を追加します。

* {
  margin: auto;
}
.logo-section {
  width: 10%;
  margin-left: initial;
}
.logo {
  margin-left: 0.8em;
  max-width: 60%;
}
section div {
  width: 50%;
  margin: 0 auto;
}
.cover-sect {
  margin-top: 0px;
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.services {
  width: 90%;
  margin: 20px auto;
}
form.txt-box {
  margin-top: 0.3em;
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
footer div {
  margin-right: 2em;
}

footer span {
  text-align: center;
  margin-left: 2em;
}

footer.company-info {
  margin-left: 20em;
}

footer.contact-us {
  margin-left: 25em;
}

ボックスシャドウ

ペットページで、フォーム内の送信ボタンにシャドウ効果を追加するには、box-shadowプロパティを使用できます。 box-shadowプロパティは、1 つ以上のボックスシャドウを追加して、ボックスに影があるかのような視覚的な効果を作成します。その構文形式は以下の通りです。

box-shadow: h-shadow v-shadow blur spread color inset;

各値の意味は以下の通りです。

値	説明
h-shadow	必須。シャドウの水平位置で、負の値も許されます。
v-shadow	必須。シャドウの垂直位置で、負の値も許されます。
blur	オプション。ぼかしの距離。
spread	オプション。シャドウのサイズ。
color	オプション。シャドウの色。
inset	オプション。シャドウを外側のシャドウから内側のシャドウに変更します。

style.cssファイルに次の内容を追加します。

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  box-shadow: 0px 0px 10px 1px #29393e;
  border-radius: 4px;
  padding: 0.7em;
}

注：CSS プロパティをたくさん扱ってきましたが、ページのレイアウトがまだ整理されていないように見えるのは理解できます。心配しないでください。後でいくつかのページレイアウト技術を紹介します。これらの技術は、Flexbox、Grid などの CSS レイアウトモデルを含め、ページをより効果的に整理して構造化するのに役立ちます。これらのモデルは、応答性が高く、柔軟で、整理されたレイアウトを設計するための強力なツールを提供します。

まとめ

この実験では、Jordan とともに CSS ボックスモデルとマージンの複雑さを学び、「ペットの家」ウェブサイトのレイアウトとデザインを向上させました。まず、ボックスモデルの構成要素であるマージン、境界線、パディング、コンテンツを理解し、これらの原則を適用してサイトの構造とユーザーインターフェイスを改善しました。マージンを操作することで、要素間の間隔を効果的に制御する方法を学びました。パディングの調整を行うことで、要素内のコンテンツが明瞭かつ魅力的に表示されるようにしました。この実験は、あなたの CSS スキルを磨くだけでなく、魅力的でユーザーフレンドリーなウェブエクスペリエンスを作成する際の綿密なレイアウトデザインの重要性を強調しました。