フロントエンドを学び直す#2（CSS）

フロントエンドを学び直す#2（CSS）

コメント 0件のコメント

今回はCSSについて学んでいきます。

CSS入門

CSSとは

文書の見栄えを装飾するための言語。Cascading Style Sheets の略。

CSSの書き方

CSSには3つの書き方がある。

inline style

HTMLファイルの各要素に直接記述する方法。拡張性が低いため、非推奨。

<h1 style="color: purple">CSS入門</h1>
<button style="background-color: palegreen;">何かしらのボタン</button>

style要素

HTMLのheadに記述する方法。こちらも他のファイルに適用できないため、非推奨。

<head>
  <title>CSS入門</title>
  <style>
    h2 {
      color: palevioletred
    }
  </style>
</head>

CSSファイル

HTMLファイルとは別にCSSファイルを用意し、それを読み込む方法。複数ファイルに適用できるため、推奨。

<!-- index.html -->
<!-- CSSファイルを読み込む -->
<head>
  <link rel="stylesheet" href="app.css">
</head>
/* index.htmlと同じディレクトリにapp.cssを作成 */
h3 {
  color: paleturquoise;
}

CSSのセミコロン

CSSは終わりを表現する際に必ずセミコロンを書く。セミコロンを書き忘れるとCSSが適用されない。

h3 {
  color: paleturquoise;
}

色に関するプロパティ

color

文字色を指定する

h3 {
  color: red;
}

background-color

背景色を指定する

h2 {
  background-color: blue;
}

CSSのカラーシステム

名前付きの色

red, blue など色の名前で指定する方法。ただし、140色しか表現できないため、汎用性が低い。

h2 {
  background-color: blue;
}

RGB

光の3原色である Red, Green, Blue を指定する記述方法。

h2 {
  /* Red:128, Green:200, Blue:0 なので、緑っぽい色になる */
  background-color: rgb(128, 200, 0); 
}

16進数

Red, Green, Blue を16進数で表現する方法。

h2 {
  /* Red:67, Green:c9, Blue:7e */
  background-color: #67c97e;
}

テキスト関連のプロパティ

text-align

その要素に対する文字の位置を指定する

h1 {
  text-align: center; /* デフォルトでは左寄せだが、centerを指定すると真ん中になる */
}

h2 {
  text-align: right; /* 右寄せ */
}

font-weight

文字の太さを調節する

h1 {
  font-weight: normal; /* 一般的な太さ、h1の場合、デフォルトが太いので細くなる */
}

h2 {
  font-weight: bold; /* 太くなる */
}

h3 {
  font-weight: 400; /* 数値でも指定できる、通常の太さ、normalと一緒 */
}

h4 {
  font-weight: 700; /* 太め、boldと一緒 */
}

text-decoration

文字に線をつけたり外したりする

text-decoration-style

線の種類を変える

text-decoration-color

線の色を変える

h1 {
  text-decoration: underline; /* 下線 */
  text-decoration-style: double; /* 2重線 */
  text-decoration-color: #c96790;
}

h2 {
  text-decoration: overline; /* 上線 */
  text-decoration-style: wavy; /* 波線 */
}

h3 {
  text-decoration: line-through; /* 取り消し線 */
}

a {
  text-decoration: none; /* 線なし、アンカータグを外す */
}

line-height

1行の高さを指定する

p {
  line-height: 2; /* そのデフォルトのフォントの高さの2倍にする */
}

letter-spacing

文字と文字の間の広さを指定する

h1 {
  letter-spacing: 15px; /* 1文字の間が15px */
}

font-size

文字の大きさを指定する

h1 {
  font-size: 40px;
}

font-family

文字の種類を指定する。ブラウザごとに使えるフォントが違うため、カンマ区切りで複数設定しておくことができる。左側から優先度が高い。フォントファミリか総称ファミリを指定できる。

総称ファミリ

複数のフォント種類を集めた1つの総称。例えば、serif や sans-serif がある。

h1 {
  font-family: Arial, Helvetica, sans-serif; /* Arial → Helvetica → sans-serif */
}

CSSセレクターの世界

CSSセレクター

ユニバーサルセレクター

すべての要素に適用される

 /* すべての文字の色をピンクにする */
* {
  color: pink;
}

要素型セレクター

対象のすべての要素に適用

/* すべてのimgタグに適用 */
img {
  width: 100px;
  height: 200px;
}

セレクターリスト

複数の要素に一括で適用する

h1, h2 {
  color: magenta;
}

IDセレクター

特定のIDに対して適用する

/* id="singup"にcssを適用する */
#singup {
  color: #f1faee;
  background-color: #1d3557;
}

クラスセレクター

特定のクラスに対して適用する

/* class="complete"にcssを適用する */
.complete {
  color: green;
}

子孫セレクター

子孫のセレクターに対して適用、「子孫」なので直下ではなく階層が深くても適用される

/* <li>配下にある<a>に対して適用 */
li a {
  color: teal;
}

/* postクラス配下にある<a>に対して適用 */
.post a {
  color: red;
}

隣接セレクター

同じ親要素の子同士で直後のセレクターに適用

/* <h1>の直後の<p>に適用 */
h1 + p {
  color: pink;
}

直下セレクター

直下にある要素に適用

/* <div>直下にある<li>に適用 */
div > li {
  color: white;
}

属性セレクター

属性を指定して適用

この文字から始まる、この文字を含む場合、など様々な指定の仕方が可能

/* type属性がtextの<input>にすべて適用 */
input[type="text"] {
  width: 300px;
  color: yellow;
}

/* <a> 要素で href に "google" を含むもの */
a[href*="google"] {
  font-size: 2em;
}

擬似クラス

セレクターに付加するキーワードで、選択された要素に対して特定の状態を指定する。セミコロン1つが正式な書き方だが、セミコロン2つでも動作する。

:hover

マウスカーソルが当たった時（ホバーされた時）の挙動を指定する

/* ボタン要素がホバーされたら色を変える */
button:hover {
  background-color: #e63946;
  color: #f1faee;
}

:active

マウスがクリックされた時の挙動を指定する

a:active {
  background-color: aqua;
}

:checked

ラジオボタン、チェックボックスなどの要素がチェックされている時の挙動を指定する

input:checked {
  border: none;
  outline: 2px solid deeppink;
}

:nth-of-type

兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて指定する

/* <p> 要素の中で、3つ目の要素だけ選択 */
p:nth-of-type(3) {
  color: red;
}

/* <p> 要素の中で、4つごとに選択 */
p:nth-of-type(4n) {
  color: lime;
}

擬似要素

セレクターに付加するキーワードで、選択された要素の特定の部分にスタイルづけできる。セミコロン2つが正式な書き方だが、セミコロン1つでも動く。

::first-letter

一文字目だけに選択

/* 1文字目だけ100pxに変更する */
.post::first-letter {
  font-size: 100px;
}

::first-line

1行目だけ選択

/* 1行目だけ色を変える */
p::first-line {
  color: purple;
}

::selection

ハイライトされた時（マウスで文字をドラッグされた時）だけ選択

p::selection {
  background-color: blue;
  color: white;
}

CSSカスケード

定義する順番が要素に反映されるかどうかに関係がある。基本的には後に定義されたCSSが反映される。また複数のCSSファイルを読み込む場合は、後に読み込まれたCSSファイルが優先して適用される。

/* blueの方が後に書かれているので、redではなくblueが適用される */
h1 {
  color: red;
}

h1 {
  color: blue;
}

詳細度

どのCSSプロパティが要素に最も関係があるか、適用されるかをブラウザが決定する手段。複数のスタイル（同じプロパティ）が競合した場合、よりその要素と関係があるセレクターを持つスタイルが優先される。

ID > クラス・属性・擬似クラス > 要素型・擬似要素 の順で優先度が高い。

