スタート!CSS入門

パディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素のパディングを指定するには、paddingプロパティを使います。ここでは、paddingプロパティの使い方について紹介します。
講師:
06:20

字幕

要素のパティングを指定するには padding プロパティやその関連プロパティを使います。このレッスンでは padding プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれのパティングを個別に設定するためのプロパティについて紹介します。4辺のパティングを個別に指定するにはpadding-top padding-bottompaddding-right padding-left の各プロパティを使います。それぞれパディングの上下左右の辺に対応したプロパティです。これらのプロパティに使える値は「長さ」「パーセント値」です。「長さ」は数値とその単位。「パーセント値」は数値とパーセントで指定します。マイナスの値は使えません。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとすでにページ上部に深緑の背景色を設定した領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。ここではこの見出しなどを含む「 header 」要素に対して上辺、上の辺にだけパディングを設定する CSS を書いてみます。 「 header 」要素に対して「 padding-top 」プロパティを使います。「 padding-top 」プロパティです。そしてこの「 padding-top 」プロパティに20px を設定します。ウェブブラウザを見ると背景色が深緑のヘッダー要素の上の領域、この部分にパディングが空いていることを確認できます。パディングは背景色や背景画像の指定を反映しますので空いたパディングの部分にも背景色が反映されています。同じように今度はパーセント値でパディングを指定してみましょう。同じ「 header 」要素に対して左側にパディングを追加します。それでは CSS を追加しましょう。左側ですので「 padding-left 」プロパティを使います。ここでは値に 10% でパーセント値を指定します。ウェブブラウザを見るとヘッダー要素の左パディングが空いていることを確認できます。ここまでで上パディングは絶対的な長さ 20px 。左パディングはパーセント値 10% で指定しました。パディングをパーセント値で指定した場合は要素の幅を参照してパディングの値が計算されますので、要素の幅が変わるとそれに応じてパディングの長さも変わるようになります。 ブラウザの幅を変えた状態に合わせてパディングの長さが変わっているのが確認できます。続いて padding プロパティについて紹介します。padding プロパティはパディングの値を上下左右一括で指定できるプロパティです。このように値を一括で指定できる特殊なプロパティをショートハンドプロパティと呼びます。使える値や仕様は先ほどと同様です。ただし値については半角スペース区切りで1つから4つまで指定できます。値の数と適用対象は次の通りです。padding プロパティの値が1つの場合はその値が上下左右に適用されます。この例では上下左右のパディングに10px が適用されます。次に padding プロパティの値が2つの場合はその値が上下と左右に分かれて適用されます。この例では 10px が上下のパディング5px が左右のパディングとして適用されます。次に3つの場合です。値が3つ指定された場合は1つ目の値が上のパディング、2つ目の値が左右のパディング、そして3つ目の値が下のパディングして適用されます。この例では 10px が上パディング5px が左右のパディング10px が下のパディングとして適用されます。 そして最後に4つの値が指定された場合。4つの値が指定された場合は順に 上 右下 左の順で値が適用されます。この右の例ではまず上パディングに 10px右パディングに 5px 下パディングに 0px左パディングに 30px がそれぞれ適用されます。このレッスンでは要素のパディングを指定するpadding プロパティやその関連プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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