いちから始めるホームページ作成

HTML・CSSのことがよくわかる初心者から始めるホームページ制作

margin

  • このエントリーをはてなブックマークに追加

marginとは?

marginは、タグの外側の余白を指定するCSSです。

marginの使い方

上下左右個別に指定することができ、値がいくつか同じ場合は、まとめることもできます。

また、top(上)、right(右)、bottom(下)、left(左)で一方向だけ指定することもできます。

タグの内側に余白を付けたい場合はpaddingを使います。

記述方法

marginは以下のように記述します([]内は値が指定する方向)

上下左右が同じ場合[上下左右]

margin:10px;

上下が同じ値(10px)、左右が同じ値(20px)の場合[上下][左右]

margin:10px 20px;

上と下が別の値(上10px、下30px)、左右が同じ値(20px)の場合[上][左右][下]

margin:10px 20px 30px;

個別に値(上10px、右20px、下30px、左40px)を指定する場合[上][右][下][左]

margin:10px 20px 30px 40px;

上だけにmarginを指定する場合

margin-top:10px;

おすすめのホームページ作成ソフト

コーディングをする際に、ホームページ作成ソフトを使うと非常に便利です。

現在有名なのは、『ホームページビルダー』と『Dreamweaver』の2つです。

ホームページビルダー
初心者~中級者の方向けで、HTMLタグやCSSが全くわからない方におすすめです。
Dreamweaver
中級者~上級者・プロ向けで、HTMLタグやCSSをある程度理解していたり、自分で調べられる方におすすめです。

『Dreamweaver』は高価ですが、スキルが上がっても使えるため、長い目で見れば、こちらをおすすめします。

また、学生や教職員の方向けに割引されたものがありますので、該当する方なら迷わず学生・教職員向けのものをおすすめします。


HTMLタグ
CSS
一口メモ
サンプルソース
用語集