Hello! Uchii.code
バナー画像

【CSS/Sass】未経験からフロントエンドエンジニアになる方法 #3

2023-08-30に公開

バナー画像

まえがき

今回の#3ではCSSのについて解説していきます。CSSはHTMLと並んでweb制作の基本スキルとなりますので必ず扱えるようにしておきましょう。ただ、HTMLよりも奥が深いので100%マスターすることはほぼ不可能です。それだけ可能性が無限大だと筆者は感じております。ただ、どんなサイトでもどんなシステムでも見た目を作るのはCSSですので、自分の思い通りのデザインを実現するためには必須となります。

今回の記事ではCSSの基本的な書き方から、レスポンシブ対応のテクニックまでご紹介します。特に、最後に紹介するテクニックはレスポンシブ対応を圧倒的に楽にしてくれるテクニックなので、ぜひ実践してみてください。

1.CSSとは

1-1.CSSとは何かを理解する

CSS(Cascading Style Sheets)は、ウェブページやウェブアプリケーションのデザインやスタイルを定義するための言語です。HTML(HyperText Markup Language)で構造を作成した後、CSSがそれらの構造に見た目やスタイルを付け加えます。つまり、HTMLがコンテンツの「何を」示すかを定義するのに対し、CSSは「どのように」表示されるかを制御します。ウェブページの魅力的な外観を実現するために、テキストのフォント、色、サイズ、レイアウト、間隔、背景、ボーダーなどの要素を指定できます。これにより、ユーザーエクスペリエンスを向上させ、サイトにプロフェッショナルな印象を与えることができます。

ウェブデザインにおいて、CSSは不可欠な役割を果たしています。HTMLがコンテンツの骨格を提供するのに対し、CSSはそのデザインをカスタマイズし、ユーザーが快適に情報にアクセスできるようにします。また、レスポンシブデザインの実現や異なるデバイスでの一貫性の確保などもCSSが担当します。ウェブデザイナーやデベロッパーは、CSSの力を借りてブランドのアイデンティティを反映させ、ユーザビリティを向上させることができます。CSSは、ウェブ上で美しさと機能性を両立させるための重要なツールであり、モダンなウェブデザインの基盤となっています。どんなwebサイトでも必ずHTMLとCSSから成り立っていることを確認してみましょう。

キーボードのF12もしくは、今開いているページのどこでもいいので右クリック→「検証」ボタンを押してください(GoogleChromeの場合)そうすると上記のような画面が出てくると思います。右上の部分はHTML、右下の部分にはCSSの内容が記述されています。

1-2.CSSの基本的な書き方を理解する

例えばHTMLのbody要素に白い背景をスタイルとして適用したい場合は以下のように記述します。

body {
  background-color: #ffffff; /* 背景を白にする */
}

さらにbodyの中にh1要素があり、その文字にスタイルを適用させたい場合は以下のように記述します。

body h1 {
  font-size: 32px;  /* 文字サイズを32pxにする */
  font-weight: bold;   /* 文字の太さとboldにする */
  color: #000000;  /* 文字の色を黒にする */
}

至って簡単に見えますが、これらを組み合わせることでさまざまな画面を作ることができるようになります。細かな学習は前回も紹介したProgateUdemyを活用していってください。

2.Sass(SCSS)とは

2-1.Sass(SCSS)とは何かを理解する

先程まではCSSについて解説しました。ではSassとはなんでしょうか。Sassは、CSSの拡張言語であり、効率的なスタイルシートの記述を可能にするツールです。Sassは、変数、ネスト、ミックスイン、継承などの機能を提供し、これによりスタイルの再利用や一貫性の維持が容易になります。一般的に、Sassはコンパイラを使用してSassコードを通常のCSSに変換します。これにより、ウェブブラウザが正しく解釈できる形式に変換され、ウェブページに適用されます。コンパイラに関しては以下の記事を参考に環境を整えてから次に進んでください

