「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『CSS（シーエスエス）』を学習したい方向けに、
基本的なポイントをまとめてみました！
そもそも『CSS（シーエスエス）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『CSS（シーエスエス）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、『HTML（エイチティーエムエル）』は、
『CSS』学習とは切っても切れない基礎知識ですので、
以下の別記事他、『HTML』学習のご紹介ページもぜひ事前にご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
ブロックレベル要素とインラインレベル要素の違いを理解しよう！
今回は過去記事の補足的な内容となります。
『ボックスモデル』って何？という方は以下記事も併せてご確認下さい。
-
-
【『CSS』基本のツボ】Lesson4：ボックスモデルの基本を理解しよう！
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
ボックスモデルのボックスには、
大きく分けて、以下2つの種類があります。
①『ブロックレベルボックス』
②『インラインレベルボックス』
①内で表示されるHTMLタグを「ブロックレベル要素」、
②内で表示されるHTMLタグを「インラインレベル要素」、
と言ったりしますので、
併せて覚えておきましょう。
この2つの違いを知っておくと、
CSSで装飾・調整をする際に、
適用対象となる範囲の理解に役立ちます。
ブロックレベルボックス
ブロックレベルボックスは、
基本的に親要素のボックス幅いっぱいにボックスを作ります。
<div>、<p>、<section>、<article>タグ等は、
ブロックレベルボックスを作る代表例です。
全てのCSSプロパティを設定することができる他、
（ボックスの幅や高さを自由に設定出来る）
特別に手を加えない限り、
ブロックレベルボックスのすぐ横に、
別のボックスが配置されることはありません。
インラインレベルボックス
インラインレベルボックスは、
<strong>タグ等、テキストを装飾するタグが形成します。
コンテンツが収まる最小限のボックスが作られ、
ブロックレベルボックスとは違い、
すぐ横に別のインラインボックスやテキストが配置されます。
また、一部<img>タグ等の例外を除き、
ボックスの幅や高さを自由には設定出来ません。
違いを実際に確認してみよう！
以下のHTML・CSSファイルを用意し、
実際に違いを確認してみましょう！
ボックスモデル.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ボックスモデルの理解</title>
<link rel="stylesheet" href="ボックスモデル.css">
</head>
<body>
<section>
<h1>ブロックレベルボックス</h1>
<p>ブロックレベルボックスを確認しよう！</p>
</section>
<p><strong>インラインレベルボックス</strong>を確認しよう！</p>
</body>
</html>
ボックスモデル.css
@charset "utf-8";
section {
background-color: orange;
}
strong {
background-color: #A0D8EF;
}
ボックスモデル.htmlをブラウザ表示させるとこんな感じ。
ブロックレベルボックス（<section>タグの方）は、
CSSで設定したオレンジ色が目一杯広がっています。
一方、インラインレベルボックス（<strong>タグの方）は、
指定した最小限の範囲で表示されていますね。
うまく背景が適用されない、
隣に別のコンテンツが配置されない、
等の問題が出たら、
ボックスモデルを思い出すのも一つの手です。
displayプロパティでボックス種類は変えられる
学習してきたボックスの種類は、
CSSの『display』プロパティを使って変更することが出来ます。
display: 表示したいボックス方式;
『表示したいボックス方式』に、
以下、好みのプロパティ値を記述すれば、
ボックス種類を自由に設定できます。
block
ブロックレベルボックスとして表示
inline
インラインレベルボックスとして表示
inline-block
インラインレベルボックスとして表示するが、幅や高さ等を指定出来るボックスとして表示
none
表示しない
好みに併せて、
ボックスの種類は変えられることも覚えておきましょう！
デフォルトCSSを理解しておこう！
ボックスモデルだけではなく、
パディング・マージンや、フォントサイズ等、
ブラウザによってはあらかじめ設定されているスタイルがあります。
ブラウザ表示すると自動で設定されるそのようなCSSを、
「デフォルトCSS」と言ったりします。
本当に高度なデザインやレイアウトでWebページを作る際は、
デフォルトCSSを一旦リセットしたりするケースもあります。
プログラミング学習初心者があまり意識する必要はありませんが、
「デフォルトCSS」という存在は知っておきましょう。
まとめ
-
ブロックレベルボックスは、ボックス全体にCSSが適用される！
-
インラインレベルボックスは、ボックスの必要最小限範囲にCSSが適用される！
-
ボックスの種類は、CSSの『display』プロパティで自由に変更可能！
-
ブラウザによっては、「デフォルトCSS」であらかじめスタイル設定されているケース有り。
いかがでしたでしょうか？
今回は、『CSS』学習初心者の方向けに、
ボックスモデルの補足として、
ボックス種類について解説させて頂きました。
覚えることは沢山ありますが、
焦らず、一つ一つツボをおさえていきましょう！
今後も随時、学習のツボをUPしていけたらと思っていますので、
宜しければご参考下さい。
今回の記事が、
少しでも皆さんのお役に立てたら幸いです！