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

今やWebサイトになくてはならないCSS（Cascading Style Sheet）は、単純なページ装飾だけでなく動的なページを作り出すこともできるようになりました。

HTML（Hyper Text Markup Language）と組み合わせて使用し、複雑な構造と装飾を作り出すだけでなく、スマートフォン、タブレット、パソコンなどの解像度が異なるデバイスで閲覧した際、適切な画面構成に最適化するレスポンシブデザインにもかかせません。

Web制作の現場でとても重要なCSSについて、できることや簡単な書き方をご紹介します。

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

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

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

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を指定したい箇所を指定（h1タグ名、class名など）する部分です。

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

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

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

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

• body：ページ全体の設定
• h1：HTML上のすべてのh1に共通の設定
• h2：HTML上のすべてのh2に共通の設定
• p：HTML上のすべてのpタグに共通の設定
• span：HTML上のすべてのspanタグに共通の設定
• a：HTML上のすべてのaタグに共通の設定
• img：HTML上のすべてのimgタグに共通の設定

• background-color：背景色を指定
• width：幅を指定
• height：高さを指定
• font-family：フォントの設定
• text-align：文字の水平方向の配置（左揃え、右揃えなど）
• border：枠線を指定
• color：文字色を指定

• 色系： #ff0000 のように6個の16進数で指定
• 数値系：12px 20emのように指定の単位で幅や高さなどを設定
• 文字系： center left right など、プロパティによっては文字で入力するものがあります

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

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

CSSもHTMLも1バイト文字を使用して定義されています。

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

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

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

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

CSSファイルにスタイルを指定して書き込み、HTMLファイルで呼び出して使用します。これは、現在推奨されている方法です。

HTMLとCSSが混在している場合、CSSのみの修正であっても、誤ってHTMLまで削除してしまうことがあります。これがHTMLとCSSが分離している場合、CSSファイルのみを修正することで、ミスを誘発しないというメリットがあります。また、修正・変更・追加が1か所にまとまっているため、効率的にメンテナンスが可能という点もメリットといえるでしょう。

CSSの知識が身につき、コーディングもできるようになったが実務経験がないという場合におすすめなのがAKKODiSの派遣・紹介予定派遣です。

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

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