CSSってなに？Webエンジニアが詳しく解説

以前、「HTML」についての解説記事を公開しました。

今回はその内容と関連して、HTMLに必須のCSSについて解説してきます。

HTMLは文章の役割を明確にし、コンピュータがその文章構造を解析できるようにするためのプログラミング言語でした。

ただ、HTMLだけだと無機質な見た目になりがちです。

より、伝えたい内容を効果的に伝えるために、文章に装飾を施すことができるのが「CSS」と呼ばれるプログラミング言語です。

今回は、そのCSSについて、前回解説したHTMLと絡めながらわかりやすく解説していきます。

コンテンツ一覧

CSSってなに？
まとめ

CSSってなに？

CSSとは、「Cascading Style Sheet（カスケーディングスタイルシート）」の略記で、ウェブ上のHTML文章にスタイルを指定するためのプログラミング言語です。

HTMLで作成されるウェブサイトにスタイルを適用する場合は、一般的にCSSが利用されています。

CSSはHTMLと組み合わせて使われるプログラミング言語で、HTMLがウェブサイトの文章における各要素の役割を定義するのに対して、CSSはそれらの要素をどのように装飾するかを指定するために利用されます。

ウェブページが画面に表示される際に、どのくらいのサイズか、何色で表示するのか、どのようなレイアウトで配置するのかなどの調整をすることが可能です。

スタイル指定について

HTMLだけでもタグに属性を指定することで要素ごとのスタイルの指定は可能です。

しかし通常はHTMLに直接スタイリングを行うことは推奨されていません。

基本的にHTMLは文章構造を定義するプログラミング言語であり、直接スタイリングを付与してしまうと、でたらめな文章構造となってしまい本来の役割を損なってしまう可能性があるからです。

また、同時にHTMLに直接スタイリングを付与すると後々の修正が大変になるというデメリットもあります。

原則、HTMLによる文章構造とスタイリングは分離して管理することが推奨されます。

スタイリングはCSSとして別ファイルに記述し効率的に管理していきます。

CSSを使うメリット

CSSをマスターすることで、HTMLによる文章構造とスタイリングを別々に管理することができるようになります。

これにより次のようなメリットが期待できます。

文章構造を保ったままスタイリング可能

HTMLに直接スタイリングを行おうとすると、文章構造を無視した内容や意味に合わないHTMLタグを使用することになり、適切な文章構造にならないといった問題が発生します。

CSSにより、スタイリングを完全に分離して管理することで、HTML側では文章構造に集中することができ、スタイル指定のせいで文章構造が分からなくなるといった心配がありません。

メンテナンスが簡単になる

HTMLで直接スタイリングを行うと、例えば見出しの色やサイズを変更するときに、見出しが使用されているページやページ内の全ての箇所一つひとつを変更する必要があります。

CSSを利用することで、このようなスタイリングの指定・変更を一括して管理することができます。

SEOやアクセシビリティが向上する

HTMLによるスタイル制御をやめ文章構造の最適化に集中することにより、検索エンジンにウェブサイト全体の意味を正しく認識されるようになります。

また、CSSでスタイリングすることによりHTMLから余計な記述を削減でき、スタイルの記述を一括して管理することによりウェブページの軽量化が可能です。

これらにより、SEOの効果やアクセシビリティの向上を期待できます。

CSSの基本構造

それでは、CSSを記述する上での基本構造について解説していきましょう。

CSSでの記述方法は3つの対象を指定します

なにに対してスタイルを付与するのか（セレクタ）
どんなスタイルを付与するのか（プロパティ）
付与するスタイルの具体的な内容（値）

実際の記述方法は次のようになります。

セレクタ

セレクタ（selector）とは、どの要素にスタイルを適用するかを指定するものです。上の例ではp要素が指定されていますが、そのほかHTMLタグ全般や、HTML要素に属性として設定したclass（クラス）名・id名に対しても指定できます。

HTMLにクラス名とidを指定した場合

<div class=“btn” id=“trial-btn”>

と記述した場合、div要素は「btn」というクラス名と「trial-btn」というidを持つことになります。

これらのクラス名やidに対して、スタイルを付与することができます。

CSS側での書き方は次のようになります。

/* 「btn」というクラス名の要素に対してスタイルを指定 */

.btn {
width: 80px;
height: 30px;
border-radius: 5px;
background-color: teal;
color: white;
}

/* 「trial-btn」というidの要素に対してスタイルを指定 */

#trial-btn {
width: 100px;
background-color: crimson;
font-size: 16px;
}

CSSの呼び出し

外部ファイルに記述したCSSをHTMLに適用するには、「head」要素内にて、「link」要素を使って呼び出します。

sytle.css（cssのスタイルファイル）

p { color: blue; line-height: 1.5; background-color: #eee;}

index.html（cssを呼び出したいhtmlファイル）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!— ここでcssファイルを呼び出す —!>
  <title>タイトル</title>
</head>
<body>

  <p>スタイルが適用される要素</p>
</body>
</html>