CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある ...

下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2つ以上の要素が近接している場合、ユーザーはそれらが何らかの形で関連していると見なします。複数のデザイン要素をグループ化する ...

この記事は、ウェブページデザインにおけるCSSの重要なプロパティである`padding`と`margin`について、初心者にも分かりやすく解説することを目的としています。ボックスモデルの基本から、それぞれの具体的な使い方、違い、そして使い分けのコツまでを ...

マージン（margin）、パディング（padding）、フォントサイズ（font-size）の3つの主なセレクタに焦点を絞り、コーディング時にゴリゴリレイアウトを調整することが出来るCSSフレームワークを作ってみました。 用途としては、そうですね。 bootstrapベースの ...

CSS で余白を取るとき、margin で取るべきか padding で取るべきか。 初学者が迷いやすいポイントをどのように判断して使い分けているかを記述していきます。 margin と padding についておさらい 調べるとわかることですが、軽く margin と padding についておさらい ...

margin-top、margin-right、margin-bottom、margin-leftプロパティは、ボックスのマージンの幅を個別に指定します。CSS3におけるmargin系プロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。 できるネットのmargin系プロパティの意味と ...

固定ヘッダがあるページで、ページ内リンクをクリックすると、リンク先のコンテンツがヘッダに隠れてしまうことがある。また、スクロールスナップ（スクロール時に特定の位置で自動的に止まる機能）を使う際も、停止位置のずれという問題が発生する。

Webページの周囲にある余白を消す方法や、余白部分にだけ背景色や背景画像を加えるスタイルの書き方、任意の余白サイズを指定する方法などを簡単に解説。Webページ周囲の余白は主に、HTMLのbody要素に対するマージンで作られています。上下左右の ...