CSSとは?CSSで出来ることや書き方ついて紹介!

公開日:

今やWebサイトになくてはならないCSS(Cascading Style Sheet)は、単純なページ装飾だけでなく動的なページを作り出すこともできるようになりました。
HTML(Hyper Text Markup Language)と組み合わせて使用し、複雑な構造と装飾を作り出すだけでなく、スマートフォン、タブレット、パソコンなどの解像度が異なるデバイスで閲覧した際、適切な画面構成に最適化するレスポンシブデザインにもかかせません。
Web制作の現場でとても重要なCSSについて、できることや簡単な書き方をご紹介します。

CSSとは

CSSとは

Webページの要素(HTMLやXML)をどのように装飾・表示するかを指示する仕様の一つです。

CSSは、それまでHTMLで表現されていたものの大部分を表現でき、さらに新たなデザイン機能も兼ね備えています。ページの装飾だけでなく、例えばレスポンシブデザインのようにデバイスの画面サイズに合わせて表示を最適化したり、工夫をすればスライドショーなどの動的な表現を構築することも可能です。

CSSはHTMLとセットで機能します。「どこ(HTMLのタグやIDなど)」の「なに(文字色、背景色など)」を「どうする(赤にする、透明にするなど)」という情報をCSSで指定することで、HTMLがブラウザ上でどのように表示されるかをコントロールすることができます。

CSSの歴史

CSSは、1994年にホーコン・ウィウム・リー氏によって提唱されました。実際にWebデザインに運用され始めたのは1996年で、CSS1が使用されるようになりました。

当時はボックスモデル(「HTMLやXHTMLで定義された要素は全て長方形のボックスの中に納められている」という考え方)のみで、Internet Explorer5.5以下と6.0以上、さらにほかのWebブラウザでは同じものを表示するにしてもそれぞれで画面での表示が異なるため、それを近づけるためにさまざまな対応が必要でした。

1998年にCSS1の上位互換CSS2が登場しました。表示媒体によって自動的にスタイルシートを変更できるようになり、音声ブラウザや印刷媒体への対応が行われたことや、ボックス概念の修正により、CSSは表現と運用の幅が広がりました。以後、2011年のCSS2.1まで長年にわたって広くWebデザインに運用されます。

そして現在、私達が広く目にしているのは2013年以降CSS2.1を中核にして、新しい機能の追加や改良をモジュールとして実現したCSS3です。縦書きや動画制御など、複雑なWeb表現に対応できるようになりました。
CSS4は存在しませんが、CSS3の各モジュールのLevel4の総称としてCSS4という表記をすることがあります。

CSSでできること

CSSでできること

CSSでできることは非常に多岐にわたりますが、中心となるのは「Webサイトを閲覧しやすいように装飾すること」です。
文字色・サイズ・背景色などは、かつてはHTMLタグで個別に設定していましたが、現在はCSSを用いて一括で指定したり、ページごとに変更したり、ディスプレイサイズやデバイスに合わせて最適化することが可能です。

また、現在ではCSSの研究も進み、スライダーや点滅アイコン、トグルスイッチなどの今までJavaScriptで表現されていた動的な装飾は、CSSだけで作ることが可能になっています。

CSSを使わない場合

デフォルトのHTMLファイルの配色は、白い背景に黒い文字、青い文字のリンクだけで構成されています。CSSがなにもない場合、画面は真っ白な背景の上に文字と画像が縦に続く単調なものになります。

CSSの書き方

CSSの構造

CSSの構造は「セレクタ」「プロパティ」「値」から成り立っています。

「セレクタ」

CSSを指定したい箇所を指定(h1タグ名、class名など)する部分です。

「プロパティ」

セレクタで指定した範囲に対して、何を変更したいかを指定(文字色を変える、横幅を変えるなど)する部分です。

「値」

具体的にどうしたいのか(文字色を赤に変える、横幅を100pxにするなど)を指定する部分です。

CSSはこの3つを組み合わせて、HTMLの装飾などを行います。

CSSの書き方

CSSでよく使われるセレクタ、プロパティ、値をご紹介します。

セレクタ

プロパティ

