スキルアップをしたい！CSSを学ぶ

はい、colorful beansです。

今回の記事では、CSSについて学んでいきたいと思います。

CSSの概要
CSSでできること
1. 文字の色や大きさ、フォント、行間、影などの装飾
2. 写真を横に並べ、写真の間に余白を作る
画面サイズの調整
CSSの重要性

CSSの概要

CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、HTMLやXMLなどで記述された文書の見た目やレイアウトを指定するための言語です。CSSを使うと、文字の色や大きさ、背景画像、マージンやパディングなどの余白、配置やアニメーションなどの効果を自由に設定できます。

前回のVSCodeで書いていますが、見出し（h1～h6）の文字を赤色にするとか、文字背景の色を指定するってことですね。

右側の『超初心者のビジュアルコードスタジオ作業日報の文字が白で背景を紫にしていますが、
この設定がCSSでコードを書いて実行したものです。（左側はHTMLのコードなんで）

2枚目の写真がCSSのコードです。

上の写真で、h1の箇所が白字の紫背景のコードですね。

1枚目の写真で、黒字で緑の背景がh2のコードになります。

CSSでできること

文字の色や大きさ、フォント、行間、影などの装飾
背景色や背景画像、グラデーション、ボーダーなどの設定
マージンやパディング、幅や高さ、位置や回転などのレイアウト調整
フレックスボックスやグリッドレイアウトなどの高度なレイアウトシステム
ホバーやクリックなどのユーザー操作に応じたスタイル変更
トランジションやアニメーションなどの動きの演出
メディアクエリやブレークポイントなどのレスポンシブデザイン
変数や関数、ネストなどのプログラミング的な機能
カスタムプロパティやカスタム要素などの拡張性
フィルターやブレンドモードなどの画像処理

これらはほんの一例で、CSSでできることはもっとたくさんありますが、代表的なものを10個上げてみました。

まだ実践してない装飾も沢山ありますね。。。

文字の色や大きさ、フォント、行間、影などの装飾

/* 文字の色を赤にする */
p {
  color: red;
}
/* 文字の大きさを24pxにする */
h1 {
  font-size: 24px;
}
/* 文字のフォントをメイリオにする */
body {
  font-family: "Meiryo", sans-serif;
}
/* 文字の行間を1.5倍にする */
p {
  line-height: 1.5;
}
/* 文字に影をつける */
h2 {
  text-shadow: 2px 2px 4px gray;
}

上記のようなコードをCSSに書くと、以下のような結果が表現できます。

自己紹介の見出し部分は太字の影付き

素人焙煎士・・・の文字は赤字に。

その他行間など書いたコードに間違いさえなければ表現が可能です。

全ては紹介しきれない（やってないことも多いので）ので、ご了承ください。

写真を横に並べ、写真の間に余白を作る

通常のリンクやimgで写真を表示をさせるのは比較的容易にできましたが、
この横に3枚の写真を並べるというのが、なかなかうまく実行できませんでした。

何度もやり直し、どうにか実現できましたが、その道のりはあまり覚えてない^^;

こんな感じですね。普通に写真を並べると写真同士がくっついて余白がないので、間に空白を入れて、中央に寄せ、みえやすくしています。

横に並べるコードが　display: flex;
中央寄せのコード　　justify-content: space-between;

写真間の余白のコード　.card:nth-child(2) {　
　　　　　　　　　　　　margin-right: 10px;
　　　　　　　　　　　　margin-left: 10px;
　　　　　　　　　　　　}
これは、カード要素のうち2番目のものに対して、右と左に10pxずつの余白を設定することを意味します。

このブログは指南書や教科書の意味で作成している訳ではありませんので、このくらいの説明にしておきます。

その他、気になるコードなどはググって調べてみてください。ネット上にいくならでも落ちておりますし、私のつたない説明より確実に実践できるでしょう。
あくまで、私の勉強過程を日記のように記しているブログになりますので、
ご了承のほど、よろしくお願いします。

画面サイズの調整