/* ID:0 クラス:0 要素型：2 → 詳細度:002*/
section p {
  color: teal;
}

/* ID:1 クラス:0 要素型:0 → 詳細度:100 */
#submit {
  color: olive;
}

/* ID:0 クラス:1 要素型:2 → 詳細度:012 */ 
/* nav要素にネストされたactiveクラスのついたa要素 */
nav a.activte {
  color: orange;
}

インラインスタイル

インラインスタイルで書かれたCSSは、IDより詳細度が高いため、そちらが優先される。ただし、非推奨。

important

important をつけると、どのCSSよりも優先される。ただし、詳細度を無視することになるため、非推奨。

.button {
  color: #f1faee !important;
}

CSSにおける継承（inheritance）

ある要素のあるプロパティに値が指定されなかった場合、親要素のプロパティが自動で適用されることを継承と呼ぶ。自分に最も近い親要素のプロパティの値が継承される。また、プロパティには継承されるものと、されないものがある。

  • 継承されるものの例
    • color
  • 継承されないものの例
    • border

明示的な継承

継承されないプロパティでも、inherit と明示的に書けば、継承させることができる。

/* 第2レベルのヘッダーを緑色にする */
h2 {
  color: green;
}

/* サイドバーにあるものは、親の色を使用するようにする */
#sidebar h2 {
  color: inherit;
}

ボックスモデルと値の単位

ボックスモデル

HTMLの各要素はボックスになっており、その大きさや幅を指定することができる

width

要素の幅を決定する

height

要素の高さを決定する

div {
  width: 200px;
  height: 300px;
}

border

枠線の設定をする。border プロパティは、色、太さ、線の種類などを一括で設定できる。

border-radius

線の丸みを定義する

#three {
  background-color: cadetblue;
  border: solid red 4px;
  border-radius: 50%;
}

/* 上と同じ内容だが個別に書くこともできる */
#three {
  background-color: cadetblue;
  border-style: solid;
  border-color: red;
  border-width: 4px;
  border-radius: 50%;
}

padding

パディング領域（コンテンツと境界との間の領域）の幅を指定する

/* 上下左右、すべてに適用 */
h1 {
  padding: 30px;
}

/* 上下 | 左右 の順に適用 */
h2 {
  padding: 30px 40px;
}

/* 上 | 左右 | 下 の順に適用 */
h3 {
  padding: 10px 30px 5px;
}

/* 上 | 右 | 下 | 左　の順に適用 */
h4 {
  padding: 5px 1px 0 2px;
}

margin

マージン領域（要素の外側の上下左右の4つの空間）の幅を指定する

/* ブラウザがデフォルトで設定するマージン領域をなくす */
body {
  margin: 0
}

/* 上下左右、すべてに適用 */
h1 {
  margin: 30px;
}

/* 上下 | 左右 の順に適用 */
h2 {
  margin: 30px 40px;
}

/* 上 | 左右 | 下 の順に適用 */
h3 {
  margin: 10px 30px 5px;
}

/* 上 | 右 | 下 | 左　の順に適用 */
h4 {
  margin: 5px 1px 0 2px;
}

box-sizing

要素の全体の幅と高さをどのように計算するのかを設定する。

