CSS WEB制作

【CSS】marginの書き方とよく使うテクニックをサクッとご紹介

pcdesk

プログラミングを勉強中のみなさん、こんにちは!

今回は、marginの書き方とよく使うmarginのCSSコードを紹介します。

 

marginは要素の外側の余白です。

余白を適切に使うことにより、見やすいWebサイトを作ることができます。

 

そのmarginのよく使うコードとは、中央寄せ左右どちらかに寄せる、この2つです。

よく使う、というか使いまくりです。

 

それでは見ていきましょう。

 

marginの書き方

marginの設定方向は4つです。
上 右 下 左 です。

 

4方向をそれぞれ設定する場合

上 margin-top:●●px;
下 margin-bottom:●●px;
左 margin-left:●●px;
右 margin-right:●●px;

 

4方向まとめて表記する場合

margin: ○px △px □px ☆px;

すなわち

margin: 上 右 下 左;

となります。

 

 

上下と左右をそれぞれまとめる場合

margin: ○px △px;

左の数値が上下の余白、右の数値が左右の余白です。

すなわち

margin: 上下  左右;

となります。

 

 

左右だけまとめる場合

margin: ○px △px □px;

左の数値が上の余白、中央の数値が左右の余白、右の数値が下の余白です。

すなわち

margin: 上 左右 下 ;

となります。

 

詳細はこちらを参照してみてくださいね。
marginとpadding

 

 

よく使うmarginのコード

ブロック要素の中央寄せ

ブロックの中央寄せは margin; 0 auto です。

めちゃめちゃ使います。

See the Pen
margin
by t.h (@tomtom15)
on CodePen.

 

 

 

ブロック要素の右寄せ

右寄せはこの2つを記述します。

margin-right: 0;
 margin-left: auto;

See the Pen
margin-right-yose
by t.h (@tomtom15)
on CodePen.

ブロック要素の左寄せ

左寄せはデフォルトです。

cssを設定しなくても、勝手に左寄せになります。

 

 

まとめ

いかがでしたでしょうか。

 

mariginの表記はなるべくまとめる書き方の方が見やすいです。

1行で済みますしね。

 

また、ブロック要素の中央寄せ・右寄せはたくさん使うので、ぜひ参考にしてください。

 

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

marginに関連する記事も紹介しておきます。

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5