Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@y-wanida(わに)inCLINKS株式会社

CSSの基本②　よく使用される装飾や配置のプロパティ

Posted at

本記事ではよく使用されるプロパティをご紹介します。
ここではわかりやすいように一部内部参照でHTMLファイル内にCSSを記載していきます。

色の指定

まず、CSSにおける色の指定方法は２種類あります。

・16進数でRGB(Red Green Blue)値を指定する方法　（例）「#0000FF」
・色の名前で指定する方法　（例）「red」

配色にこだわりたい場合などはRGB値を指定し、
赤や青、黒など、複雑な色ではない色を指定したいときは名前で記述したりします。

color

…色の指定に用いられるプロパティです。

example.html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>例</title>
    <link rel="stylesheet" href="example.css">
    <style>
      h1 {
      /*RGB値指定*/
        color: #0000FF;
      }
     /*色の名前で指定*/
      p {
        color: red;
      }
    </style>
  </head>

  <body>
    <h1>あいうえお</h1>
    <p>かきくけこ</p>
  </body>

</html>

画面上ではこのように文字の色が変更されます。
image.png

背景色の指定

先ほどは文字列の色を変更しましたが、CSSで背景色の変更も行うことができます。
色の指定方法は先ほどと一緒でRGB値の指定・色名での指定ができます。

background-color
…背景色の指定に用いられるプロパティです。

先ほどのソースコードのstyleタグ内に以下のように付け足してみます。

example.html
    <style>
      h1 {
        color: #0000FF;
        background-color: gray;
      }

      p {
        color: red;
        background-color: #fda000;
      }
    </style>

すると、下記のようにh1要素の背景を灰色に、p要素の背景をオレンジ色に変更することができます。
image.png

背景画像の指定

背景には色だけではなく画像も指定することができます。
画像の指定方法は以下のプロパティを使用します。

background-image
…背景画像の指定で使用するプロパティです。

まず使用したい画像をimagesフォルダ（フォルダ名は任意で作成してください）の中に配置します。

ソースコードのstyleタグ内のbackground-colorをコメントアウトし、
背景画像を指定するbackground-imageを記述してみます。

example.html
    <style>
      h1 {
        color: #0000FF;
        /* background-color: gray; */
        background-image: url(images/uroko_pattern_01_brown.png);
      }

      p {
        color: red;
        /* background-color: #fda000; */
        background-image: url(images/uroko_pattern_01_lightblue-300x300.png);
      }
    </style>

このように記載することで下記のように背景画像を指定することができます。
image.png

配置

次にオブジェクトの配置において使用されるプロパティについて解説していきますが、
まずCSSにおけるボックスモデルという概念から説明していきます。

ボックスモデル

…HTML要素のレイアウトやスペーシングを制御するための基本的な概念のこと。
下記４つの領域に分かれています。

画像2.png

コンテンツ領域（Content）

…青色の部分。
　要素の実際の内容が表示される部分。テキストや画像、入力欄などがここに含まれます。

パディング領域（Padding）

…緑色の部分。
　コンテンツ領域とボーダー領域の間にスペースを作ることができます。

ボーダー領域（Border）

…黄色の部分。
　要素の境界を定義することができます。

マージン領域 (Margin)

…橙色の部分。
　要素と他の要素との間にスペースを作ることができます。

マージンについて

まず一番外側のマージン領域を調整するプロパティについて解説していきます。
このようにマージンを指定します。

example.html
    <style>
      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        margin: 30px;
      }

      p {
        color: red;
        background-image: url(images/uroko_pattern_01_lightblue-300x300.png);
        margin: 10px;
      }
    </style>

このように１つ前の画面とは異なって、配置が変化します。
image.png

具体的に一体何が変化したのかDevToolで確認してみます。
image.png

「margin: 30px;」を指定したh1要素のボックスを確認すると上下左右に「30」という文字がついています。
このように指定することで上下左右のマージンの間隔を設定することができます。

ちなみに下記のような書き方で、上下左右それぞれの値をしていすることも可能です。

      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        margin: 30px 10px 20px 40px;
      }

このように４つの値でマージンを設定した場合は、
上：30px、 右：10px、 下：20px、 左：40pxとなります。
時計回りに設定されるというように覚えてください。

      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        margin: 30px 40px 10px;
      }

このように３つの値でマージンを設定した場合は、
上：30px、 左右：40px、下：10pxとなります。

      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        margin: 30px 40px;
      }

このように２つの値でマージンを設定した場合は、
上下：30px、 左右：40pxとなります。

マージンの相殺

…マージンを設定したのにも関わらず、マージンが増えない現象をマージンの相殺といいます。
　隣接するブロック要素間の垂直方向のマージンが一方に集約される現象です。

ではマージンの相殺とは具体的にどのようなものか画面で確認してみましょう。
ソースコードは以下のようにします。
h1要素にマージン100pxを下方向に、p要素にマージン90pxを上方向に設定し、画面を確認してみます。

example.html
    <style>
      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        margin-bottom: 100px;
      }

      p {
        color: red;
        background-image: url(images/uroko_pattern_01_lightblue-300x300.png);
        margin-top: 90px;
      }
    </style>

下記画像のように両方垂直方向にマージンが設定されていますが、
マージンが設定されている部分（橙色の部分）が重複しています。
この現象のことをマージンの相殺といいます。
image.png
image.png

【マージンの相殺発生条件の詳細と対処法】

この現象が発生する条件
・垂直方向のマージン
・隣接するブロック要素
・フロートや絶対位置指定がない場合

対処法
・パディングやボーダーを要素に追加することで相殺を防ぐことができる。
・FlexBoxを使用し、要素間のスペースを柔軟に管理するようにする。
　（このFlexBoxについては別の記事にて言及します）

パディングについて

次にパディングの設定方法を確認していきます。
上下左右の設定方法はmarginと同様です。
（padding-top,padding-bottomといった方法で設定することもできます）

example.html
    <style>
      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        padding: 20px;
      }

      p {
        color: red;
        background-image: url(images/uroko_pattern_01_lightblue-300x300.png);
        padding: 40px;
      }
    </style>

下記画像のように背景の範囲が広がりました。Devツールのボックスにもパディングが設定されているのが確認できます。
image.png

ボーダーについて

マージンとパディングの間にある領域のボーダーはその名の通り「線」のことです。
どのように設定するのか確認してみます。

ソースコードを下記のように記載します。

example.html
    <style>
      h1 {
        color: #0000FF;
        background-image: url(images/uroko_pattern_01_brown.png);
        padding: 20px;
        border: 10px solid #f3b94e;
      }

      p {
        color: red;
        background-image: url(images/uroko_pattern_01_lightblue-300x300.png);
        padding: 40px;
      }
    </style>

「border: 10px solid #f3b94e;」
ボーダープロパティを設定し、線の太さ（10px）、線の種類（solid）、配色（#f3b94e）の順に設定します。

すると画像のようにh1要素に線が引かれます。
image.png

ちなみに線の種類は様々なものがあり、例えば「solid」→「inset」へ変更すると下記のようになります。
image.png

まるで画面からへこんでいるような線を引くことができます。
このように用いて要素のボックスを装飾していくことができます。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?