学生向けのCSSの入門方法！概要や基本構文について解説

• 1. CSSとは
• 2. CSSを学習するメリットとは
• 3. CSSの記載方法
• 4. 学生におすすめの学習方法
• 5. まとめ
•  

1. CSSとは

まず、CSSの概要について紹介します。

CSSの概要

CSSはCascading Style Sheetsの略称であり、Webページのスタイルを指定するための言語です。「スタイル」とはWebページの見た目のことで、CSSによってWebページの見栄えを良くすることができます。
例えば、CSSを用いることでWebページに表示される文字の大きさや色を変えたり、背景を指定したりすることができます。

CSSとHTML、JavaScriptの役割の違い

Webページを作成するために利用される言語として、CSS以外にHTMLとJavaScriptが挙げられます。これらの役割の違いはどこにあるのでしょうか。

HTMLはWebページの文章構造を指定するものです。HTMLではタグという仕組みで構造を表現し、例えばtitleタグによってWebページのタイトルを定義したり、h1タグによって見出し文を表示したりすることができます。

また、JavaScriptはWebページを動的に操作する際に利用するものです。例えば、Googleマップにてマップを移動させたり拡大させたりする際に、裏側ではJavaScriptが動作しています。

CSSとHTML、JavaScriptをそれぞれの役割に応じて利用することで、現代的なリッチでデザイン性の良いWebサイトを作成することができます。

2. CSSを学習するメリットとは

CSSや関連するHTML、JavaScriptはWebサイトを作成する上での必須の技術であり、WebデザイナーやWebエンジニアを目指すのであれば必ず押さえておくべき技術です。これらを学習し習得することで、WebデザイナーやWebエンジニアとしての素養があると認識されるため、就職活動も有利に進めることができるでしょう。

また、CSSやHTML、JavaScriptはプログラミングの中でも視覚的にわかりやすく、習得が容易というメリットもあります。他の言語ではグラフィカルな表示を行うためには一定のスキルが必要となりますが、CSSやHTML、JavaScriptについては学習を開始してすぐにデザイン性の高い画面を表示できます。はじめてプログラミングを行う際に学ぶ対象としても、CSSや関連するHTML、JavaScriptはおすすめです。

3. CSSの記載方法

以下では、CSSの基本的な記載方法について解説します。

CSSの記述箇所

CSSはHTML文章中にstyleタグとして指定することもできますが、一般的には別途cssファイルを作成の上、HTML文章中のlinkタグもしくは@importにより読み込ませて利用します。以下では、両者の記載例を示します。

＜styleタグとして表示する例＞
htmlファイル

＜cssファイルを作成して読み込ませる例＞

cssファイル

htmlファイル

基本的な構文

CSSは、セレクタ、プロパティ、値の3つの要素から構成されます。以下の例では、h1がセレクタであり、colorがプロパティ、blueが値となります。下例の表記は、h1タグの色を青にしなさい、という指示内容を意味します。

セレクタ

セレクタとは、HTML文章中のどの箇所に装飾を施すか指定するものです。装飾箇所の指定方法として、HTMLタグを指定する方法、idを指定する方法、classを指定する方法の3通りで指定することができます。
idは、HTML文章中に1度のみ登場する固有箇所を指定するのに用います。一方で、classは複数個所で利用できる指定方法です。

＜HTMLタグを指定する方法＞

＜idを指定する方法＞

＜classを指定する方法＞

＜HTML文章中のidとclassの指定方法＞

プロパティと値

セレクタで指定したカッコ内に、対象の装飾内容を指定することができます。何を変更するかはプロパティとして、どのように変更するかは値として指定します。
例えば、以下の例ではHTML文章中に「emphasis」クラスと指定した箇所に対して、黄色かつ大きい文字で強調するようにプロパティと値を設定しています。

4. 学生におすすめの学習方法

書籍で学ぶ

CSSはWebサイトを作成する基本的な技術であるため、多くの入門書が存在します。CSSの学習難易度は低いため、書籍による学習でも取り組みやすいですが、上述の通りWebサイトを構築するためにはHTMLやJavaScriptといった複合的な知識が必要となります。これらを体系的に学習する場合には、後述するスクールを利用することもおすすめです。

Webのチュートリアルを利用する

CSSには様々な学習用チュートリアルサイトが存在します。チュートリアルに従って操作を行うことでCSSの学習ができますが、単純作業として漫然とこなすだけではスキルの習得に結びつきません。理解が深まるように実施内容を復習しながらこなすとよいでしょう。

プログラミングスクールを活用する

CSSは単体で利用することはできず、HTMLやJavaScriptと組み合わせて利用することが一般的です。これらをすべて独学することはハードルが高いため、プログラミングスクールを利用して体系的に学習することもおすすめです。

特に、CSSやHTML、JavaScriptには実用上の様々なテクニックが存在します。これらを書籍などで学ぶことには限界があるため、講師から教えてもらえるスクールの活用は有効といえるでしょう。

5. まとめ

CSSはWebサイトを作成する上で必須の技術です。Webデザイナーを目指すうえではもちろんですが、エンジニアとなる場合でも学習する価値がある技術です。CSSに加えて、関連するHTML、JavaScriptを学習しておくことで、就職活動において有利に働く可能性が高いです。まずは書籍やWebサイトを活用してCSSに触れてみるところからスタートし、本格的な学習を進める場合はプログラミングスクールの受講なども検討しましょう。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみる