スタート!CSS入門

マージン

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素のマージンを指定するには、marginプロパティを使います。ここでは、marginプロパティの使い方について紹介します。
講師:
07:28

字幕

要素のマージンを指定するには marginプロパティやその関連プロパティを使います。このレッスンでは margin プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれのマージンを個別に設定するためのプロパティについて紹介します。4辺のマージンを個別に指定するにはmargin-top margin-bottommargin-right margin-left プロパティを使います。それぞれマージンの上下左右に対応したプロパティです。これらのプロパティに使える値は「長さ」「パーセント値」「 auto 」キーワードです。「長さ」は数値とその単位。「パーセント値」は数値とパーセントで指定します。マイナスの値も使えます。「 auto 」は状況に応じた値が設定されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとすでにページ上部に深緑の背景色を適用した領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。ここではこの見出しなどを含む「 header 」要素に対して上辺、上の辺にだけマージンを設定するCSS を書いてみます。 「 header 」要素に対して「 margin-top 」プロパティでマージンを上マージン 100px を設定します。ウェブブラウザを見ると背景色が深緑のヘッダー要素の上、上の部分にマージンが空いていることを確認できます。同じように今度はパーセント値でマージンを指定してみましょう。同じ「 header 」要素に対して左側、左辺にマージンを追加します。margin-left プロパティを追加します。「 margin-left 」プロパティです。そしてこちらでは 50%パーセント値で値を指定します。ウェブブラウザを見るとヘッダー要素の左側、左辺にマージンが追加されているのを確認できます。ここまでで上マージンは絶対的な長さ。左マージンは相対的なパーセント値で指定しました。マージンをパーセント値で指定した場合は要素の幅を参照して値が計算されますので、ウェブブラウザをリサイズするなどして要素自体の幅が変わった場合はそれに応じてマージンの長さも変化がします。続いて margin プロパティについて紹介します。margin プロパティはマージンの値を上下左右一括で指定できるプロパティです。このように値を一括で指定できる特殊なプロパティをショートハンドプロパティと呼びます。 使える値や仕様は先ほどと同様です。ただし値については半角スペース区切りで1つから4つまで指定できます。値の数と適用対象は次の通りです。margin プロパティの値が1つの場合はその値が上下左右に適用されます。この例ではマージンが上下左右に10px ずつ適用されます。次に margin プロパティの値が2つの場合。2つの場合は1つ目の値が上下に2つ目の値が左右に適用されます。この例では上下のマージンに 10px左右のマージンに 5px が適用されます。そして margin プロパティの値が3つの場合。3つの場合は1つ目の値が上、2つ目の値が左右、最後の値が下のマージンとして適用されます。この例では上マージンに 10px左右のマージンに 5px下のマージンに10pxこちらの値が適用されます。最後に margin プロパティの値が4つの場合ですが、この場合は値の順番としては 上右 下 左という順番でマージンが適用されますこの例では上マージンに 10px右マージンに 5px下マージンに 0px 左マージンに 30pxというように値が適用されます。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。 ウェブブラウザを見るとデフォルトで適用されているユーザーエージェントスタイルシートによってウェブページ全体の左右、左と右側の部分に少し見にくいですが小さくマージンが空いていることが分かります。ここではこのマージンを0 にしてみましょう。ウェブページ全体に対しての指定ですので、まずは「 body 」要素に対してセレクタを記述します。そして margin プロパティを使います。ここでは値を4つ使ってみましょう。値の順番はまず上、上マージンに「 1em 」1文字分を指定します。次に右マージンこちらには 0 を指定します。長さで 0 を指定する場合は単位を省略することができます。次に下マージンこちらも上と同じ「 1em 」を指定します。そして最後が左、こちらも 0 を指定します。ウェブブラウザを見るとウェブページ全体の左右のマージン、左側と右側のマージンが無くなっていることが確認できます。このレッスンでは要素のマージンを指定するmargin プロパティやその関連プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。