# 実務でよく使うCSSプロパティ `html_and_css`ディレクトリに、`part6`ディレクトリを作り、以下のようにディクトリとファイルを作成しましょう。normalize.cssは[ノーマライズCSS](https://ryos-organization-1.gitbook.io/happiness-chain/html-css/nmaraizucss)のセクションで紹介したものをダウンロードして格納しましょう。 ``` part6/ css/ normalize.css styles.css index.html ```

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Document</title>
  </head>
  <body></body>
</html>

このセクションでは、以下のプロパティを紹介します。 * [color、background-color](#color-background-color) * [border](#border) * [padding、maring](#padding-margin) * [box-shadow](#box-shadow) * [width、height](#width-height) * [font-size、font-weight、text-align](#font-size-font-weight-text-align) * [display](#display) ## color、background-color **color**は文字色、**background-color**は背景色のプロパティです。 divタグを追加して、cssを当てましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="color-box">
      <p>colorとbackground-color</p>
    </div>
  </body>
</html>

.color-box {
    color: blue;
    background-color: yellow;
}

ブラウザで確認すると、以下のように文字色と、背景色が指定した色に変化するかと思います。

色の指定の仕方に関してですが、以下の4種類の指定方法があります。 * キーワード * RGB * 16進数カラーコード * HSL #### キーワード上記で記載したように、`blue` `yellow`のように固有名詞で指定する方法です。代表的な色に関しては、キーワードで指定することができます。 #### RGB **Red**、**Green**、**Blue**の頭文字で、各色の度合いを256段階で指定するもので、`rgb(12, 25, 125)`のように記載すれば、Redが12、Greenが25、Blueが125の色を混ぜた色になります。ちなみに`rgb(0, 0, 0)`が黒、`rgb(255, 255, 255)`が白になります。 #### 16進数カラーコードこちらは、上記のRGBの概念を16進数で表したもので、例えば`rgb(12, 25, 125)`を例にすると、 Redの`12`を16進数で表すと`c`になります。 (16進数については、[こちら](https://wa3.i-3-i.info/word1610.html)の記事が参考になるかと思います。) 同様にGreenの`25`は`19`、Blueの`125`は`7d`になります。 (10進数の255までの数字は、16進数で2桁で表見することができます。) この数字をRGBの順で、各値を0埋め2桁で表現し、前方にシャープをつけて `#0c197d`という文字列になります。ちなみに黒は`#000000`、白は`#ffffff`となります。 #### HSL こちらはHue(色相)、Saturation(彩度)、Lightness(明度)の３つを指定するもので、色相は0°〜360°、彩度、明度は0%\~100%で表現するので、`hsl(125°, 50%, 25%)`のように記述します。こちらに関しては、詳細な説明は省略します。 4種類の指定方法を説明しましたが、実務ではよく16進数カラーコードで記載することが多いかと思います。カラーコードはブラウザで「color picker」と検索して、表現したい色のカラーコードを取得することができます。 ## border 要素を線で囲みたい場合は**borderプロパティ**を使います。 **borderプロパティ**に指定する値は、**線の太さ**、**線の種類**、**色**で、各値を半角スペースで区切ります。 `border: 5px solid black`の場合は、線の太さが5pxで、線の種類が実線、色が黒ということになります。線の種類は他にも、dotted(点線)、dashed(二重線)等があります。下記の記述を追加しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="color-box">
      <p>colorとbackground-color</p>
    </div>
    <div class="border-box">
      <p>border</p>
    </div>
  </body>
</html>

.color-box {
    color: bulue;
    background-color: yellow;
}

.border-box {
  border: 5px solid black;
}

ブラウザで以下のように、確認できるかと思います。

また、一部分のみ線を引きたい場合は、**border-top、border-bottom、border-left、border-right**を使いましょう。 ```css .border-box { border-bottom: 5px solid black; } ``` 上記のように指定した場合、下線のみになります。

また、角を丸める場合は、**border-radius**を使用しましょう。指定したpx分、角を丸めることができます。

...
.color-box {
    color: bulue;
    background-color: yellow;
}

.border-box {
  border: 5px solid black;
  border-radius: 20px;
}
...

## padding、margin 要素の外側に余白を入れたい場合は、padding、marginを使いましょう。その前に、前セクションで説明したボックスモデルに関して、実際にページ上でボックスはどんな構成になっているのか説明します。ボックスは以下のような構成になってます。

まず、1番内側には、**コンテンツ領域**があります。こちらは内容が表示される部分になります。その外側に**padding**があるのですが、こちらは一旦飛ばして、その外側に**border**があります。 **border**は、線を囲む場合の領域になります。borderを指定していない場合は、borderの領域はありません。 **padding**と**margin**の違いは、**borderの内側か、外側か**ということになります。以下の記述を追加しましょう。

 ... 
    <div class="border-box">
      <p>border</p>
    </div>
    <div class="padding-margin-box">
      paddingとmargin
    </div>
  ...

...
.border-box {
  border: 5px solid black;
  border-radius: 20px;
}

.padding-margin-box {
  border: 5px solid black;
  padding: 40px;
  margin: 80px;
}
...

ブラウザにて、borderの内側が40px、borderの外側が80px分余白ができたかと思います。

**padding**、**marigin**の指定に関して、上下左右の値をそれぞれ変えたい場合は、 **上、右、左、下**の順で記載することができ、`padding: 10px 20px 30px 40px`の場合は、上10px、右20px、左30px、下40pxになります。もし、上下と左右がそれぞれ同じ値の場合は、まとめることができ、 `padding: 20px 40px`と記載した場合は、上下が20px、左右が40pxとなります。また、左側のみにpaddingを当てたい場合は、`padding-left: 20px`のように記載することができます。実務では、よく`margin: 0 auto`という記述を使うことがあります。これは、**コンテンツ幅**をウィンドウ幅いっぱいにせず、左右に空白を開ける際に、記述します。その際に、`width: 1080px`と記述して、コンテンツ幅を指定してセットで記述することが多いです。

## box-shadow 影をつけたい場合は、**box-shadow**を使いましょう。 box-shadowに指定する値は、**横軸方向の位置**、**縦軸方向の位置**を指定するので、 `box-shadow: 10px 10px`のように記述します。横軸方向の位置は10pxだと、右方向に10px、-10pxだと、左方向に10px、縦軸方向の位置は10pxだと、下方向に10px、-10pxだと、上方向に10pxになります。さらに、**ぼかしの度合い、色**を指定することができ、位置の値に続けて、 `box-shadow: 10px 10px 5px gray`のように記述します。下記の記述を追加しましょう。

...
.color-box {
    color: bulue;
    background-color: yellow;
}

.border-box {
  border: 5px solid black;
  border-radius: 20px;
  box-shadow: 10px 10px 5px gray;
}
...

ブラウザにて以下のように確認できるかと思います。

## width、height 要素の幅や、高さを変更したい場合は、**width**と**height**を使います。下記の記述を追加しましょう。

...
    <div class="padding-margin-box">
      paddingとmargin
    </div>
    <div class="width-height-box">
      <p>widthとheight</p>
    </div>
  </body>
...

...
.padding-margin-box {
  border: 5px solid black;
  padding: 40px;
  margin: 80px;
}

.width-height-box {
  background-color: green;
  width: 500px;
  height: 500px;
}
...

ブラウザにて、幅500px、高さ500pxの要素が確認できるかと思います。

上記にて値をpxにて指定しましたが、実務では、widthは**%**、heightは**vh(view height)**を使うことがよくあります。 `width: 50%`と指定すると、ウィンドウ幅50%の表示になります。 `height: 100vh`と指定すると、ウインドウの高さの100%の表示になります。以下のように記述を修正しましょう。

...
.padding-margin-box {
  border: 5px solid black;
  padding: 40px;
  margin: 80px;
}

.width-height-box {
  background-color: green;
  width: 50%;
  height: 100vh;
}
...

ブラウザで確認すると、要素がブラウザ幅の半分で、ブラウザの高さいっぱいになったかと思います。

## ## font-size、font-weight、text-align 文字の大きさは**font-size**、文字の太さは**font-weigh**tを使用します。 **font-weigh**tは`100`から`900`まで100刻みで指定でき、数字が大きほど太くなります。また、`normal` `bold`のキーワードを指定することができます。下記の記述を追加しましょう。

...
    <div class="width-height-box">
      <p>widthとheight</p>
    </div>
    <div class="font-box">
      <p>font-sizeとfont-weight、text-align</p>
    </div>
...

...
.width-height-box {
  background-color: green;
  width: 50%;
  height: 100vh;
}

.font-box {
  font-size: 40px;
  font-weight: bold;
}
...

ブラウザで以下のように確認できるかと思います。

文章の配置を変更したい場合は、**text-align**を使用しましょう。 **text-align**は`left`、`right`、`center`を指定することができます。以下の記述を追加しましょう。

...
.font-box {
  font-size: 40px;
  font-weight: 900;
  text-align: center;
}

...

ブラウザにて以下のように文章が中央に配置されたかと思います。

## display 前セクションで説明したボックスモデルに関して、タグによってブロックボックスか、インラインボックスか決まっていると説明しましたが、それを変更することができます。 * インラインボックスをブロックボックスにする場合は、`block` * ブロックボックスをインラインボックスにする場合は、`inline` また、**inline-block**というボックスに変更することができます。 **inline-block**というのは、インラインとブロックの中間的なボックスで、 **横並び**になるのですが、**widthやheight、paddingやmarginを変更することができます**。また、`none`を指定すると、その要素は表示されなくなります。 ## display: flex そして、実務では**flex**をよく使います。 **flex**を指定すると、指定した要素の**子要素**が並列になります。典型的な使用例として、下の写真のようなヘッダーのナビゲーションを作るとします。

下記の記述を追加しましょう。

...
    <div class="font-box">
      <p>font-sizeとfont-weight、text-align</p>
    </div>
    <ul　class="nav">
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
    </ul>
...

このままだと、liタグはブロックボックスであり、縦並びに表示されてしまうかと思います。

上記の問題を解消するために、ulタグに`display: flex`を指定すると、その直下の要素であるliタグを横並びにすることができます。また、**gapプロパティ**を指定すると、横並びにした要素の間を指定した分、スペースを開けることができます。

...
.font-box {
  font-size: 40px;
  font-weight: 900;
  text-align: center;
  display: in;
}

.nav {
  display: flex;
  gap: 40px;
}
...

新たに`display: flex`の要素を作りましょう。

...
    <ul class="nav">
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
    </ul>
    <div class="justify-box">
      <div class="justify-left-box">左側の要素</div>
      <div class="justify-right-box">右側の要素</div>
    </div>
...

...
.nav {
  display: flex;
  gap: 40px;
}

.justify-box {
  display: flex;
  gap: 40px;
}

.justify-left-box {
  background-color: red;
  width: 50%;
  height: 40vh;
}

.justify-right-box {
  background-color: blue;
  width: 15%;
  height: 80vh;
}
...

ブラウザにて以下を確認することができるかと思います。

こちらに関して、横並びにした要素が左によっているかと思いますが、こちらを中央に寄せたい場合は、 **justify-contentプロパティ**に`center`を指定します。

...
.justify-box {
  display: flex;
  gap: 40px;
  justify-content: center;
}
...

上記にて、以下のように中央に寄ったことが確認できるかと思います。

コンテンツを左右いっぱいに配置したい場合は、`space-between`を指定します。

...
.justify-box {
  display: flex;
  justify-content: space-between;
}
...

上下方向に関して、要素を中央に合わせたい場合は、**align-itemsプロパティ**に`center`を指定します。

...
.justify-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
...

また、新たに`display: flex`の要素を作りましょう。

...
    <div class="justify-box">
      <div class="justify-left-box">左側の要素</div>
      <div class="justify-right-box">右側の要素</div>
    </div>
    <div class="flex-wrap-box">
      <div class="flex-wrap-item">item1</div>
      <div class="flex-wrap-item">item2</div>
      <div class="flex-wrap-item">item3</div>
      <div class="flex-wrap-item">item4</div>
    </div>
...

...
.justify-right-box {
  background-color: blue;
  width: 15%;
  height: 80vh;
}

.flex-wrap-box {
  display: flex;
}

.flex-wrap-item {
  width: 30%;
  height: 200px;
  border: 1px solid brown;
}

上記の場合、4つ子要素の幅が30%で、合計で120%となり、ブラウザからはみ出すかと思いますが、ブラウザで確認すると、100%に収まるように、各子要素をよしなに縮小しています。

もし、幅を超える場合に、その子要素を折り返したい場合は、**flex-wrapプロパティ**に、`wrap`を指定しましょう。

...
.justify-right-box {
  background-color: blue;
  width: 15%;
  height: 80vh;
}

.flex-wrap-box {
  display: flex;
  flex-wrap: wrap;
}

.flex-wrap-item {
  width: 30%;
  height: 200px;
  border: 1px solid brown;
}

そうすると、以下のように折り返して表示させることができます。