僕の世界観を変えてみるスマートフォン用の表示で見る僕の世界観を変えてみる文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。paddingやmarginを使って余白を調整しよう2015-08-15paddingやmarginを使って余白を調整しようwebシェアするTwitterGooglePocketLine今まで製作してきたホームページは文字がキュっとなっていたので窮屈な印象でした。そこで今回はまずpaddingを使って余白を調整していきたいと思います。■paddingまずはタイトルの余白を調整していきます。余白を上下に5px、左右に15pxに設けますって意味です。border-widthでやったのと同じですね。こんな感じで追記しました。するとタイトルが、、、これがこうなりました!上下と左側に多少余白ができましたね。これがpaddingです。タイトルを真ん中に持ってきたいときは左のpaddingを300pxとか数値上げていくんですかね?オークションではcenterってのを使って表を真ん中にもってきましたが。そのうち出てくるでしょう。同じようにheading-typeAとheading-typeBにも余白を設定していきます。padding-leftを使えば左だけ余白を設定できるみたいです。次にborderを使ってだいたいここからここまでがタイトル、ここからここまでが本文~とかって区切るために線を引いていきます。htmlの画面でarticleとかheaderにクラスを追加するみたいですが、すごく長いクラス名でめんどくさいと言うかごちゃごちゃしそうなので僕は簡略化して追加していきます。class="articlefooter">htmlはこんな感じにしておきました。#CCCCCC;}と、こんな感じで追加しました。タイトルの下に線を引きたいのでheaderのほうはborder-bottom本文とその他フッター部分の間に線を引きたいのでfooterのほうはborder-topってことです。次にmarginを使ってまたも余白を調整していきます。■marginpaddingは罫線の内側に余白を入れるのに対してmarginは罫線の外側に余白を入れることができます。僕は正直わけがわからなくなっています。本の通りに進めていきます!marginも同様にmargin-bottomとmargin-topに30pxほど余白を設けます。paddingを使いbottomとtopに15pxの余白を入れていきます。外側と内側から余白によって押していく印象を受けました。あとは、本文に<section>を書き込んだんですけど、ここにも余白を入れることで文章を読みやすくする効果があるらしいので余白入れていきます。class="articlebody">の中にclass="heading-typeA"があり更にその中にclass="heading-typeB"が3つあるんです。heading-typeBはそれぞれ<section>で挟まれています。typeA">ブランド品や~とその下の<section>の間に余白を入れたいんです。それと</section>と<section>の間にも余白を入れたいんです。これすべて一つ一つ指定して余白を入れるのはとても手間がかかりますね。そこでこんな方法があります。{margin:30px;}はい。このようにarticlebodyのあとにスペースを入力しsectionと打つことで、articlebody内のすべてのsectionにcssを適用することができるんだそうです!意味がわからなかったら本を是非買ってみてください。それから参考にさせていただいた書籍のところに枠を設けて、文字サイズの変更もしておきます。補足情報は<aside>で囲んであります。そこにクラス名creditって付けてこれをcssで変更しました。padding:10px;は内側に10px分の余白を設ける、ですね。borderはいいでしょう。いうのがcreditというクラス名で挟まれてところの<p>タグすべてのフォントサイズを12pxに変更する、です。こんな感じにできました。今回はこれで終了です。次の節ではリストと表を装飾していきます。箇条書きの●を■にしたり、表がやっと表らしくなっていきます。本当はmarginのことで解説も載っているんですけど、marginが相殺されるとか書かれていますがまあ、全体を作ってから理解するのでもいいでしょう。13:56paddingやmarginを使って余白を調整しよう関連記事2016-11-02上に戻るボタンをアイコンを使って表現してみたいろいろサイトを見てみると上に戻るボタンがついているのを発...2016-10-21テーマCONTENTSをカスタマイズしてみた。自分で作ったグローバルメニューを使っていたので気分転...2015-11-08簡単!CSSで見出しをそれっぽく変えてみよう。ヶ月)工場→カフェバイト→質屋の店長→現在SEもどき。2019年10月にバセドウ病と診断される。僕の世界観を変えてみるスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。