
スキルアップ
2021.02.25
プログラミングスキルを最速で身につける独学の勉強方法は?
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
ITコラム
2017.04.12
パディングは、枠線(border)と要素の内容領域(content)との間にあるスペースです。
要素に背景色や枠線を設定した場合に、テキストなどの内容領域の周りに適度なパディングを指定して見やすくします。
そして、マージンと同じように、パディングにもショートハンドがあります。
今回は、パディングと、そのショートハンドであるpaddingプロパティについてまとめたいと思います。
1.パディングとは
2.paddingプロパティ
3.パディングを相対値で指定する場合
パディングは、コンテンツの外側からボックスの境界までの余白スペースです。
paddingプロパティには、marginプロパティのようにマイナスの数値を指定したり、autoを指定することはできません。0以上の数値を指定します。
また、マージンの相殺のような複雑なルールもありません。
paddingプロパティには、次の値が使えます。
数値 px や em などの単位を付けて指定 % 要素の幅や高さに対するパーセントで指定
paddingプロパティの値は、継承されません。
また、paddingプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。
パディングは上下左右に指定できるため、padding-top、padding-bottom、padding-left、padding-rightという4つのプロパティがあります。
そして、そのショートハンドプロパティが、paddingプロパティです。
上下左右に1emずつパディングを指定したい場合、上下左右それぞれのプロパティを使うと、次のような書き方になります。
padding-top:1em;
padding-bottom:1em;
padding-left:1em;
padding-right:1em;
これを、ショートハンドプロパティを使って指定すると、次のようになります。
padding:1em;
padding:値;で値が1つの場合は、上下左右全て同じ値という意味です。
padding:3em;
ソースは次の通りです。
(CSS)
div#sample {
padding:3em;
margin:0;
border:solid 1px #CCC;
background:#31A9EE;}
div#sample p {background:#FFF; margin:0; padding:0.5em;}(HTML)
<div id=”sample”>
<p>padding:3em;</p>
</div>
padding:値1 値2;で値が2つの場合は、上下の値(値1)、左右の値(値2)という意味です。
値と値の間は、半角スペースで区切ります。
padding:3em 30%;
ソースは次の通りです。
(CSS)
div#sample {
padding:3em 30%;
margin:0;
border:solid 1px #CCC;
background:#31A9EE;}
div#sample p {background:#FFF; margin:0; padding:0.5em;}(HTML)
<div id=”sample”>
<p>padding:3em 30%;</p>
</div>
padding:値1 値2 値3;で値が3つの場合は、上値(値1)、左右の値(値2)、下の値(値3)という意味です。
値と値の間は、半角スペースで区切ります。
padding:3em 30% 10px;
ソースは次の通りです。
(CSS)
div#sample {
padding:3em 30% 10px;
margin:0;
border:solid 1px #CCC;
background:#31A9EE;}
div#sample p {background:#FFF; margin:0; padding:0.5em;}(HTML)
<div id=”sample”>
<p>padding:3em 30% 10px;</p>
</div>
padding:値1 値2 値3 値4;で値が4つの場合は、上値(値1)、右の値(値2)、下の値(値3)、左の値(値4)という意味です。
上から始まって、時計回りに上、右、下、左の順で指定されます。
値と値の間は、半角スペースで区切ります。
padding:3em 30% 10px 1.5em;
ソースは次の通りです。
(CSS)
div#sample {
padding:3em 30% 10px 1.5em;
margin:0;
border:solid 1px #CCC;
background:#31A9EE;}
div#sample p {background:#FFF; margin:0; padding:0.5em;}(HTML)
<div id=”sample”>
<p>padding:3em 30% 10px 1.5em;</p>
</div>
パディングを相対値で指定する場合は、相対値の単位によって、相対の基準となる対象が変わるので、その点に注意する必要があります。
emなど、フォント関連の相対値で指定する場合は、自分自身のフォントサイズが基準の相対値となり、%で指定する場合は、自分自身ではなく親要素のボックスサイズが基準の相対値となります。
フォントサイズ 16px、padding: 0.3em
フォントサイズ 16px、padding: 30%
ソースは次の通りです。
(CSS)
div#sample {font-size:16px; border:solid 1px #ccc; padding:0; margin:0;}
div#sample p {
padding:3em 30% 10px 1.5em;
margin:0;
border:solid 1px #CCC;
background:#31A9EE;}
div#sample p {background:#FFF; margin:0; padding:0.5em;}(HTML)
<div id=”sample”>
<p>padding:3em 30% 10px 1.5em;</p>
</div>
スキルアップ
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.