html {
  /* borderおよびpadingを、widthおよびheightの中に収める */
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

displayプロパティ

要素をブロックボックスとインラインボックスのどちらとして扱うか、また、その子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

inline

width と height は指定できない。 margin と padding は水平方向に効くが、垂直方向には効かない。

block

要素の前後で改行を生成する。width, height, margin, padding を指定できる。

inline-block

inline要素のように振る舞うが、width, height, margin, padding も指定できる。

/* inline-blockを適用 */
p {
  background-color: rgb(138, 127, 255);
  width: 100px;
  height: 100px;
  display: inline-block; 
}

/* 要素をブラウザから非表示にする */
button {
  padding: 5px 20px;
  display: none;
}

CSSにおける単位

相対単位

何かしらの要素の相対で決まる単位

percentage

親要素からの相対値や対象要素からの相対値で大きさが決まる

/* 親要素からの相対値 */
div {
  background-color: red;
  width: 70%;
  height: 20%;
}

/* 自身の要素からの相対値 */
h1 {
  font-size: 40px;
  border: 1px solid black;
  line-height: 200%; /* 80pxと一緒 */
}

em

font-size であれば、1em は親要素の font-size と同値となる。2em であれば、親要素の2倍の値となる。width など他のプロパティの場合、1em は対象要素自身の font-size と同値となる。

button {
  font-size: 1em;
  padding: 0 1em;
  border-radius: 0.5em;
}

rem

ルート要素の font-size を基準とした相対値。扱いやすいことが多い。ルート要素の font-size が20pxであれば、1remは必ず20pxとなり、2remは必ず40pxとなる。ネストされた要素などは em ではなく rem を使った方が扱いやすい。

#rem ul {
  font-size: 1.2rem;
}

その他のCSSプロパティ

不透明度とアルファチャンネル

アルファチャンネル

アルファチャンネルを指定することで、要素の背景色の不透明度を変更できる。要素自体の不透明度が変わるわけではないので注意。 rgba(red, green, blue, alpha) の最後がアルファチャンネル。

/* 不透明度100%, 透過しない */
#rgba {
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 255, 1);
}

/* 不透明度50%, 半透明に見える */
#rgba {
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* 不透明度0%, 完全に透明になる */
#rgba {
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0);
}

/* 16進数でも不透明度を指定できる */
#rgba {
  width: 50%;
  height: 50%;
  background-color: #f2a4bfc3; /* c3が不透明度の指定 */
}

opacity

要素自体の不透明度を変更する。1が不透明、0が透明。要素自体を透明にするため、文字やボタンも透明になる。

#opacity {
  width: 50%;
  height: 50%;
  background-color: yellow;
  opacity: 0.8;
}

Position

文書内で要素がどのように配置されるかを設定する。

static

デフォルトは static 。top などのプロパティは効果がない。

#static #middle {
  position: static;
  top: 50px; /* staticなのでtopを設定しても効果がない */
}

relative

自分自身からの相対位置で配置される。

/* 自身の要素からtop50%の位置に配置される */
#relative #middle {
  position: relative;
  top: 50px;
}

absolute

ページレイアウト内にこの要素のための空間が作成されない。この要素に直近の位置指定（positition指定）されている祖先があればそれに対して、そうでなければ、初期の包含ブロックに対して相対配置されます。

/* 直近の親要素に position 指定があれば、親要素に対してtop 50px,left 50pxの位置に配置される */
/* 直近の親要素に position 指定がなければ、初期ブロックである body に対しての相対位置に配置される */
#absolute #middle {
  position: absolute;
  top: 50px;
  left: 50px;
}

fixed

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されない（ absolute と一緒）。要素は最初の包含ブロック（視覚メディア要素の場合はビューポート）から相対的に配置される。簡単にいうと、今見えているページの相対位置で表示場所が決まる。そのため、トップの navigation など、スクロールしても常に表示されてほしいブロックに対して適用されることが多い。

/* スクロールしても常に画面左上に表示される設定 */
#fixed #middle{
  position: fixed;
  top: 0;
  left: 0;
}

トランジション

要素の 2 つの状態間の変化を定義するためのもの。例えばある要素を四角形から円形にするのに瞬時ではなく、何秒かかけて変化させたい時などに使える。また変化するプロパティ名を指定でき、後から追加したプロパティが予期せずトランジションの適用を受けないために、プロパティ名を指定した方が良い。

イージング関数とは、数値が変化する速度を記述する数学的な関数のこと。例えば、 ease-in が設定されていると、補間がゆっくり始まり、その後次第に加速していき、最終状態に達するとアニメーションは突然停止する。

