CSS

CSS marginとpadding 余白の指定方法 基礎

Sponsored Link

Sponsored Link

marginとpadding 余白の指定方法 基礎

要素はボックスになっています

要素とはタグで囲まれた一塊のことをいうんでした。
<タグ>タグの中のコンテンツ</タグ>で要素です。

そして

全ての要素は表示領域とその境界線、余白でできていて。
この3つを合わせた領域のことをボックスと呼びます。
ボックスはすべて以下のような構造になっています。

ボックスには
テキストや画像などの要素の内容を表示するための領域があり実際に表示されるのはこの部分です

表示領域の周りにはボーダーと呼ばれる境界線がありまして上の図でいうと赤い破線の部分、これが要素の本体です。

また境界線の内側と外側は余白をとることができ、ボーダー内側の余白をpadding、外側の余白をmarginと呼びます。

今回はその「余白」についての解説をしていきます。

CSSのmarginとpaddingについて

CSSは

セレクタ{プロパティ:値

}

で表せるんでした。

例えば

p{

cplor:red

}

のような感じです。

CSS セレクタとプロパティと値の基本まとめ

この内marginとpaddingはプロパティになります。

これらのプロパティを使うことによって余白を調整していきます。

例えばpタグにclass名をつけて目印として。
以下のように記述をします。

  <p class="above">  	
        セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。		
  </p>
  <p class="middle"> 	
       小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語  をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる(昔話「桃太郎」など)。
	</p>
  <p class="under">
	性別の判別は鼻の蠟(蝋)膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟(蝋)膜の色はピンクであることが多い。
   </p>

そしてそれぞれmarginとpaddingに違う値を入れてみました。

なおmarginとpaddingはそれだけだと上下左右に同じだけ余白を作ります。
一部だけ余白を作るやり方は後でやります。

それで以下のように3つのpタグ要素について記述をしてみました。

.above {
  background: skyblue;
}
.middle { background: orange; padding: 10px; margin: 10px; }
.under {
  background: silver;
   padding: 40px;
  margin: 20px;
}
img{
	border:solid 5px red;
	
}

一番上はmarginとpaddingを指定していません。

真ん中はpadding=10px、 margin:=10pxとし。
一番最後は padding:=40px margin= 40pxとしました。

そしてそれぞれ別の色を付けて見ました。

すると以下のように表示されます

 

指定しない場合表示領域のみとなります。
padding=10px、 margin:=10pxとした場合はまず色のついた部分にpadding1(内側の余白)0px分だけ余白ができたことがわかります。
そして色のついた部分との間隔がそれぞれmargin(外側の余白)10px分だけ広く取られていることがわかります。
最後は40px分内側の余白も外側の余白も広く取られていることがわかります。

widthとheightの値を指定した場合

marginやpaddingを指定したあとで

追加で要素をwidthとheightの値を指定した場合。
表示領域の部分だけが指定されます。

なのでその大きさによってボックス全体の大きさが変わってきます。

ちなみに先程の3例について一番下のボックス(銀色の背景のもの)だけ幅高さの指定を追加してみます。

