【CSS】汎用性の高い囲み線を作りながら、marginと paddingを覚えよう

スポンサーリンク
囲い:CSSとHTMLで囲み線を作るHP作成

marginとpaddingの違いがわかりません。

今回はCSSでよく使われる余白のmarginとpaddingについて、可愛い囲み線を作りながら解説したいと思います。スタイルシートについては初心者さん向けCSS(カスケーディング スタイルシート)の基本まとめに書いてありますので、合わせて読んでみてくださいね。

囲み線を覚えれば、読者に伝えたい内容を強調することができますし、文字ばかりの単調さを改善して見やすくなります。スタイルシートを暗記する必要はありません。お気に入りスタイルシートのメモをストックしていけば、自然と囲み線をマスターすることができますよ。

marginとpaddingについて

適度な余白は、文章の見やすさに影響し理解の手助けになります。あまりにもぎゅうぎゅうに文字がつまていると見にくいですよね。余白には2種類の余白があります。四角い枠の外側の余白と内側の余白です。四角い枠の外側の余白をmargin(マージン)、内側の余白をpadding(パディング)と呼んでいます。

  1. 枠線の外側と枠線の間の余白:margin
  2. 枠線と内容の間の余白:padding

これを図にしました。こんな感じです。四角い枠や四角形、四角い領域なんでも構いません。CSSはボックスという考え方でデザインします。

マージンは外側の余白、パディングは内側の余白

具体例を私のブログで見てみましょう。2つボックスがあります。緑のボックスは見出し、青のボックスはテキストエリアとリストエリアの2つをグループ化して背景を塗っています。

青のボックスのテキストエリアに書かれている「セ」の左側の余白が狭い感じがしますね。余白が狭いので窮屈な感じがしますよね?余白は読みやすさ、見やすさデザインにも関わります。余白は1文字(1em)や10pを目安にして、調整するといいと思います。

実際に囲み線を作ってみましょう!

ちょっと復習:CSSはどこに書く?

CSSの書き方は3通りあります。

  1. 別ファイルを作る
  2. <head></head>ヘッダーに書く
  3. HTMLタグ内に書く

この3通りあります。

アメーバブログやはてなブログPro、SeesaaaブログはHTMLタグ内に書く方法です。WordPressは別ファイルで管理することがメインです。その1つだけ指示するだけでよければHTMLタグ内に、そのファイルだけの指示でよければヘッダー内に、複数のファイルで指示をしたい場合は別ファイルを作ります。

今回は別ファイルでやってみましょう!

HTMLファイルとCSSファイルを作る

3種類の下のような囲み線を作ります。

3種類の囲み線の見本

テキストファイルで、HTMLとCSSのファイルを作ります。windowsならメモ帳アプリを開きます。まずはHTMLファイルです。ファイル名は「test.html」などなんでも構いません。デスクトップなどに保存してください。

<!--HTMLファイルです-->
<!DICTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>囲み枠をつくる</title>
  <link rel="stylesheet" href="test.css" type="text/css">
 </head>
 <body>
  <div class="box-dashed">
  色は#ffa500、破線<br>
  マージンは上下100px、左右20px<br>
  パッディングは上下左右10px<br>
  </div>

  <div id="box-double">
  色は#ff1493、二重線<br>
  マージンは上下40px、左右100px<br>
  パッディングは上下左右10px<br>
  </div>

  <div class="box-dotted">
  色は#b0c4de、ドット<br>
  左マージン50%<br>
  パッディングは上下左右50px<br>
  </div>
 </body>
</html>

次は、CSSです。「test.css」と名付けてデスクトップに保存します。

/* これはCSSファイルです */


#box-double {border-style: double ;
      border-color: #ff1493 ;
     margin: 40px 100px 40px 100px ;
     padding: 10px ;}

.box-dashed {border-style: dashed ;
      border-color: #ffa500 ;
     margin: 100px 20px 100px 20px ;
     padding: 10px ;}

.box-dotted {border-style: dotted ;
      border-color: #b0c4de ;
     margin-left: 50% ;
     padding-top: 50px ;
     padding-bottom: 50px ;
     padding-right: 50px;
     padding-left:50px ;}

div後のid と classの違い

HTMLファイルにdivの後にclassとidの属性がありますね?

id属性はある要素に対してHTML文書内での固有の名前をつけるもので、一つのHTML文書では1カ所しか使えません。class属性はそのユソの種類や分類を表すものなので、複数回指定することができます。

また、CSSファイルでは、id属性は「#(シャープ)」をつけます。class属性は「.(ドット)」をつけます。

  • id属性・・・「#」をつける。一回だけ指示できる
  • class属性・・・「.」をつける。複数回指定できる

でも、上のようにid属性とclass属性の指定回数の違いがありますが、id属性も私のパソコン環境では複数回指定できます。なので、回数の違いは今後なくなるかもしれませんね。

余白の指定方法はいろいろ

余白の上下左右の指定は、細かく分けて書く方法とまとめて書く方法があります。

box-dottedのように細かく「padding-top,paddin-bottom,padding-left,padding-right」とマージンを分けて指示することができます。ドットの囲み線は上下左右ともパッディングが50pxなので、「padding: 50px]とまとめて書くことも可能です。

余白のあとの値が1つだけ書かれている場合は上下左右の4つの値を指しています。また、値が2つの場合は、はじめに書かれた数字が上下の余白、次に書かれた数字が左右の余白を表しています。

  • 値が1つの場合・・・(上下左右)
  • 値が2つの場合・・・(上下、左右)
  • 値が3つの場合・・・(上、左右、下)
  • 値が4つの場合・・・(上、右、下、左)

他にはパーセンテージで書くことも可能です。好きな表示を選んで書くといいと思います。余白は10から20pxがちょうどいいのかなと思うので、皆さんも色々試してみてくださいね!

もっと、本格的に勉強したい方はTecAcademyのWebデザインコース現役エンジニアのオンライン家庭教師【CodeCamp】がおすすめですよ。

marginは外枠と外側の余白で、paddingは四角いボックスの中の余白なのね

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました