Google検索エンジン

トップページ » スタイルシート入門講座 » CSSでマージン(margin)を指定する方法


CSSでマージン(margin)を指定する方法

  • マージン(margin)とは

    マージン(margin)とパディング(padding)は、セットで覚えるのがよいでしょう。 マージンは領域間のスペースで、パディングは領域内のスペースです。

    下の例だと「対象のブロック」という文字列から赤い枠線までの幅がパディング(padding)です。 赤い線から「Webページの表示」枠までの幅がマージン(margin)です。

    CSSファイル記述例
    div#test-padding-margin{
    	padding:20px;
    	margin:10px;
    	border:solid 2px red;
    	background-color:yellow;
    }
    
    HTMLファイル記述例
    <div id="test-padding-margin">対象のブロック</div>
    Webページの表示
    対象のブロック

    マージン(margin)に関するCSSプロパティ

    CSSプロパティ 意味
    margin:下記参照 マージンに関する全てを指定
    margin-topn 上マージンを指定
    margin-rightn 右マージンを指定
    margin-bottomn 下マージンを指定
    margin-leftn 左マージンを指定

    マージンに関する全てを指定

    marginプロパティは、上下左右のマージンをまとめて指定する際に使用します。 上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。 なお、マージンに負の値を指定することはできません。

    値を1つ指定した場合: 指定した値が[上下左右]のマージンになります。
    値を2つ指定した場合: 記述した順に[上下][左右]のマージンになります。
    値を3つ指定した場合: 記述した順に[上][左右][下]のマージンになります。
    値を4つ指定した場合: 記述した順に[上][右][下][左]のマージンになります。

    marginプロパティの指定値
    数値で指定 数値にpxをつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
    CSSファイル記述例
    div#test-margin{
    	margin:20px 10px 40px 80px;
    	border:solid 2px red;
    	background-color:yellow;
    }
    
    HTMLファイル記述例
    <div id="test-margin">マージンに関する全てを指定</div>
    Webページの表示
    マージンに関する全てを指定

スタイルシート入門講座
書籍の紹介
  • HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる
    HTML/XHTML&スタイルシートレッスンブック
    発売:2007/06/20
    定価:2,604円
    著者:エビスコム
    出版:ソシム
    内容:初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。
  • Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    発売:2005/07
    定価:2,520円
    著者:益子 貴寛
    出版:秀和システム
    内容:「Web標準」とは、Web上で標準的に利用される技術の総称です。Webサイトをより多様な環境に対応させ、誰にでもアクセスできるようにするには、この概念が必要不可欠だといえるでしょう。
  • もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    発売:2009/12/04
    定価:1,680円
    著者:岩崎 夏海
    出版:ダイヤモンド社
    内容:ドラッカーとはピーター・ドラッカーのことで、経営学者・社会学者です。真面目な本ではなく、マネジメントはもちろん経済やビジネスの参考にはなりません。突拍子のないことが書かれているので、息抜きに読んでみると面白いです。
おすすめレンタルサーバー
  • 月額263円で、ディスク容量が30GB利用可能です。ポイント制があり、ポイントを最大まで利用すると、月額約197円の換算になります。
  • 50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • 月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。