9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP(旧WEBCAMP PRO)。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!


CSSは、webページデザインやレイアウトなどのスタイルを定義するための言語です。CSSにはさまざまな機能や書き方がありますが、基本的な記述方法についてはそれほど難しくありません。

そこで、CSSの概要と初心者が最低限知っておきたい基本的な書き方について解説します。また、CSSを効率的に学ぶためのポイントについても紹介します。

CSSの役割とは?

アイパッドとアイフォン

CSSとは、「Cascading Style Sheets(カスケーディングスタイルシート)」の略で、単にスタイルシートとも呼ばれます。

webサイトを制作するときに、HTMLと一緒に使われます。
HTMLがタイトルや段落などの文書構造を定義する言語であるのに対し、CSSは主にwebページの見た目の部分を定義する言語です。
CSSを記述することで、文字の大きさや色などのデザイン、コンテンツの並べ方や余白サイズなどのレイアウトをカスタマイズすることができます。

スマートフォンやタブレットがすっかり普及した近年では、さまざまな画面サイズに対応するための「レスポンシブwebデザイン」や、複数のデバイスに対応可能なアプリ開発においても、CSSが重要な役割を担うようになりました。

 

どこに書けばいい?CSSの3つの記述方法

CSSは、webページのスタイルを定義するものなのでHTMLファイルの中で指定する必要があります。
書き方は3通りあり、サイトのページ数やコンテンツの量に応じて使い分けられます。

 

直接HTMLタグに記述する

もっとも基本的な書き方は、HTMLタグに直接CSSを記述する方法です。タグが示す範囲内にのみスタイルが適用されます。

例えば、段落を表すpタグにCSSを書けば、その段落だけ文字の色を変えたり枠で囲ったりできます。
CSSの適用範囲が明確なので、初心者はまずこの方法から試してみるとよいでしょう。
段落以外にも、画像を表すimgタグやリンクを表すaタグなど、ページを構成するほとんどのタグにスタイルを指定可能です。

 

styleタグを利用して記述する

2つ目の書き方は、styleタグを利用して記述する方法です。

HTMLタグに直接記述する方法だと、タグごとに何度も同じCSSを書かなければならない場合があります。
しかし、styleタグを用いることで、複数のHTMLタグに適用される共通のスタイルを一度にまとめて記述することができます。

例えば、pタグのスタイルを書けば、ページ内のすべての段落に同じスタイルが適用されます。
ある程度のコンテンツ量があるページなら、この方法を使うとよいでしょう。

 

外部ファイルを用意して記述する

webサイトを制作するときは、複数のページに同じスタイルを適用したい場合が多くあります。
その場合、styleタグを利用する方法だとすべてのページに同じCSSを書かなければなりません。

そこで、3つ目の書き方として外部ファイルを用意して記述する方法があります。
外部ファイルにはCSSだけを記述し、拡張子を「.css」にします。
スタイルを適用したい各HTMLファイル内に、linkタグを使ってそのCSSファイルを読み込ませれば、すべてのページを一貫したデザインで表示させることが可能です。

 

必須!CSSで覚えておきたい3つの基本要素

ディスプレイから飛び出す世界地図次に、CSSによるスタイルの指定方法についてみていきましょう。
例えば、段落にスタイルを適用したい場合に記述するもっとも基本的なCSSは「p { color: red; }」のような構文になります。
CSSの構文は「セレクタ」と「プロパティ」、そして「値」の3つの基本要素で構成されています。

 

セレクタ

「セレクタ」とは、ページ内のどのタグにスタイルを適用するかを指定するためのものです。
上の例では「p」の部分がセレクタにあたり、「スタイルを段落に適用する」ということを宣言しています。
これを「a」にすればリンク部分に、「h1」や「h2」にすれば見出し部分にスタイルが適用されます。

また、セレクタは組み合わせることで、特定の条件を満たすタグだけを選んでスタイルを適用することが可能です。
例えば「p a」というセレクタは「pタグの内側にあるaタグ」という意味になります。
なお、直接HTMLタグにCSSを記述する場合はセレクタは必要ありません。

 

プロパティ

「プロパティ」とは、適用するスタイルの種類を示すものです。
上の例では「color」の部分がプロパティにあたり、これは「表示色」を表しています。
他にもフォントサイズを表す「font-size」や文字の装飾を表す「text-decoration」、表示要素を囲む枠を表す「border」など、さまざまなプロパティがあります。

 

「値」は、プロパティにあてはめる指示内容です。
上の例では「red」の部分が値にあたり、これは「赤」を表しています。

