セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。コピー2022.06.04はい。今回はタイトルの通り余白が生まれるタイミングは一体いつなのかを考えていきます。これを理解すれば、marginとpaddingのどっちを使うのが正しいか、あるいは他の方法を使うべきかを判断する基準を持つことができると思います。質の高いコーダーになりたいという方はぜひ一緒に考えていきましょう。余白に関することは一切ユーティリティクラスに追いやるまとめ余白は、レイアウトをするときに初めて生まれる例えばこんなサイトがあったとします。このサイトから、パーツと思われるものを取り出してみましょう。ヘッダーファーストビューカードサイドバーフッターおそらくこの5パーツが思い浮かぶかと思います。この時点でお気づきかと思いますが、余白が消滅しています。サイトのレイアウト時にあった各種余白は、パーツにバラした瞬間どこかに行っているはずです。上下左右に余白がある状態でパーツとみなすことはないですよね。逆に、パーツを単純に敷き詰めると余白は無い状態で配置することになります。このような配置のサイトは現実的にはあまり無いですよね。レイアウト時に余白が生まれていると言えそうです。コードとしてどう表現するかまず、大前提として「使い回しが発生するパーツでなければそこまで気にしない」という風に僕は考えています。上記の例で言えば、カード以外はページ内で1回しか使っていません。その場合は普通にmarginでパーツ間の余白を指定すれば良いでしょう。カードはそうもいきません。カードにmargin-leftを付けると全要素に左方向の余白がつくわけですから、見た目が崩れます。カード間の余白をつけようとしたら、このように左に余計な余白が生まれてしまいましたね。「偶数番目のみmargin-leftをつける」という形でnth-childなどの擬似セレクタを使う例がよく見られるわけですが、正直コードが煩雑になりあまり良い方法ではないです。今ならもっと良い方法があります。可能な限り親要素側で余白を定義する余白がいつ生まれるかを考えると、そもそもパーツ自身に外側の余白を持たせること自体があまり良くなさそうです。どこで余白を定義するのが良いでしょうか。パーツを内包する親要素がレイアウトを行なっている、と考えてみましょう。次のようなレイアウトを行うとします。flexないしはgridレイアウトを使っていれば、column-gap/row-gapというプロパティが使えます。横方向の余白はcolumn-gap、縦方向の余白はrow-gapで指定します。#87ceeb;}このように、要素間の余白を親要素側が決めていますね。このような形であれば、.Container-Itemの方にnth-childで一部にのみ余白をつけたりする必要がありません。このようなリスト表示でも応用できます。これはマクドナルド公式サイト(https://www.mcdonalds.co.jp/)の新着情報のセクションです。flexは縦方向のレイアウトも可能ですし、gridなら1列5行のgridと考えれば良いです。親要素に以下のようなCSSの指定をするイメージです。20px;}このようにすれば、ほとんどのレイアウトにおいて親要素から余白を定義することができます。しておくことで、仮に子要素のクラスを複数の場所で使いたい時に余白が邪魔で困ることはありません。この方法は各要素の余白が一定の場合のみ使えます。要素間の余白が全部一緒でない場合は他の方法を考えることになります。flexについてもっと詳しく知りたい方はこちらをご覧ください。flex;でいい説こんにちは。今回は、僕がコーディングしていて最近思うことを書き残しておきます。blockないしはinlineが初期値になっていますがもう全部flexにしちゃった方が色々楽なんじゃな...itokoba.com2022.06.06余白に関することは一切ユーティリティクラスに追いやるこれは僕もまだ検討段階の話なので、どの程度やるべきかは議論の余地があると思います。具体的に何をやるかというと、「余白に関する情報は余白に関することのみを書いたクラス(=ユーティリティクラス)をつけることで対応する」ということです。次のようなコードを書くことになります。48px;}このように余白はパーツのクラスとは完全に別のものにし、レイアウトを行うタイミングで余白を決めるような書き方です。これであればより自由にレイアウトを行え、かつパーツの見た目に影響しない形が実現できます。見た目、レイアウトに関する情報が別のところに記述されることになるので見通しは少々悪くなりそうです。使いすぎは良くなさそうですね。前提でお伝えした通り「使い回しが発生するパーツでなければそこまで気にしない」という方針なのでこれが必要になる場面自体はあまり多くないと思われます。まとめというわけで余白はいつ生まれるのか、ひいては余白をどうコードで扱うべきかを考えてみました。レイアウト時に余白が発生するということと、パーツの中に余白などの外部の情報を含めるのはまずいということはかなり正しいかなと考えています。言えば余白の扱いに関してはデザイナーさんと協力して構築した方が良いでしょう。そもそも余白を統一したほうがコード上では質が上がるということを知らない方もいます。逆にその上で余白をずらしたデザインが良いと判断されることもあります。プロジェクトごとに何を持って良しとするかは微妙に変わってきます。「何が正解かを覚える」というより、そういう目線を持って取り組むということが一番大切です。auto;の正体を暴くこんにちは。autoを指定したけど効かない!ってことよくありますよね。そもそも何なのか、その正体を暴いていきます。追記:応用編を書きました。post...itokoba.com2019.09.09marginとpaddingの違いと正しい使い分け方を完全解説こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。関連記事HTML/CSSを学ぶさらに楽をする、emmetのカスタマイズ方法こんにちは。HTML/CSSの記述する速度を圧倒的に早めてくれるemmet。皆さんもお使いの方は多いのではないでしょうか。emmetの使い方はこちら。一部の短縮記法は現代のHTMLで良いとされる形と微妙に違っていたりします。flex;の時に使えるorderプロパティを使って要素の順番を入れ替える方法を紹介します。ようなケースです(下画像参照)。...2023.05.18HTML/CSSを学ぶHTML/CSSを学ぶHTMLにおける、上手に比率維持した画像を作る方法(imgタグ/background-image)こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。fontsの読み込みを高速化するこんにちは。fontsってとても便利ですよね。リンクタグを数行コピペするだけでフォントを読み込めますから、普通にフォントファイルを用意して配置するより簡単です。実は場合によって読み込み速度が遅いことがあり、ユーザーの離...2021.09.24HTML/CSSを学ぶHTML/CSSを学ぶ【徹底解説】imgタグのwidth/height属性は絶対に指定した方が良いこんにちは。今回はimgタグのwidth/height属性の適切な指定方法とその効果について解説していきます。type=”date”で、どこをクリックしてもカレンダーが表示されるようにする。今回はinputタグについてです。最近仕事で出くわしたので紹介します。(ブラウザによっては動作しない可能性があります。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。