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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") subgraph Lab Skills css/properties -.-> lab-289075{{"CSS ボックスモデルとマージン"}} css/values -.-> lab-289075{{"CSS ボックスモデルとマージン"}} css/colors -.-> lab-289075{{"CSS ボックスモデルとマージン"}} css/box_model -.-> lab-289075{{"CSS ボックスモデルとマージン"}} css/margin_and_padding -.-> lab-289075{{"CSS ボックスモデルとマージン"}} css/borders -.-> lab-289075{{"CSS ボックスモデルとマージン"}} end

ボックスモデルの理解

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

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

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

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

border
padding
margin

✨ 解答を確認して練習

境界線

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

border: width style color;

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

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を使用できます。

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スキルを磨くだけでなく、魅力的でユーザーフレンドリーなウェブエクスペリエンスを作成する際の綿密なレイアウトデザインの重要性を強調しました。