値は必ずプロパティと組み合わせて書く必要があり、プロパティと値の間には「:(コロン)」を入れる決まりです。
また、最後に「;(セミコロン)」を書いて指示を終了させます。「color: red;」は、「表示色を赤くする」という指示をしているわけです。
これを「{(左中括弧)」と「}(右中括弧)」で囲みセレクタの後に記述すれば、スタイルが実際の表示要素に適用されます。

 

実際に書いてみよう!初心者が知っておきたいCSSの書き方

ここまで段落の文字の色を赤くする例についてみてきましたが、CSSではほかにどのようなことができるのでしょうか。
初心者が知っておきたいCSSの書き方について、さらにいくつかの例を紹介します。

 

文字色を変える

colorプロパティで指定できる値は、red以外にもたくさんあります。
yellowやgreen、limeやsalmonといった、色の名称(カラーネーム)を記述することで文字色を簡単に変えることができます。

例えば「a { color: salmon; }」と記述すればリンクテキストがサーモンカラーになります。
また、色は名称だけでなく、任意の色を表すRGB値や半透明色も表せるRGBA値16進数のカラーコードでも指定が可能です。
「h1 { color: rgb(0,0,255); }」と記述すれば大見出しが青くなります。

 

フォントサイズを変える

フォントサイズは、font-sizeプロパティで変更できます。
このプロパティの値は、パーセンテージやピクセル数などで指定することが可能です。
例えば「p { font-size: 200%; }」と記述すれば段落のフォントサイズが通常の2倍になり、「h1 { font-size: 40px; }」と記述すれば大見出しが40ピクセル分の大きさになります。

 

線を引く

text-decorationプロパティを使うと、文字に下線を引くことができます。
例えば「h1 { text-decoration: underline; }」とすれば大見出しに下線がつきます。
aタグによるリンクテキストにははじめから下線のスタイルがついていますが、「a { text-decoration: none; }」とすれば下線なしのスタイルに変更することも可能です。

また、表示要素の境界線を表すborderプロパティでも線を引くことができます。
例えば「h1 { border: solid 1px; }」とすれば、大見出しの周囲が太さ1ピクセルの線で囲まれます。

 

コメントアウトを書く

CSSでは、「/*」と「*/」で囲まれた部分はコメント扱いになります。

例えば以下のように、

.sample{
color: red;
font-size: 18px;
cursor: pointer; /*マウスのカーソルを指マークにする*/
}

