CSSでボックスモデルを操作する方法

getdocs

2年前

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

ボックスモデルは、ブラウザが要素のサイズと他の要素との相互作用を決定するために使用するルールセットです。 HTML要素のコンテンツといくつかのCSSプロパティはすべて、ブラウザがHTMLおよびCSSコードを最終的なレンダリングされたWebページに変換するために使用する計算に貢献します。ボックスモデルがどのように機能し、それを効果的に操作するかを知ることは、適切に配置されたデザインと、不要な水平スクロールとコンテンツ間の余分なスペースがあるWebページとの違いになります。ボックスモデルがどのように機能するかを理解すると、CSSをより効率的に記述し、ブラウザーでのレンダリングの問題の解決策を見つけるのに役立ちます。

注：ほとんどのHTML要素は、インラインまたはブロックの2つのカテゴリのボックスのいずれかに分類されます。 <span>要素は、テキストコンテンツとインラインのままであるため、一般的なインライン要素です。 <div>要素は、汎用ブロック要素です。このチュートリアルでは、ボックスモデルのルールセットが最も広く使用されているため、ボックスモデルがブロック要素にどのように影響するかに焦点を当てます。

displayプロパティを変更すると、特にテーブル、Flexbox、CSSグリッドを操作する場合に、このチュートリアルの目的とは異なる方法でボックスモデルの機能が変更される可能性があることに注意してください。

このチュートリアルでは、主要なプロパティであるmargin、padding、border、width、およびheightプロパティを使用します。ボックスモデルが使用します。また、box-sizingプロパティを使用して、ボックスモデルを変更する方法を理解します。最後に、ブラウザの開発者ツールを使用してボックスモデルを検査します。

前提条件

ローカルマシンにindex.htmlとして保存されたHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLでWebサイトを構築する方法シリーズを試してみてください。
ブラウザの開発者ツールに精通していること。このチュートリアルでは、Firefox開発者ツールを使用します。 Google Chromeを使用している場合、このSparkBoxの記事は、開発者ツールの便利な紹介です。

HTMLおよび開発者ツールのセットアップ

このセクションでは、チュートリアル全体で使用するHTMLベースを設定します。また、ブラウザの開発者ツールにアクセスし、それらを使用して、ボックスモデルを構成するプロパティを特定するのに役立てます。

まず、テキストエディタでindex.htmlを開き、次のHTMLをファイルに追加します。

index.html

<!doctype html>
<html>
	<head>
		<title>Box Model</title>
	    <link href="styles.css" rel="stylesheet" />
	</head>
	<body>
	</body>
</html>

HTMLには、<link />タグにstyles.cssファイルへの参照が含まれています。先に進み、そのファイルを作成します。次のセクションで編集を開始します。

次に、ボックスモデルにスタイルを適用し、作業を開始するためのコンテンツが必要になります。次のコードブロックで、強調表示されたコードを<body>タグ内に追加します。このような強調表示されたコードは、コードの変更と追加を識別するためにチュートリアル全体で使用されます。コンテンツについては、2つの<div>要素を作成し、ルイス・キャロルによる不思議の国のアリスからの次の2つの引用符で埋めます。

index.html

...
<body>
	<div>
		Alice had begun to think that very few things indeed were really impossible.
	</div>

	<div>
		"Begin at the beginning," the King said gravely, "and go on till you come to the end: then stop."
	</div>
</body>
...

次に、選択したブラウザでindex.htmlを開き、ブラウザの開発ツールを開きます。これは、多くの場合、ページを右クリックしてInspectまたはInspectElementを選択することで実行できます。開発ツールを開いたら、最初の<div>要素を調べます。 FirefoxとChromeの両方で、ボックスモデルの視覚的な図が表示されます。以下は、Firefox開発ツールにあるものです。

Firefoxからのボックスモデルの視覚化を詳しく見ると、ボックスモデルを構成するプロパティは、中央から外側に向かってwidth、height、padding、[として表示されます。 X175X]、およびmargin。これらの5つのプロパティは、ボックスモデルを構成し、要素の寸法特性を提供します。各プロパティを操作し、ブラウザで変更を更新するときは、要素のこのボックスモデルの視覚化を参照するために、開発者ツールを開いたままにしてください。

このセクションでは、チュートリアル用のHTMLを設定し、ブラウザの開発者ツールを開いて、ボックスモデルの視覚化ガイドにアクセスしました。次のセクションでは、borderプロパティのCSSの記述を開始します。これにより、<div>要素のボックスモデルの最初の視覚スタイルが提供されます。