WEBデザインする上で欠かせないcssの一つにpadding（パディング）というプロパティがあります。これは主に内側の幅の間隔を調整するもので、CSSでWEB上でデザインをしていくには欠かせないプロパティです。例えば、長方形の中心にテキストを配置し、その長方形とテキストとの間の間隔を調整したい場合などに使います。paddingを使用することで、見た目が美しく、バランスの取れたWEBデザインを構築することができますので、まずはこの基本を押さえておく必要があります。
環境設定・使い方
【環境設定】CSSファイルを読み込む
まず、htmlにcssを書き込むスタイルシートを指定します。
<link rel="stylesheet" href="https://www.〇〇.com/style.css">具体的にhtmlにcssのルートを差し込む位置は以下の例のようになります。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.〇〇.com/style.css">
<title>初めてのCSS</title>
</head>
<body>
<p class="paddings">幅調整に活躍するpadding</p>
</body>
</html><head></head>に囲まれた部分に、 <link rel=”stylesheet” href=”https://www.〇〇.com/style.css”>を記述し、ドメイン直下にstyle.cssのファイルを置き追記していくことで、htmlにスタイル（デザイン）をつけていくことができるようになります。
【html側】 CSSを適用させるclass名を記述する
<p class="paddings">幅調整に活躍するpadding</p>【css側 style.css】html側に記述したclass名に対してプロパティを設定する
.paddings{
padding:20px;
color:white;
border:1px solid black;
background:blue;
font-weight:bold;
}【WEBブラウザ側 結果】
幅調整に活躍するpadding
テキストと外枠のボーダーとの間に20pxの間隔を付ける事が出来ました。
まとめ
paddingはWEBデザインを構成する上で必要不可欠なプロパティです。WEBサイトを構成する上で欠かせないボックス要素（横に三つ画像を並べるなど）の位置や幅を調整したり、等間隔に配置したりする場合には欠かせません。今回のpaddingは他のプロパティであるmarginと同じく間隔を調整するプロパティの一つであり、CSSを学ぶ上で避けては通ることはできません。最初のうちはpaddingとmarginの違いが理解しにくいかもしれませんが、実践で使い慣れていくうちに自然と身に付くかと思います。どなたかの快適なWEBライフに貢献できますと幸いです。
コメント