.circle {
  width: 300px;
  height: 300px;
  background-color: blueviolet;
  /* プロパティ名 | 再生時間 | イージング関数 */
  transition: background-color 1s ease-in, border-radius 2s;
}

トランスフォーム

与えられた要素を回転、拡大縮小、傾斜、移動することできる。子要素に対しても適用される。指定できる関数はいくつかある。

  • matrix : 2D の同次変換行列を記述
  • perspective : ユーザーと z=0 平面との間の距離を設定
  • rotate : 要素を 2D 平面上で特定の点を中心に回転
  • scale : 要素を 2D 平面上で拡大または縮小
  • skew : 要素を 2D 平面上で歪ませる
  • translate : 要素を 2D 平面上で平行移動
h3:nth-of-type(2) {
  transform: scale(2, 0.5);
}

background

色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定できる。下記の値を一括で指定できる（他にも設定できる値はある）。

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-size
section {
  /* 背景画像の読み込み、リピートするか、位置の指定、サイズの指定 */
  /* プロパティの記載順序ni特に決まりはない */
  background: url("https://beiz.jp/images_P/tree-woods/tree-woods_00002.jpg") no-repeat left/contain;
}

/* 上と同じ内容を個別プロパティで書いた場合 */
section {
  background-image: url("https://beiz.jp/images_P/tree-woods/tree-woods_00002.jpg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
}

Google Fonts

1000種類以上のフォントを無料でインストールして使うことができる。ユーザのブラウザにフォントがなくても表示できるため、よく使われる。

参照： https://fonts.google.com

レスポンシブCSSとflexbox

flexboxとは

項目を行または列にレイアウトするための1次元のレイアウト方法。大きさのわからない要素同士でも、空間をどのように使って要素を配置するのか柔軟に調整できるのが強み。display: flex を指定すると、フレックスボックスが使える。フレックスボックスには、主軸（rowなら横軸、columnなら縦軸）と交差軸（rowなら縦軸、columnなら横軸）の2つの概念がある（順序としては左から右がデフォルト、上から下がデフォルト）。

flex-direction

主軸の方向や向きを定義することにより、フレックスコンテナ内でフレックスアイテムを配置する方法を設定する。デフォルトは row 。

#container {
  display: flex;
  /* 主軸（横軸）に並べる */
  flex-direction: row;
}

#container {
  display: flex;
  /* rowの逆順 */
  flex-direction: row-reverse;
}

#container {
  display: flex;
  /* 交差軸（縦軸）に並べる*/
  flex-direction: column;
}

#container {
  display: flex;
  /* columnの逆順 */
  flex-direction: column-reverse;
}

justify-content

フレックスコンテナの主軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義する。デフォルトは start 。

#container {
  display: flex;
  /* アイテムを先頭に寄せる */
  justify-content: start;
}

#container {
  display: flex;
  /* アイテムを中央に寄せる */
  justify-content: center;
}

#container {
  display: flex;
  /* アイテムを末尾に寄せる */
  justify-content: end;
}

#container {
  display: flex;
  /* 各アイテムを均等に配置し
     先頭と末尾の間隔は、各アイテムの間隔の
     半分の大きさになる */
  justify-content: space-around;
}

#container {
  display: flex;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
}

#container {
  display: flex;
  /* 各アイテムを均等に配置し
     先頭と末尾と各アイテムの周りには、
     同じ大きさの間隔を置く */
  justify-content: space-evenly;
}

flex-wrap

フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定する。

#container {
  display: flex;
  flex-direction: row;
  /* 単一行に配置、フレックスコンテナから溢れることもある */
  flex-wrap: nowrap;
}

#container {
  display: flex;
  flex-direction: row;
  /* 複数行に分割 */
  flex-wrap: wrap;
}

#container {
  display: flex;
  flex-direction: row;
  /* 複数行に分割だが、順番はwrapと逆 */
  flex-wrap: wrap-reverse;
}

align-items

交差軸方向のアイテムの配置を制御する。

