
スキルアップ
2021.02.25
プログラミングスキルを最速で身につける独学の勉強方法は?
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
ITコラム
2017.04.05
marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。
今回は、このmarginプロパティの概要と、ショートハンドについてまとめたいと思います。
marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ~ マージンとショートハンド(本ページ)
CSS【 margin 】2 ~ autoとwidthと上下と左右
CSS【 margin 】3 ~ ネガティブマージン
CSS【 margin 】4 ~ マージンの相殺 (margin collapsing)(1)
CSS【 margin 】5 ~ マージンの相殺 (margin collapsing)(2)
1.ショートハンドとは
2.marginの値
3.marginのショートハンドの書き方
4.個別指定のプロパティ
CSSのショートハンドとは、複数のプロパティをまとめて1つのプロパティで指定する方法のことです。ショートハンドを使うと、スタイルシートの内容が読みやすくなったり、コード量が減るためにコーディング作業がスムーズになったりするメリットがあります。
例えば、上下左右のマージンを全部10pxにしたいとき、通常は次のように指定します。
margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
この書き方だと、指定する際も大変ですが、後で変更があった場合は4箇所の値をそれぞれ修正行する必要があります。
同じ内容の仕様を、ショートハンドを使って指定すると、次のような書き方となります。
margin:10px;
便利で読みやすく、修正作業も捗ります。
marginの他、padding や border、background、font などでもショートハンドが使えます。
ショートハンドを指定できるプロパティ
margin マージンの上、下、左、右 padding パディングの上、下、左、右 background 背景色、背景画像、画像の表示位置 / 画像のサイズ、画像の繰り返し方法、描画領域、画像の配置基点、画像のスクロール方法 border ボーダーの上、下、左、右の 太さ、スタイル、色 border-image ボーダーに使用する画像、画像のスライス、太さ、外側への拡張、繰り返し方法 outline アウトラインの太さ、スタイル、色 font 文字のスタイル(イタリックか正体か)、文字の表示機能(small-capsとか)、文字の太さ、サイズ / 行の高さ、書体(font-family) list-style リストマーカーの種類、位置、画像 columns マルチカラムの個数、カラム幅 transform マトリックス変形、移動距離、拡大率、回転の角度、傾斜角度 transition 遷移させるプロパティ、変化にかける時間、変化中の速度、開始のタイミング animation アニメーションの名前、1回分の再生時間、速度に緩急をつる、開始のタイミング、再生回数、逆方向の再生
marginプロパティは、要素の外側の隣りのボックスとの間隔、または子要素の場合は親要素のとの間隔を指定します。
marginプロパティの値は、次の通りです。
auto 値が自動計算される 数値 px や em などの単位を付けて指定 % 要素の幅や高さに対するパーセントで指定
marginプロパティの値は、継承されません。
また、marginプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。
marginプロパティのショートハンドの書き方には、ルールがあります。
このルールは、paddingプロパティやborderプロパティなどでも共通のルールです。
値が1つの場合は、上下左右が全て同じ値 {margin:値;}のように値を1つ指定している場合は、上下左右全て同じ値という意味の指定です。 margin:3em;
(CSSソース) div p { background:#e9ffd3; margin:3em;} (HTMLソース) <div> <p>margin:3em;</p> </div>値が2つの場合は、上下と左右の値 {margin:値1 値2;}のように値を2つ指定している場合は、上下(同じ値で値1)と左右(同じ値で値2)という意味の指定です。
値と値の間は、半角スペースで区切ります。margin:1em 3em;
(CSSソース) div p { background:#e9ffd3; margin:1em 3em;} (HTMLソース) <div> <p>margin:1em 3em;</p> </div>値が3つの場合は、上、左右、下、の値 {margin:値1 値2 値3;}のように値を3つ指定している場合は、上(値1)、左右(同じ値で値2)、下(値3)という意味の指定です。
値と値の間は、半角スペースで区切ります。margin:1em 2em 3em;
(CSSソース) div p { background:#e9ffd3; margin:1em 2em 3em;} (HTMLソース) <div> <p>margin:1em 2em 3em;</p> </div>値が4つの場合は、上、右、下、左、の値 {margin:値1 値2 値3 値4;}のように値を4つ指定している場合は、上から始まって時計回りに、上(値1)、右(値2)、下(値3)、左(値4)という意味の指定です。
値と値の間は、半角スペースで区切ります。margin:1em 2em 3em 0;
(CSSソース) div p { background:#e9ffd3; margin:1em 2em 3em 0;} (HTMLソース) <div> <p>margin:1em 2em 3em 0;</p> </div>
マージンの上下左右の値をショートハンドで指定できるので、個別のmargin-rightプロパティなどは必要ないようにも思えますが、例えば、ショートハンドで値を指定した上で、一部だけピンポイントで値を変えたい場合には、個別指定のプロパティを使います。
入れ子にしたリストを、ショートハンドでmarginプロパティを指定すると、次のような表示になります。
(CSSソース) ul#sample1 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;} ul#sample1 li { margin:1em; padding:1em; background:rgba(49, 169, 238, 0.5); color:#fff; line-height:1em;} ul#sample5 li ul {margin:0;} ul#sample5 li ul li {margin:1em 0 1em 3em;} (HTMLソース) <ul id="sample1"> <li>AList <ul> <li>AList1</li> <li>AList2</li> <li>AList3</li> </ul> </li> </ul>
入れ子にしたul要素内のli要素は、上下のマージンが1emずつですが、マージンの相殺により各li要素間は、合計の2emにはならず、1emとなります。
ですが 最後のli要素は、親のpaddingと自分のmarginのおかげで、下が2em空いてしまいます。
これを、下の空きを他と同じ1emにしたい場合は、最後のli要素だけmargin-bottomプロパティを指定します。
(CSSソース) ul#sample2 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;} ul#sample2 li { margin:1em; padding:1em; background:rgba(49, 169, 238, 0.5); color:#fff; line-height:1em;} ul#sample2 li ul {margin:0;} ul#sample2 li ul li {margin:1em 0 1em 3em;} ul#sample2 li ul li:last-child {margin-bottom:0;} (HTMLソース) <ul id="sample2"> <li>BList <ul> <li>BList1</li> <li>BList2</li> <li>BList3</li> </ul> </li> </ul>
擬似クラス「 :last-child 」で、最後の要素だけ下マージンを 0 にしています。
ここでは、一番最後の下マージンだけを変更したいので、margin-bottomプロパティを使っています。
このように、シーンに合わせて個別指定のプロパティを使います。
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
スキルアップ
2021.02.09
求人情報誌でよく見かける「ポテンシャル採用」という言葉。新卒やキャリア採用との違いをご存知ですか?本記事ではITエンジニアの中途採用におけるポテンシャル採用を徹底解説!企業がポテンシャル採用に求めること、内定獲得のポイン […]
INTERNOUS,inc. All rights reserved.