margin（マージン）やpadding（パディング）

今回はmargin（マージン）やpadding（パディング）について。

そしてその横についている数字の数と意味をご説明していきます。

用語集とは別にここで簡単に説明しておきますと、
・margin（マージン）とは外側の余白
・padding（パディング）とは内側の余白
の事を表し、margin（マージン）padding（パディング）共に上下左右の余白を15px,2.0em,2em,120%などのように指定します。

margin（マージン）padding（パディング）の引数は 1〜4個指定が可能です。


このmargin:5px;とは外側の余白を上右下左5px。という意味です。

margin: 1px;　　　　　　　/* 上下左右=1px */
margin: 1px 2px;　　　　　/* 上下=1px、左右=2px */
margin: 1px 2px 3px;　　　/* 上=1px、左右=2px、下=3px */
margin: 1px 2px 3px 4px;　/* 上=1px、右=2px、下=3px、左=4px */



覚え方は、
数字が１つの場合は「上右下左」と上から始まって時計回り。
数字が２つの場合は「上下」「右左」
数字が３つの場合は「上」「右左」「下」
数字が４つの場合は「上」「右」「下」「左」

これらは人それぞれの好みなどがあり書き方は様々です。

自分で一番わかりやすい書き方を決めておくと後々の作業がはかどる事になります。


またmargin:5px;を全く同じ意味ですが違う書き方の例を。

margin-top:5px;
margin-right:5px;
margin-bottom:5px;
marginleft:5px;


この書き方でもmargin:5px;と同じ意味になります。

これらはmargin（マージン）やpadding（パディング）だけに止まらず様々な場面で必要なCSS（スタイルシート）の要素なので覚えておく事をオススメします。

点線の枠を付ける方法

CSS(スタイルシート)やHTMLタグを活用して視覚的な効果に変化を与えると、サイト訪問者の反応は「ぐっ」と変わります。

今回は、CSS(スタイルシート)を使用して、ブログやホームページの記事に、テキストを点線の枠で囲む方法をご紹介します。

いきなりですが、ご自分のCSS(スタイルシート)に以下のソースを加えてみましょう。


.block{
margin:5px;
border:2px dotted #6ebef2;
background-color:#ecf5fa;
padding:15px 15px 15px 15px;
text-align:left;


さて、このCSS(スタルシート)の説明をします。

＜div class="block"＞表示したいテキスト(文字)＜/div＞


「アフィリエイト」をしていると、お金にならない作業を怠りがちですが、視覚的な要素にも遊び心を持つと、訪問者は良い印象を持ってくれるだけでなく、「印象に残るページ」を魅せることが出来ます。

「お小遣い稼ぎ、お小遣い稼ぎ！」しているページより、「へ?、キレー」と思って頂けることも、アフィリイエイトで収入をアップさせる秘訣かもしれません。(他との差別化と言う意味で)

海外では、ブログやサイトを持っていると、立派な「Webマスター」として、みられるそうです。

素晴らしいデザイン構成を作り上げても、ごちゃごちゃしたサイトを作っても、見ている人は見ています。

ちょっとだけ差をつける努力をするだけでも、サイト運営は随分変わってきますよ。

スタイルシートとは

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略でスタイルシートの事を指します。

このCSS(スタイルシート)によって、フォントや文字間、文字色などサイトの見栄えに関する設定を一括で管理することができるのが特徴です。

CSS(スタイルシート)をさらに外部ファイル化することでHTMLがかなりスリムになり検索エンジン上位表示させたいキーワードを検索エンジンに強調することができます。

という事は外部化CSS(スタイルシート)を使う事だけでもSEO対策になるという事です。

それではCSS(スタイルシート)の細かなメリットをさらに詳しくご説明していきます。


○　CSS(スタイルシート)のメリットとは

本来HTMLだけでサイトを作成しようと思うとHTML内がタグでいっぱいになってしまいます。

「ここの文字のサイズをこれにして文字色はこれにして行間はこれにして」と一つ一つタグで書いていたのでは手間もかかりますしSEO上宜しくありませ。

そこでCSS(スタイルシート)を使ってサイトの見栄えに関する設定を一括で管理する事によりブログがSEO上有利であると言われている所以の一つです。

これはHTMLのタグを見ていただけるとわかるのですが、このようにCSS(スタイルシート)を使うことでサイトの見栄えの細かな設定ができ管理の効率化が図れます。

またできる限りの設定をCSS(スタイルシート)で指定し、さらにそれを外部化する事によりHTML内からいらないタグを極力省く事ができます。

CSS(スタイルシート)を外部化する事でHTML内のタグがスリムになり、強調したいキーワードをより強調する事ができ、なおかつページ自体からも出来る限りいらないタグをなくしている事によって軽いページが出来上がります。

この「軽いページ」というのがSEO上大切なポイントであり、訪問者の方にとっても見ていて苦にならないサイト運営ができる訳です。


○　CSS(スタイルシート)記述例

例えば「スタイルシート」という文字を例にあげてみます。

これをHTMLのみで実現するには、
＜p＞＜font size="14px" color="#0000ff"＞＜b＞スタイルシート＜/font＞＜/b＞＜/p＞

これをスタイルシートで書いた場合

/***スタイルシートの指定部分ここから***/
.style {
font-size: 14px;
font-wight: bold;
color: #0000ff;
}
/***スタイルシートの指定部分ここまで***/

と指定しておきあとはHTMLで、

＜p class="style"＞スタイルシート＜/p＞

と書くだけです。


今回はあくまでも例であり通常ここまで細かな指定はしないかもしれません。

もちろん文字関係の事だけではなくレイアウトの見た目など長くなりがちなタグ、何度も使う要素をスタイルシートから呼び出すことによって結果管理が楽になりHTML内がスリムになるという事です。