この「/*」の間に何を書いてもスタイルとして適用されません。

この機能を使えば、記述が複雑な部分に説明を添えておいたり、一時的に無効にしたいスタイルを囲んで適用されないようにしたりといったことができます。

 

プロパティを複数指定する

プロパティは必ず値とセットで指定し、colorやfont-sizeなどのプロパティ名から始まってセミコロンで終わるまでが1セットです。
スタイルを記述する際には、これを中括弧の内側に複数セット書くことができます。

例えば「a { color: salmon; text-decoration: none; }」のように、複数指定が可能です。
ただし、プロパティはあまり並べて書きすぎると読みづらくなってしまいます。
CSSでは途中で改行やタブを入れてもよいことになっているので、改行を入れて1行に1つのプロパティを記述するなどのルールを決めておくとよいでしょう。

 

id名・class名でデザインの適用先を指定する

HTMLタグの属性で、idclassを指定しているのを見たことがあるという人もいるでしょう。
例えば「<h1 id="title">タイトル</h1>」や「<a class="more">もっと読む</a>」といったものです。
このようなタグには、特別なセレクタを使ってスタイルを適用できます。

idによるセレクタは、「#(シャープ記号)」の後にid名をつけて「#title」のように記述し、classによるセレクタはピリオドの後にclass名をつけて「.more」のように記述します。
また、「a.more」とすれば、「moreというclass名がついたaタグ」だけを抽出してスタイルを適用するなど、タグ名と組み合わせた高度な指定も可能です。

 

初心者がCSSの書き方を学ぶときのポイントとは?

CSSには、上記で紹介した以外にもさまざまな書き方や機能があります。
CSSを効率的に学習するためには、どうしたらよいでしょうか。

ここでは、初心者がCSSの書き方を学ぶときに心がけておくとよいポイントを紹介します。

 

基本的には外部ファイルを利用してCSSを記述する

CSSを外部ファイルにする方法には、サイト内のデザインを統一できるというだけでなく、メンテナンス性がよくなるという特徴もあります。
そのため、多くのwebサイトでCSSを外部ファイルとするルールが採用されています。

実践的なスキルを身につけるためには、CSSはHTMLファイルに直接埋め込まずに外部ファイルとして記述し、linkタグを使って読み込むことを習慣にするとよいでしょう。

 

コードの意味をしっかりと理解しながら勉強する

インターネット上には、CSSのサンプルコードが多数公開されています。CSSの書き方で迷ったときは、そういったものを参考にするのもよいでしょう。
しかし、webサイトのデザインにはたくさんのバリエーションがあり、CSSの書き方もサイトによってさまざまで、それを続けていると応用ができなくなってしまいます。

場合によっては、自分のwebサイトにコピーするだけで目的が達成できることもありますが、CSSを学びたいならコードの意味をしっかり理解して使うことが重要です。

 

プログラミングスクールも活用して勉強する

CSSには多くの機能があるため、学ぶべきこともたくさんあります。CSSの知識や技術を効率よく身につけるには質の良いサンプルコードに触れながら適切な順序で勉強をすすめていくことが大切です。

そのためには、プログラミングスクールを活用するのもひとつの方法です。
学習者向けにつくられたカリキュラムに沿って学んでいけるので、独学よりも実践的なスキルをずっと早く身につけられるでしょう。

 

CSSを学ぶ際のプログラミングスクールの選び方

やじるし

プログラミングスクールには、教室に通って講義形式で学ぶものもあれば、オンラインのカリキュラムを使ってひとりで勉強をすすめられるものもあります。
CSSを効率よく学ぶためには、どのような基準でプログラミングスクールを選ぶべきでしょうか。

 

HTMLやJavaScriptもあわせて学べるか

凝ったデザインをCSSで実現するためには、どうしてもidやclassを積極的に活用していく必要があります。idやclassを使うには、HTMLタグもあわせて記述しなければなりません。
また、コーポレートサイトでよく使われるスライドショーや、ゲームなどそのほか多くのwebアプリ開発においては、視覚的な効果を与えるためにCSSをJavaScriptのプログラムで制御する必要もでてきます。

そのため、より実践的なCSSのスキルを身につけるためには、HTMLやJavaScriptも一緒に学ぶことができるプログラミングスクールを選ぶことがポイントです。

 

講師にすぐ相談できる環境であるか

いつでも講師に相談できる環境であるかどうかも、プログラミングスクールを選ぶうえでの重要なポイントになります。

CSSを勉強していると、理解が追いつかない部分も少なからず出てくるものです。
つまずく箇所は人によって違うので、インターネットなどを使いひとりで解決しようと思っても、なかなかよい情報がみつからないこともあります。

わからないところが出てきてもアドバイスをもらいながら学習することができれば、効率的にスキルアップできるでしょう。

 

プログラミングスクールならDMM WEBCAMPがおすすめ!特徴は?

スキルアップのためにCSSを本格的に学びたいのなら、DMM WEBCAMPに通うのがおすすめです。
DMM WEBCAMPは、転職・就職保証型のプログラミングスクールです。
未経験や初心者の人でも短期間で実践的なエンジニアスキルを身につけることができるよう、より実務に近いカリキュラムが用意されています。
好きな時間に教室に通うことができ、講師にも質問し放題の環境が整っているので、自分のペースにあわせて密度の濃い学習が行えます。

また、専属のキャリアアドバイザーが転職のサポートから長期的なキャリア設計まで手厚くサポートしてくれるのも、ほかのプログラミングスクールにはない特徴です。
実際に、DMM WEBCAMPの受講生の転職成功率98%にものぼり、転職後の離職率0%となっています(2018年11月時点)。
CSSのスキルを仕事に活かしたい人にとって、最適な環境といえるでしょう。

まとめ

CSSにはさまざまな機能や書き方があり、どのようなデザインを適用したいかによって上手く使い分けていく必要があります。
CSSを効率的に学習するためには、プログラミングスクールを活用するのもひとつの方法です。

DMM WEBCAMPなら、未経験からのスタートでもwebサイト制作やアプリ開発で必要になる実践的なCSSのスキルを短期間で身につけることができます。
「WEBデザインを実用的なレベルまで身に付けたい!」と思う方は、ぜひお気軽にご相談ください。

 

DMM WEWBCAMPについて

DMM WEBCAMPは3ヶ月間で未経験から即戦力エンジニアを育成する転職保障付きのプログラミングスクールです。1ヶ月でプログラミング・Webデザインを学ぶ通い放題の「ビジネス教養コース」も展開しています。

DMM WEBCAMPを運営する株式会社インフラトップ では、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

dmm webcamp

 

9月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・フリーランスのように自由に働きたい
・会社の将来が不安だ
・給与や待遇に不満がある

上記にあてはまる方は、ぜひご検討ください!

*カウンセリング予約に面倒な電話の必要はございません!


おすすめの記事