HTML＆CSS基礎_背景設定と余白調整について具体例で詳しく解説

今日はHTML＆CSSのコードの記述方法について解説していきます。

ウェブページを見るとき、その美しいデザインや機能性に感動したことはありませんか？それらはすべてHTMLとCSSの力によるものです。今日は、そのHTML＆CSSのコードの記述方法について解説していきます。

HTMLとCSSは、ウェブページ作成の基本的な要素であり、これらを理解することで、自分だけのウェブページを作成することが可能になります。しかし、これらの言語を学ぶ際には、多くの情報を一度に覚える必要があり、それが難しく感じることもあるでしょう。

そこで今回は、このパートを問題形式にするのは難しいため、逆引き辞書として活用できればと思います。実際のページを見ながら理解していくのがよい部分になるので、わからなくなったら戻ってくる場所としてご活用いただけたらと思います。

この記事では、HTMLとCSSの基本的なコード記述方法を一つ一つ丁寧に説明していきます。初心者の方でも安心して読み進められるように、専門用語もできるだけ避け、わかりやすい言葉で解説します。また、具体的なコード例も多数掲載していますので、実際に手を動かしながら学ぶことも可能です。

それでは今日も一緒に頑張って学習していきましょう。

背景の設定　※background-image他

ページの背景はbackground-***（image,color等)によって定義されます。

代表的なものには以下があります。ご参考まで。

プロパティ	用途	コード例
background-color	背景色を設定します。	body { background-color: #f0f0f0; }
background-image	背景画像を設定します。	body { background-image: url(background.jpg); }
background-repeat	背景画像の繰り返しを設定します。	body { background-repeat: repeat-x; }
background-position	背景画像の位置を設定します。	body { background-position: center; }
background-size	背景画像のサイズを設定します。	body { background-size: cover; }
background	上記すべての背景プロパティを一度に設定します（ショートハンドプロパティ）。	body { background: #f0f0f0 url(‘background.jpg’) no-repeat center / cover; }

repeatを設定しない場合は特定の画像でページを埋め尽くすことができます。

repeat-xを設定すると横方向の端まで繰り返しになります。

position,sizeは画像の置き場所とサイズを定義します。

余白を調整するコードは大きくmarginとpaddingの２種類あります。

使い分けは以下の通りです。

marginは、要素の外側のスペースを制御します。つまり、他の要素との間隔を調整するために使用されます。例えば、段落と段落の間にスペースを作りたい場合や、要素を中央に配置したい場合などに使用します。
paddingは、要素の内側のスペースを制御します。つまり、要素の境界（ボーダー）とその中身（テキストや画像など）との間隔を調整するために使用されます。例えば、テキストボックス内のテキストがボーダーにぴったりくっついてしまうのを防ぐために使用します。

プロパティ	用途	コード例
margin-top	要素の上側の余白を設定します。	div {background-color :blue ; margin-top: 20px;}
margin-right	要素の右側の余白を設定します。	div{background-color :blue ; margin-right: 20px;}
margin-bottom	要素の下側の余白を設定します。	div {background-color :blue ; margin-bottom: 20px;}
margin-left	要素の左側の余白を設定します。	div {background-color :blue ; margin-left: 20px;}
margin	上記すべての余白プロパティを一度に設定します（ショートハンドプロパティ）。	div {background-color :blue ; margin: 10px 15px 20px 25px;}

プロパティ	用途	コード例
padding-top	要素の上側のパディングを設定します。	div {background-color :blue ; padding-top: 20px;}
padding-right	要素の右側のパディングを設定します。	div {background-color :blue ; padding-right: 20px;}
padding-bottom	要素の下側のパディングを設定します。	div {background-color :blue ; padding-bottom: 20px;}
padding-left	要素の左側のパディングを設定します。	div {background-color :blue ; padding-left: 20px;}
padding	上記すべてのパディングプロパティを一度に設定します（ショートハンドプロパティ）。	div {background-color :blue ; padding: 10px 15px 20px 25px;}