現在のCSSコードで覚えておきたいコード、使いこなせておきたいコードが、レスポンシブデザインではないでしょうか、これはサイトに訪れた皆様がどの端末をご利用になっているか？が重要になります。
PCであれば恐らくコードがなくてもほぼ見えるかと思いますが、携帯・スマホですと画面サイズがかなり小さくなり、PC用のサイズで構成されたサイトは非常に見にくく、扱い難いことになります。
更には、iPadのような中サイズと言っていいのかな？そのサイズとスマホもまた違うので、
使用端末の画面サイズに合わせて、サイトのサイズ・見え方を自動的に調整してくれるコードです。

めっちゃ便利！！なんて優秀な機能なんでしょうか？
何気なくスマホで見ていたけど、PC用・スマホ用とかって書かれているサイトもあるので、これをしってなるほど！！って感じです。

では、使い方やコードを紹介しておきましょう。

display: flexを使って、要素の幅を可能な限り最大で表示する方法。例えば、横並びのナビゲーションメニューを作る場合に便利です。
width: 100%とheight: autoを使って、画像の幅を画面幅いっぱいに合わせて高さも同じ比率で変更する方法。例えば、スライドショーなどの画像をレスポンシブに表示する場合に便利です。
vwという単位を使って、画面幅に応じてフォントサイズや余白などを変更する方法。例えば、どんな画面幅でも同じ比率で拡大・縮小するサイトを作る場合に便利です。
具体的なCSSコードは以下のようになります。

/* display: flexを使う例 */
.menu {
  width: 100%;
  display: flex;
  border: solid 1px #333;
}

.menu li {
  width: 100%; /* 可能な限り最大で表示 */
  background: #fff;
  border: solid 1px #333;
  text-align: center;
}

/* width: 100%とheight: autoを使う例 */
img {
  width: 100%;
  height: auto;
}

/* vwを使う例 */
/* 基準にする画面幅（デザインデータの幅） */
$defaultWidth : 375;

/* px → vw */
@function vw($size, $width: $defaultWidth) {
  @return (100 / $width) * $size * 1vw;
}

/* fontsize px → vw */
@mixin fontSize($size: 10, $width: $defaultWidth) {
  font-size: $size * 1px; /* vw非対応用 */
  font-size: vw($size, $width);
}

h1 {
  @include fontSize(24);
}

p {
  @include fontSize(16);
}

記事やチュートリアルの中でおすすめのものは、以下のようなものがあります。

レスポンシブデザインの正しい作り方【便利なテンプレートあり】：レスポンシブデザインの基本的な考え方やコーディング方法、便利なテンプレートやツールを紹介しています。
いま確認しておきたいレスポンシブWebサイトの最新デザイントレンドとテクニック：レスポンシブデザインにおける最新のデザイントレンドやテクニックを多数紹介しています。実際のサイト例も豊富に掲載されています。
レスポンシブデザインとは？メリットと作成時のポイントを解説：レスポンシブデザインのメリットや注意点、作成時の6つのポイントを解説しています。初心者にも分かりやすく説明されています。
レスポンシブデザインとは？アダプティブデザインとの違いやメリット・デメリットを解説：レスポンシブデザインとアダプティブデザインという2つの異なるアプローチについて、それぞれの特徴やメリット・デメリットを比較しています。どちらを選択するかについてもアドバイスがあります。

CSSの重要性

CSSの重要性は以下のようになります。

CSSは、HTMLで作成したWebページの見た目を装飾するための言語です。CSSを使うことで、文字の色や大きさ、レイアウトやアニメーションなど、Webページのデザインを自由に変更できます。
CSSは、HTMLと分離して記述することができます。これにより、HTMLの構造とCSSのスタイルを別々に管理できるため、コードの可読性やメンテナンス性が向上します。

また、同じCSSファイルを複数のHTMLファイルで共有することで、Webサイト全体のデザインを統一したり、変更したりすることが容易になります。

CSSは、Webブラウザによって解釈されて表示されます。これにより、Webページのデザインをブラウザの種類や画面サイズに応じて調整したり、ユーザーの好みに合わせてカスタマイズしたりすることができます。また、CSSはJavaScriptと連携して動的な動作を実現することもできます。

CSSを活用して、訪れてくれたお客様に快適にサイトを拝見してもらいたいのもですね。

今回の記事はここまでにしておきましょう！
内容が多すぎて、まとまりのある記事になっているのか不安ですが、

最後まで読んで頂き、ありがとうございました。

では。