.under {
  background: silver;
   padding: 40px;
  margin: 40px;
  width:200px; 
  height:300px;

すると以下のようになります。

ボックスの形は変わりますが、marginやpaddingはしっかりと効いているのがわかります。

画像の場合

先程のHTML文書に画像を加えてみます。

<img  src="インコ3().jpg" alt="ぴーちゃんは生後2ヶ月">

CSSを以下のようにして赤い枠を付けました。

img{
  border:solid 5px red;
  }

する7と以下のようになります。

画像には赤い枠がはめてありましてこれでmarginやpaddingの数値による変化を見ていきます。

上記CSSの画像の部分にmarginとpaddingの数値(30pxにしてみました)
を書き込みます。

img{
	border:solid 5px red;
	 padding: 30px;
         margin: 30px;
	}

すると画像が以下のように表示されます。

内側の余白の大きさがpadding外側の余白がmarginで表されるんでした。
またボーダーはは表示領域と内側の余白を囲みます。。
これが写真全体の大きさになります。
だから枠で囲まれたもののうち余白がpaddingで支持された余白です。
そして外側の余白がmarginで示されます。

今度は文字を右に回り込ませてみます。

その方法はfloatやdisplayなどを使うんでした。

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

今回はfloatを使ってみます

CSSに以下のように記述します。

img{
	border:solid 5px red;
	 padding: 30px;
  margin: 30px;
	float:left;

	}

すると以下のようになって。
margin(外側の余白)が反映されていることがはっきりわかると思います。

最後に上記の表示のために記述したものをおいておきます。
HTMLは以下

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>
</head>
 <body> 
  <h1>セキセイインコを飼いました。</h1>

   
    <img  src="インコ3().jpg" alt="ぴーちゃんは生後2ヶ月"> 
  
  <p class="above">  	
  	セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。		
  </p>
  <p class="middle"> 	
	小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語  をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる(昔話「桃太郎」など)。
	</p>
  <p class="under">
	性別の判別は鼻の蠟(蝋)膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟(蝋)膜の色はピンクであることが多い。
   </p>


   	  
</body>
</html>

CSSは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="external file.css">
  <title>鳥は可愛い</title>
</head>
 <body> 
  <h1>セキセイインコを飼いました。</h1>

   
    <img  src="インコ3().jpg" alt="ぴーちゃんは生後2ヶ月"> 
  
  <p class="above">  	
  	セキエイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。		
  </p>
  <p class="middle"> 	
	小型インコの中では最もしゃべるのを得意とする鳥で、中には100種類以上の単語  をしゃべる個体が記録されている。インコの中では珍しく長文もしゃべる(昔話「桃太郎」など)。
	</p>
  <p class="under">
	性別の判別は鼻の蠟(蝋)膜で判別する。上述の通り、ノーマル種であればオスが青くなり、メスは薄茶色になる。しかしハルクインやルチノーなどの人為的に生成された品種では、青い色素が欠乏しているため、オスの鼻の蠟(蝋)膜の色はピンクであることが多い。
   </p>


   	  
</body>
</html>

上下左右の一部だけ指定

以上で基本的なことは終わりなんですが。

上下左右のうちその一部だけ余白を作る、ということもできます。

その場合は以下のようなプロパティを使います。

上だけ指定  margin-top、padding-top
下だけ指定 margin-bottom、padding-bottom
左だけ指定  margin-left、padding-left
右だけ指定  margin-right、padding-right

記述は今までのことを基本として実際にウエブ制作の際、
柔軟に対応していけば良いと思います。
必ずこの様に記述しなくてはいけない、というものではありません。

一例だけ上げておくと。

先程の赤枠を付けた画像は全方位に余白を付けておきましたが。
今度は右側にだけ余白を付けてみます。

余白はmargin-right、padding-rightプロパティを使います。

img{
	border:solid 5px red;
	 padding-right: 30px;
     margin-right: 30px;
	float:left

	}

すると以下のようになりました。

ただ右に余白ができただけでなく
pタグのボックスに付いていた背景が消えているのがわかると思います。

 

まとめ

余白についての基本的なまとめでした。

余白を理解するには要素の内容であるボックスという概念を理解しておく必要があります。

要素は表示領域・内側の余白・外側の余白からできており。
marginとpaddingという2つのプロパティを使って様々に余白をデザインすることができます。

更に深いことについては別記事で行います。

 

Camera 360

Sponsored Link

Sponsored Link

関連記事

  1. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  2. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  3. HTMLの勉強で押さえておくべきこと②HTMLリンクタグ基本
  4. HTMLで動画や画像を埋め込みする方法を詳説
  5. HTML・CSSを実際に記事を作りながら覚えていこう
  6. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  7. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  8. CSSで要素を横並びにする方法(floatとdisplay)とd…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  2. 【Basics of site construction】カテゴリーを設定はSEO対策に最重要 読者にもわかりやすい整理整頓方法とは
  3. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  4. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  5. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  6. 【Basics of site construction】ワードプレスで日付を消す方法
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. WordPress新エディタ「Gutenberg」の使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
Windows10でブルーライトカットの設定 コントロールパネルの使い方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
AviUtil カメラ制御の基本の基本を詳しく解説
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlのすべてのエフェクトについての解説④ぼかし・境界ぼかし・モザイク
GIF形式で動画を保存したり動画・画像を編集するのに超便利!無料なのに高機能!EZGIF.COM
AviUtilの各ウインドウの解説 「メインウィンドウ」詳細

ソフト・アプリの使い方

PAGE TOP