#container {
  display: flex;
  flex-direction: row;
  /* アイテムを中央付近にまとめる */
  align-items: center;
}

#container {
  display: flex;
  flex-direction: row;
  /* アイテムを先頭にまとめる */
  align-items: start;
}

#container {
  display: flex;
  flex-direction: row;
  /* アイテムを末尾にまとめる */
  align-items: end;
}

#container {
  display: flex;
  flex-direction: row;
  /* ベースライン（テキストの下の部分）に配置する */
  align-items: baseline;
}

align-content

フレックスボックスの交差軸の内部のアイテムの間または周囲の空間の配分方法を設定する。単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果はない。

#container {
  display: flex;
  flex-wrap : wrap;
  /* アイテムを中央に寄せる */
  align-content: center;
}

#container {
  display: flex;
  flex-wrap : wrap;
  /* アイテムを先頭に寄せる */
  align-content: start;
}

#container {
  display: flex;
  flex-wrap : wrap;
  /* アイテムを末尾に寄せる */
  align-content: end;
}

#container {
  display: flex;
  flex-wrap : wrap;
  /* アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  align-content: space-between;
}

#container {
  display: flex;
  flex-wrap : wrap;
  /* アイテムを均等に配置し
     各アイテムの両側に半分の大きさの
     間隔を置く */
  align-content: space-around;
}

align-self

フレックスのアイテムの align-items の値を上書きします。ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto の場合、align-self は無視されます。フレックスボックス全体ではなく、個別のアイテムに適用する。

div:nth-of-type(3) {
  /* アイテムを中央付近に配置 */
  align-self: center;
}

div:nth-of-type(3) {
  /* アイテムを起点に配置 */
  align-self: start;
}

div:nth-of-type(3) {
  /* アイテムを末端に配置 */
  align-self: end;
}

flex-basis

フレックスアイテムの主要部分の初期の寸法を設定する。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義する。

#container div {
  flex-basis: 300px;
}

flex-grow

フレックスコンテナの主軸方向の寸法が、フレックスアイテムの主軸方向の寸法の合計よりも大きい場合、余った空間はフレックスアイテムに分配され、各アイテムが伸びる大きさは、コンテナーのすべてのアイテムのフレックス伸長係数の合計の割合で按分した値になります。

div:nth-of-type(1) {
  flex-grow: 2;
}

flex-shrink

すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。

div:nth-of-type(1) {
  flex-shrink: 2;
}

div:nth-of-type(5) {
  /* 0の場合は縮小しない */
  flex-shrink: 0;
}

flex

flex-basis , flex-grow , flex-shrink を一括で指定できるプロパティ。

#example .main {
  /* flex-grow | flex-shrink | flex-basis */
  flex: 2 1 600px;
  background-color: bisque;
}

#example .sidebar {
  /* flex-grow | flex-shrink */
  flex: 1 3;
  background-color: blueviolet;
}

#example .practice {
  /* flex-grow | flex-basis */
  flex: 1 200px;
  background-color: blue;
}

レスポンシブとメディアクエリ

レスポンシブ

1つのウェブサイトとCSSで複数のデバイスに対応したデザインを作成すること。

メディアクエリ

レスポンシブを実現する方法としてメディアクエリという手法がある。例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定したルールに一致する場合にのみ CSS を適用できる。他のCSSと同様に後に記載されたものが優先的に適用される。

ビューポート

現在表示されているコンピューターの画面のこと。画面で見えている範囲のことを指す。

/* 600px以上、800px以下の時、h1の色をperuにし、navのflexboxをカラムにする */
@media (min-width: 600px) and (max-width: 800px) {
  h1 {
    color: peru;
  }
  nav, nav ul{
    flex-direction: column;
    align-items: center;
  }
}

/* ビューポートが横長の時、背景色をaquamarineにする */
@media (orientation: landscape) {
  body {
      background-color: aquamarine;
  }
}

以上です。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です