#ビジネス

（4）CSSが苦手なひと向け―マージン（margin）とパディング（padding）編

HTMLとCSSの違いについては以前書いた記事でちょろちょろりと触れたのですが、ネット黎明期と比べると通信速度も処理速度も桁違いになったことによりウェブサイトも劇的に凝ったものが多くなりましたネ。これもCSS（他にもPHPやJAVA）などによる記述の賜物であります。

よく映画やドラマなどでハッカーみたいなエンジニア集団が制限時間内にカタカタとコードを打ち込んでいるみたいな演出を目にするかと思います。実際にプロがどういった形でプログラムと向き合っているのかは会社内でもあまり見たことがないので（タイピングはめちゃくちゃ速かったです）よくわかりませんが、少なくとも素人のコーディングの場合はコピペがほとんどで必死に手打ちすることはあまりありません。

それでも私がHTMLとCSSに独学で手を出し始めた初期の頃になかなか理解できなかったのが「マージン（margin）」と「パディング（padding）」です。

ここのどこかに奴らが隠れている…

私の場合これをスーッと解消してくれたのが「Google Chrome」の「デベロッパーツール」でした。［Google Chromeの設定］→［その他のツール］→［デベロッパーツール］の順でいけます。開発者向けの機能なので正直見てもさっぱりな点の方が多いですが、困った時にはかなり勉強になります。

マージンとパディングに色指定することはできないので、以下では順番に画像で解説させていただきます。

実際に表示されているサンプル版と解説用の画像とで特にスマホからの閲覧だと微妙に見え方が違うかもしれませんが、実際の指定サイズ等に違いはありません。あくまでデバイスやブラウザに依存する見え方の問題ですのでお気になさらず。おそらくそこを考え出すと深みにはまります。また、線（border）はマージンとパディングの境界線がわかりやすくなるように別途で設定しているものです。

そもそも「マージン（margin）」とは

ウェブブラウザ「Firefox」でも有名なMozillaが開発者向けに公開している情報がわかりやすいのでこちらに…としてしまっては私が噛み砕いていたものを吐き出す場所がなくなってしまうので書きます。

どうしようもなくざっくり言うと、外の余白がマージンです。いわゆる初期値がたまにジャマをすることもありますが、基本的には0です。

それでは「パディング（padding）」とは

こちらもマージンと同様にざっくり言ってしまうと内の余白がパディングです。初期値はマージンと同じく0が多いです。英単語でのmarginは余白の意味ですが、paddingは詰めるや埋めるという意味になります。

例）marginもpaddingも:0の場合

スタイルを指定する際の単位によって文字のサイズが変わってはきますが、これから出てくる「0」や「1」の数字はとりあえず「0文字分」「1文字分」と認識してください。正確には「0em」「1em」と記載します。

私の力量不足によりCSSの詳細なルールに関する説明は省略しますが、とりあえずこれらだけ頭の片隅に置いておけば無双できます（はず）。

そして以下がマージンとパディングを全て0で指定した場合に表示されるレイアウトです。

例）marginは:1でpaddingが:0の場合

例）marginが:0でpaddingは:1の場合

例）marginもpaddingも:1の場合

こうして比較してみると「なーるほど」感が出てくるかと思いますが、文章の上下に不自然に空白がある…と感じる方もいるかもしれません。これは段落そのものに余白がくっついてきてしまっているためです。もし不要だなと感じるようであればパディングをいじって以下のように整えることも可能です。

これはパディングの左右だけ"1"に設定しています。パディングの上下に1を足してしまうと段落の余白にプラスされて空白が多く見えてしまうため上下のパディングは"0"とします。

＊　＊　＊

最初に勉強し始めた頃はちんぷんかんぷんでしたが、自分でいろいろやってみて失敗を繰り返したら案外とできるようになりました。今ではコード??を見ればなんとなーくデザインが浮かんでくるぐらいには慣れてきたと思います。

なのでせっかく興味を持っていじり始めたのに「わけがわからないよ」と初手で投げ出してしまうのももったいないので、今はよくわからないけれどやっていくうちになんとなくわかってくるくらいのノリでお互い適当に頑張りましょう。何事もそれくらいのある種の適当さも長続きのコツだと思っております。

参考引用：
青空文庫　夏目漱石 吾輩は猫である（https://www.aozora.gr.jp/cards/000148/files/789_14547.html）2023.9.23

＼気になったらSHARE!!／