先ほどのコードを例にとって考えてみます。body要素の中にh1要素がありどちらにもスタイルを記述したい場合、以下のような記述に変わります。(Sassはscssファイルというファイル形式になります

body {
  background-color: #ffffff; // 背景を白にする

  h1 {
    font-size: 32px;  // 文字サイズを32pxにする
    font-weight: bold;  // 文字の太さとboldにする
    color: #000000;  // 文字の色を黒にする
   }
}  

これをネスト(入れ子構造)といい、body h1と記述していた部分が入らなくなっているのがわかると思います。少ない規模だとあまり便利さが実感できないですが、開発規模が大きくなればなるほど、この恩恵を受けられます。なので、使えるようになっておいて損はないです。

2-2.Sassを用いたファイル分割

開発規模が大きくなると、それだけcssの記述量も増えます。するとコードの可読性が落ち、修正箇所が発生した時に該当箇所を見つけるのが大変になります。そこで便利なのがsassによるファイル分割です。実装手順ですが、結論から申し上げます。

  • 全てを集約するstyle.scssを用意する
  • まとまりごとにフォルダを用意(今回はglobal)
  • フォルダの中に_index.scssを用意
  • 各scssファイルを_index.scssに集約

まずは全てのscssファイルを集約するstyles.scssファイルを作ります。続いてまとまりごとのファイルを用意します。(今回はglobalという名前で作成。)そして、style.scssの中に@use ‘フォルダ名’と記述します。複数フォルダを用意すればその分だけ同じように記述します。

続いてはglobalの中に_index.scssをいうファイルを用意します、このファイルは各フォルダの軸となるファイルで、ファイル名は決まっていますので変えないでください。最後に、_index.scssと同じ階層にコンポーネントごとやページごとに分けたscssファイルを記述し、_index.scssに@forward ‘任意のファイル名.scss’という形で記述します。

以上の手順で、cssでは1つに書いていたファイルを効率的に分割することができます。baseに関するcssは_base.scssに、base2に関するcssは_base2.scssに記述する流れです。

3.レスポンシブについて理解する

3-1.cssによるレスポンシブの書き方

今やスマホでの閲覧が当たり前になり必須となったレスポンシブ対応ですが、cssでのレスポンシブ対応は以下のような記述になります。

/* 通常のスタイル */
body {
  font-size: 16px;
}

/* メディアクエリを使用して画面幅に応じたスタイルを指定 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* さらに小さい画面幅に対するスタイル */
@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

このサンプルコードでは、通常の状態ではbody要素のフォントサイズを16pxとしています。しかし、画面幅が768px以下の場合には、メディアクエリ内の指定に従ってフォントサイズが14pxに変更されます。同様に、画面幅が480px以下の場合には、フォントサイズが12pxに変更されます。

このように、メディアクエリを使用することで、異なるデバイスや画面サイズに合わせてスタイルを調整することが可能です。レスポンシブデザインにおいては、このようなメディアクエリを駆使して、デバイスごとに最適な表示を提供することが重要です。

3-2.sassによるレスポンシブの書き方

sassも同じようにレスポンシブを書くことも可能ですが、もっと便利なやり方がります。それがmixinという記法です。改めて結論から申し上げます。

  • baseとなるファイルを用意する。
  • 任意のscssファイルでbaseの内容をimport(use)する
  • ネストの中にレスポンシブ時のスタイルを記述する

まず以下のようにベースとなるファイルに、ブレイクポイントを記述します。

$tab: 768px; // タブレット
$small: 480px; //ワイドスマホ

//タブレット
@mixin tab {
  @media only screen and (max-width: ($tab)) {
    @content;
  }
}
//ワイドスマホ
@mixin small {
  @media only screen and (max-width: ($small)) {
    @content;
  }
}

続いてbaseの内容を使いたい任意のファイルに以下のように記述し、gという名前で使えるようにimport(use)します
※gの部分はなんでも良いです

@use "../global" as g;

最後に_block.scssの中でgを使うと以下のようにレスポンシブが入れ子構造で書けます

@use "../global" as g;

body {
  font-size: 16px;

  @include g.tab {
    font-size: 14px; //768px以下で14px
  }

  @include g.small {
    font-size: 12px; //480px以下で12px
  }

}

まとめ

今回の#3では、CSSとSassに関する基本的な知識と実際の活用方法に焦点を当てました。まず、CSSがウェブページやアプリケーションのデザインとスタイルをどのように定義するかについて解説し、Sassの、ネスト、ミックスインなどの機能についても解説しました。さらに、レスポンシブデザインについても詳しく説明しており、画面幅に合わせたスタイルの指定方法を示しています。

このブログのポイントを3つにまとめました。

  • CSSとは見た目やスタイルを指定し、ユーザーエクスペリエンスを向上させる。
  • Sass(SCSS)とは変数やネスト、ミックスインなどを提供し、スタイルの再利用を容易にする。
  • レスポンシブデザインはcssでのメディアクエリと、sassでのmixinがある。

次回の#4ではjavascripとは何かについて解説していきたいと思います。まずは代表的な基本構文から解説していきますので、引き続き頑張っていきましょう。

G e t i n T o u c h