サンプル

  • すべてのpタグのテキストを中央揃えにし、幅は10px、背景色は赤(#ff0000)にする

p {
  text-align: center;
  width: 10px;
  background-color: #ff0000;
}

  • すべてのimgタグの枠線を3pxにし、幅100px、高さ200pxにする

img {
  border-width: 3px;
  width: 100px;
  height: 200px;
}

  • すべてのaタグの文字色を青にする

a {
  color: #0000ff;
}

CSSを書くときの注意点

CSSを正しく書いたはずなのに適用されない場合、次のような問題が生じている場合がありますので確認してみてください。

値の最後にセミコロンを入れる

CSSは「;」によって定義の終了を宣言します。つまり、セミコロンがない場合、まだ定義が続いていると認識されてしまいます。値の最後には必ずセミコロンを入れるよう注意してください。

全角スペースを使わない

CSSもHTMLも1バイト文字を使用して定義されています。
そのため、マルチバイト文字の全角スペースは認識できず、エラーの原因になります。人間の目には同じ空白に見えても、プログラムの世界では半角と全角は違う扱いなので注意してください。

CSSを書く場所

CSSは複数の場所に記述できます。HTMLタグに書き込むこともできますし、別ファイルにすることもできます。推奨されているのは、HTMLファイルとは別にCSSファイルを用意しておくことです。

HTMLタグに書き込む

タグに直接スタイルを指定する方法です。CSS1の頃には多用された方法ですが、現在は基本的に使用されません。

HTMLファイルにstyleタグを使う

ヘッダー部分などにstyleタグを使用して書き込みます。そのHTMLファイルだけに適用する、ごく限られたスタイルを指定するときに使います。細かい所を簡単に対応できる利便性がありますが、一般的にはそのような場合でもCSSファイルを使用するほうが良いとされています。

CSSファイル

CSSファイルにスタイルを指定して書き込み、HTMLファイルで呼び出して使用します。これは、現在推奨されている方法です。
HTMLとCSSが混在している場合、CSSのみの修正であっても、誤ってHTMLまで削除してしまうことがあります。これがHTMLとCSSが分離している場合、CSSファイルのみを修正することで、ミスを誘発しないというメリットがあります。また、修正・変更・追加が1か所にまとまっているため、効率的にメンテナンスが可能という点もメリットといえるでしょう。

CSSの習得方法

CSSの習得について

CSSの習得は、比較的簡単です。基本的なスタイルの使い方さえ覚えれば、Webデザインで必要とされる業務の基本的な部分はカバーできるでしょう。デザイナーが作ったモックにそってHTMLとCSSを記述することをコーディングといい、CSSを習得すると、このコーディングができるようになります。

学習ツールの紹介

CSSを初めて触る初心者におすすめなのが、次のサイトです。

Progate

プログラミングの初心者向けサイト。イラストで解説されているスライドを見ながら練習していくことで、直感的に学べます。

CODEPREP

書いて学ぶ実践習得型のサイトです。1回10分程度でさくさくと進むので、飽きずにスキマ時間で進めることができます。

Markup

マークアップ言語についてスライドを見ながら学習し、実践して実際の動きを見ながら学ぶ総合的な学習サイトです。1回30分程度と授業時間もさほど長くありません。

HTMLクイックリファレンス

HTML、CSSのタグを網羅したインターネット黎明期からある有名サイトです。分からないタグを目的別やABC別で探し、サンプルソースを見ながら書くことができます。

とほほのWWW入門

HTML/CSSのリファレンスから、プログラミング言語、ネットワーク技術など、WWW(World Wide Web)に必要な基礎知識が網羅されています。HTML、CSS以外の知識も合わせて調べたい場合に重宝します。

CSSを活かして派遣として働く

ModisならCSSの実務経験がなくても知識があれば紹介も可能

CSSの知識が身につき、コーディングもできるようになったが実務経験がないという場合におすすめなのがModisのIT・エンジニア派遣です。

実際に自分のWebサイトでCSSを使っているものの、今までのキャリアでは実務経験がないという人は少なくありません。そういうケースでも、知識や意欲があれば紹介できる求人も多数あります。(2019年7月現在)

現場に出てみないと分からないことが多いコーディングの仕事。ModisのIT・エンジニア派遣で実務経験を身につけてキャリアアップし、紹介予定派遣を活用して正社員登用を目指すこともできます。

まずは気軽にはじめてみては?

Webには欠かせないスキルであるCSSは決して敷居の高いものではありません。気軽に勉強をはじめることができます。

まずは基礎を学び、ModisのIT・エンジニア派遣で実務の世界に出てみてはいかがでしょうか。

Modisで探す、エンジニアの仕事

IT・エンジニア派遣に特化したModisでは、スキルを活かせる求人・未経験からOKの求人を多数ご紹介しています。