WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

コース一覧

基本のプロパティを覚える1

  • 装飾に関するプロパティ
  • レイアウトに関するプロパティと考え方

CSSのコーディングにおいて、よく使われるプロパティがあります。
今回は、そんな基本のプロパティについて説明していきます。

装飾に関するプロパティ

フォントに関するプロパティ

フォントの種類やサイズ、スタイルなどを設定するためのプロパティです。

補足
フォントに関するプロパティには「font」という一括指定できるプロパティが存在します。
フォントの種類サイズ、太さなど、フォントに関するプロパティを一括で設定することが可能です。
例）font: italic bold 16px/1.5 "Arial", sans-serif;

色/背景に関するプロパティ

要素の色や背景のスタイルを設定するためのプロパティです。

補足
背景に関するプロパティには「background」という一括指定できるプロパティが存在します。
色、画像、サイズ、並び方、表示位置など、背景に関するすべてのプロパティを一括で設定することが可能です。
例）background: url('../img/sample.png') no-repeat center/cover;

レイアウトに関するプロパティと考え方

幅・高さに関するプロパティ

幅と高さに関するスタイルは、要素のサイズやレイアウトを調整するためのプロパティです。

境界線（ボーダー）に関するプロパティ

要素の周囲に境界線を描画し、境界線のスタイルや色、角の丸みなどを調整するプロパティです。

  • 境界線：border
    境界線を描画するためのスタイルで、初期値は0に指定されているため見えません。
    一度に境界線の太さや色、種類を指定することができます。
    また、個別に上下左右の境界線のスタイルを指定することができます。
  • 角の丸み：border-radius
    境界線の角の丸みを指定します。
    px(ピクセル)や%(パーセント)などの単位を使用します。
    また、個別に四角の丸みを指定することができます。

    See the Pen 268_基本のプロパティを覚える1_012（border / border-radius） by Yugo Harima (@yh-dezadezi) on CodePen.

余白（パディング/マージン）に関するプロパティ

要素の周囲の余白を調整するプロパティです。

  • パディング：padding
    paddingは、要素の内側の余白のことでコンテンツとborderの間に存在しています。
    上下左右の余白を一度に指定することができます。 
    padding: 10px;
    上下左右の余白を個別に指定する場合は、時計回りに指定します。 
    padding: 10px 20px 15px 5px; /* 上 右 下 左 */
  • マージン：margin
    要素の外側の余白のことでborderを取り囲む形をしています。
    上下左右の余白を一度に指定することができます。 
    margin: 10px;
    上下左右の余白を個別に指定する場合は、時計回りに指定します。 
    margin: 10px 20px 15px 5px; /* 上 右 下 左 */
  • 余白（パディング/マージン）の図
    パディング/マージンがどこの余白に該当するか図で確かめましょう。

CSSのボックスモデルについて

CSSのボックスモデルについて学んでいきます。ボックスモデルを理解することで、コーディングに対する理解が深まり、より効果的なレイアウト設計が可能になります。

ボックスモデルとは、CSSでレイアウトをする際に必要な4つの領域のことです。
下記がボックスモデルの図になります。

  • contents（コンテンツ）
    contentsとは、HTML要素の中心にある領域のことで、テキストや画像、動画なども含まれています。
    CSSで、height（高さ）とwidth（幅）を用いて領域の大きさを指定することができます。
  • border（ボーダー）
    borderは、contentsの周辺にある境界線のことです。
    ※境界線：borderを参照
  • padding(パディング)
    paddingは、要素の内側の余白のことです。
    ※パディング：paddingを参照
  • margin（マージン）
    marginは、要素の外側の余白のことです。
    ※マージン：marginを参照

ボックスモデルにはbox-sizingプロパティが便利

ボックスモデルのサイズを指定する際は、ボックス全体のサイズを算出する必要があります。
サイズの調整が上手くできなかったり、画面からはみ出してしまうこともあるので理解しておきましょう。

ボックス全体のサイズは、「contents + padding + border」で計算されますが、これを一つずつ計算するのは大変です。

そんな時に便利なのが「box-sizing」プロパティです。

「box-sizing: border-box」を使うと、widthやheightで指定したサイズにpaddingとborderを含めてくれるので、全体のサイズが思い通りになりやすく、デザインが簡単になります。

box-sizingの値は3つありますが、paddingとborder領域を含めて指定できる「border-box」だけ覚えておけば問題ないでしょう。

要素の表示方法/レイアウトに関するプロパティ

要素の表示方法を調整するプロパティです。

  • 表示形式：display（block/inline/inline-block/none）
    HTML要素はそれぞれ、ブロックレベル要素やインライン要素として表示されますが、このプロパティを使用することで、要素の表示方法を変更できます。
    block： 要素をブロックレベル要素として表示します。
    要素は通常、自動的に新しい行に配置され、親要素の幅いっぱいを占めます。
    inline： 要素をインライン要素として表示します。
    要素は前後の要素と同じ行に配置され、幅や高さを指定できません。
    inline-block： 要素をインラインブロック要素として表示します。
    要素は前後の要素と同じ行に配置されながら、幅や高さを指定できます。
    none： 要素を非表示にします。
    ドキュメント上では要素が消え、レイアウトからも削除されます。

    See the Pen 268_基本のプロパティを覚える1_013（display: block / inline / inline-block / none） by Yugo Harima (@yh-dezadezi) on CodePen.

以上が「基本のプロパティを覚える1」の説明でした。
次は、flexとgridについて学びます。あと少しですので、引き続き頑張りましょう。

次のステップで、「基本のプロパティを覚える2」について説明していきます。

CSSの基本

全 6 動画
  • CSSの書き方

    CSSの書き方

    03:45
  • ブラウザで表示

    ブラウザで表示

    01:23
  • 基本のプロパティを覚える1

    基本のプロパティを覚える1

    08:03
  • 基本のプロパティを覚える2

    会員限定 基本のプロパティを覚える2

    03:24
  • classとは

    classとは

    02:06
  • リセットCSS

    会員限定 リセットCSS

    01:16
次のコースへ

パーツのコーディング