CSSシェアするLINE!0今回はCSSのmarginとpaddingについて見ていきましょう。paddingとmarginはサイズの変更や余白を変える、更には配置に関することで絶対に必要な知識になるのでしっかり身に付けていきましょう。1、要素はどのように構成されている?1-1、paddingは内側1-2、marginは外側2、値の指定方法や注意点2-1、marginを%やautoで指定2-2、重なるとどうなる?paddingとborder、marginについては要素の加工だけでなく、要素の配置などにも使える技術になるのでしっかり学んでいきましょう。要素はどのように構成されている?さっそくですが、paddingとborder、marginの関係性は以下のようになっています。題材は「【Wordpress】プラグインなしでLINE風会話BOX【CSS】」です。調べてみたら出来るらしいね。02:12paddingやmarginがどのように反映されているのかはディベロッパーツールで確認することが出来ます。ディベロッパーツールについてはこちらでお話ししています。CSSが反映されない時にチェックすることCSSでいろいろ作っていたら、ある時を境にまったく反応しなくなっていました。原因をググっても出なかったのですがとんでもない珍事が原因で解決しました。解決するまでに調べたことをまとめましたので同様に困った方は確認してみましょう。19:20先程のpadding、border、marginがどういった部分を表しているのかをもう少し見てみます。paddingはborderまでスペース、borderは文字通り境界線、marginはborderの外側という認識で大丈夫です。paddingは内側paddingはborderはの内側部分の表示です。royalblue;background:orange;padding:20px;}borderまでの内側のスペースが広がっています。borderの内側である部分は要素として扱われるのでpadding部分にも要素として扱われているので色掛けをされます。上下左右のそれぞれだけを指定する方法もあります。:右側の内側余白を広げるまた、以下のような指定方法もあります。padding:〇px,〇px,〇px,〇px;↑、→、↓、←の時計回りの順に指定します。padding:〇px,〇px;↑↓、←→、の順でまとめて指定することもできます。marginは外側marginはborderの外側の余白を指定します。marginは以下の部分を指しているんでしたね。marginの指定方法も基本的にはpaddingと変わりはありません。lightgray;}marginもpaddingと同じように上下左右のそれぞれだけを指定する方法もあります。:右側の外側余白を広げるこれまた同じで、marginにも以下のような指定方法もあります。margin:〇px,〇px,〇px,〇px;↑、→、↓、←の時計回りの順に指定します。margin:〇px,〇px;↑↓、←→、の順でまとめて指定することもできます。値の指定方法や注意点paddingとmarginの基本的な考え方について見てきましたが、値の指定方法や注意点についても順番に見ていきましょう。displayプロパティでinlineならばtext-alignで簡単に中央寄せができますが、blockの要素の配置を決める時に組み合わせると表現方法が増えるので一緒に覚えていきましょう。16:05また、表などの目立たせたいものなど配置に対してもpaddingやmarginの指定は必要になるのでこちらも慣れていない人は確認してみましょう。【HTML/CSS】tableの使い方を学ぶ【表作成・装飾】Excelについてブログで情報発信をして、HTML/CSSの勉強をしているといいながらtableタグの解説をしていない矛盾に気づいたので解説していきます。width:50%}「位置」のmarginを50%とした事で、親要素のdivの範囲幅の50%の場所から「位置」が始まっています。auto;という指定方法があります。『親要素の幅-子要素の幅=余った幅』を自動的に2分割するという意味になります。同時に覚えておきたいのが、以下のような中央寄せは不可能であるという事です。auto;」で横幅の水平の中央に指定できるとだけ覚えておきましょう。重なるとどうなる?最後ですが、「要素に設定しているpaddingやmarginが他の要素のpaddingやmarginの部分と重なるとどうなるか」ということについて見ておきましょう。上手くいかない時に確認してほしい項目の1つです。端的に図解すると以下のような図になります。paddingは重ならない?paddingは広げても他の要素と被らないようになっています。実際に見てみましょう。margin:0px;}paddingが広がってもその分他の要素が押されるので重なりはしません。marginは重なる?marginは他の要素のmarginと競合して、大きいほうのmarginが優先されるようになっています。以下のように要素AとBがあったとします。要素Aにはmarginは10px、要素Bにはmargin-topが30pxで設定されているので2つの要素のmargin(余白)は40px分あることになります。実際には競合する要素の場合はmarginの値が大きいほうが優先されるので今回は2つの要素の間(有効となるmargin分)は大きいほうの30px分になります。まとめmarginとpaddingについていろいろ見てきました。重なり大きい値が優先paddingとmarginの使い方は使用頻度がものすごく高いのでしっかりマスターしましょう。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。