【CSS】Webサイトにて余白を調整する(margin)

WebサイトをHTMLで作成する手順を別の記事にて紹介させて頂きました。

今回はそのWebサイトに対して見た目を整える方法を紹介させて頂きます。

CSSを使用して余白を調整します。

CSSとは？Cascading Style Sheetsの略で、ウェブページのスタイルを指定するための言語になります。

HTMLがWebサイトの骨組みであるのに対して、HTMLの見た目を調整する際に使用するのが、CSSという言語になります。

HTMLのみで見た目を調整することも出来ます。ただ、本来HTMLは文書構造を定義するための言語であるため、見た目を調整しようとして本来の文書構造が滅茶苦茶になってしまうこともあります。

なので、HTMLは文書の構造、CSSは文書の見た目を調整するものと分けて使います。分けておけば、後から見た目だけを変えたいといった変更も簡単に出来ます。この変更のしやすさを保守性といいます。

CSSファイルの読み込み方HTMLのheadタグに下記ソースを記入します。 <link rel="stylesheet" href="css/styles.css">
linkタグを使用して、cssフォルダ内のstyles.cssというcssファイルを読み込みます。フォルダ名、ファイル名は自由に変えられます。環境に応じて変えて使用して下さい。

余白を調整するmarginに関してCSSファイルを読み込む準備が出来たら、実際にCSSファイルに定義を記入します。

上下左右の余白を指定して調整する場合は、 margin-top: 0px;
margin-bottom: 0px; margin-left: 0px; margin-right: 0px;

という書き方をします。適度に余白を取って欲しい場合はautoを指定します。この場合は上下左右全ての余白を0にするという定義になります。

また、まとめて指定する場合は下のような書き方も出来ます。 margin: 0px 0px 0px 0px;この場合、上、右、下、左の順に余白を調整します。

四辺すべての余白を同じにする場合は、 margin: 0px;という書き方も出来ます。

marginは要素の数1～4個の範囲で指定することが出来て、指定する要素の数に応じて、余白の適用される順番が変わります。

・要素が1個の場合margin: 0px;この場合は、すべての辺に対して余白が適用されます。

・要素が2個の場合margin: 0px 0px;この場合は、上下、左右に対して余白が適用されます。

・要素が3個の場合margin: 0px 0px 0px;この場合は、上、左右、下に対して余白が適用されます。

慣れるまでは、要素を4個指定したり、各辺に対して直接指定するのがいいかも知れません。

また、サイズを指定するためにpx(ピクセル)という表記をしていますが、
このpxは省略することが出来ます。

慣れてきたら、数字だけ指定するのもありですね！

今回は以上になります。

今回も最後まで読んで頂きありがとうございました。

余白を調整する際に、ぜひ使用してみて下さい。

今後も便利なツールの紹介、一人でも多くの人に「プログラミングって面白そう！」って思ってもらえるような記事を書いていきますね。

それでは！

オススメサイト

➡ブログを書きながらいいね返しが出来る！アメーバドライブ