WEBデザインに必要なcssを学んでいく上で欠かせないmarginとは、paddingと同じく間隔を調整するプロパティです。主にボックス要素の外幅の調整を行うことを得意とし、使い方とすれば横に二つバナーや画像を並べた際に、その隣合う間隔を調整する役割を担います。ビジネスサイトなどで商品画像をトップページに二つ並べたりする場合に、見た目の美しさを均一に保つための幅調整に使用されるなど、実践的に使う場合には、頻繁に使用されるプロパティですので、WEBデザイナーを志す方は是非覚えた方が良いでしょう。
環境設定・使い方
htmlにcssを書き込むスタイルシートを指定する
<link rel="stylesheet" href="https://www.〇〇.com/style1.css">上記コードを差し込む位置は、htmlを構成する<head></head>の中に配置します。順序とすれば<meta>要素の下に配置するのが一般的です。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.〇〇.com/style1.css">
<title>WEBデザイナーのために必要なCSS</title>
</head>
<body>
<div class="test">box1</div>
<div class="test">box2</div>
<div class="test">box3</div>
</body>
</html>この場合はドメインであるhttps://www.〇〇.com/の直下にstyle1.cssを配置することで、cssを使用できるようになります。
【html側】 CSSを適用させるclass名を記述する
<div class="test">box1</div>
<div class="test">box2</div>
<div class="test">box3</div>【css側 style.css】html側に記述したclass名に対してプロパティを設定する
.test{
margin:20px;
background:red;
color:white;
padding:20px;
width:100px;
}【WEBブラウザ側 結果】
各ボックスを構成する三つにdivの外側に、上下20pxの間隔をつけることができました。
まとめ
marginはWEBデザイナーを志す方にとっては、避けては通れないプロパティです。ボックスという概念を理解することで、効果的にWEBページの視認性を高め、ユーザーに好印象を与えるサイト作りができるようになります。様々なビジネスサイトや企業サイトを見ても、共通してページ内にバナーを貼ったり、横に画像を三つ並べたりする場面が出てきますが、そうした見た目の均一さを整えるためにも、使用頻度としてはかなり高めのプロパティと言えるでしょう。WEBデザインをする上では必ず必要になりますので、必ず理解し、習得することをお勧めします。
コメント