1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

プログラミング入門講座③「CSSとは〜HTMLとCSSを紐づける方法〜」

資料を渡す女性
Pocket

当サイトエンジニアのプログラミング入門講座として、前回までの二回でHTMLの基礎を解説してきましたが、第三回である今回はCSSについての説明になります。HTMLについて復習したい方は、

をご覧ください。

WEBサイトの見た目を整えるにはどうすればいい?

WEBサイトの見た目はHTMLタグの中に「style=””」という属性をつけることで整えることができます。
<記述例>

ですが、全てのタグにstyleをつけていくとHTMLの記述はごちゃごちゃと読みづらいものになってしまいます。また、他のページも同じように見た目を整えたい場合、すべてのstyle属性を再度書くことになってしまい、保守管理が大変です。これらの問題を解決するために用意されたのがCSSと呼ばれる書式です。

CSSってなに?

CSS・・・Cascading Style Sheets(カスケーティングスタイルシート)

CSSはHTMLの中からstyle属性を分離してまとめる書式で、拡張子.cssのファイルです。CSSはウェブサイトの見た目を決める指示書の役割をします。HTMLとCSSを紐づけることで、HTMLの中にはコンテンツの内容、CSSにサイトの見た目と分けて記述することができ、HTMLを読みやすく、管理を簡単にする手助けとなります。

HTMLとCSSを紐づける方法

HTMLとCSSを紐づけるには2つのことが必要です。

  • HTMLファイルからCSSファイルの読み込み
  • HTML上の各要素からCSSファイル内のスタイルの読み込み

HTMLファイルからCSSファイルの読み込み

HTMLファイルからCSSファイルを読み込むには内に下記のようなタグを追加します。
<記述例>

上記のタグはという空要素タグで、表示するHTMLと関連する別のファイルを紐づけるタグです。rel属性で紐づけるファイルの形式を指定、href属性で紐づけるファイルの場所を指定します。HTMLにCSSを紐づける場合にはrel=”stylesheet”、href属性はHTMLの位置から見たCSSの相対位置を指定します。相対位置について、例を挙げます。

この場合、index.htmlから見たstyle.cssの位置は次のようになります。

よって、head内に書かれるlinkタグは下記となります。
<記述例>

HTML上の各要素からCSSファイル内のスタイルの読み込み1 「要素の名づけ」

HTMLの各要素からCSSファイル内のスタイルを読み込むためには、まずそれぞれの要素を判別できるように名前を付けます。主に下記2つの属性のいずれかをタグに付加して名づけを行います。

  • id=””・・・ID属性
  • class=””・・・クラス属性

ともにダブルコーテーションの中(属性の値)に自由な(※)半角英数文字列を設定して名づけを行います。

※厳密には、属性値の先頭を数字にしてはいけない・一部記号が使用できない等の規則があります。
<記述例>

この場合、それぞれ一般に「ID名text1のp要素」「クラス名redのp要素」と呼ばれます。

IDとクラスの違い

IDとクラスのには1つ明確な違いがあります。一つのID名は一つのHTMLの中で一度しか使えません。対してクラス名は同一のクラス名をHTML内で繰り返し使えます。これはIDとはidentifierを意味し、個別に識別するための属性であり、classは同じ特徴を持つ仲間(HTML/CSSにおいては同じスタイル属性)をひとまとめにする目的で、使用するものだからです。また、IDとクラスではcssと紐づけたときに優先順位に差があります。それについては後述します。

IDとクラスの使い分け

IDとクラスの使い分けはそれぞれのプロジェクト・制作者ごとに違いがありますが、多くは下記のような形になります。

IDの使いどころ

  • ヘッダー(headder、サイトの先頭、ロゴやサイト内リンクを設置する部分)
  • フッター(footer、サイトの一番下、著作権表記などを設置する部分)
  • ラッパー(wrapper、コンテンツ全体をくくるもの)

上記のように、ページ中で一度しか現れない重要部分の名づけにIDが使われることが多いです。

また、ID名はページ内を遷移するページ内リンクに使用できるため、その使用法をとる部分にも利用されます。
<記述例>

リンクのhrefに「#id名」の書式でページ内のidを指定すると、クリックしたときに、ブラウザ内の表示位置をid名の箇所に移動するページ内リンクとなります。

クラスの使いどころ

  • ニュースリストなど同じ表示が何度も繰り返される部分
  • 一度しか使わないけれど、IDをつけるほど重要ではない部分

IDかクラスか迷ったら!

idかclassか迷った時にはまずclassを選びましょう。classなら後々繰り返し使用する可能性が出た場合にも対応できます。また、id属性とclass属性は一つのタグの中で同時に使用できるため、仮に内部リンクが必要になった場合にもid属性を追加するだけで済むためです。極端な話、idを一つも使わずclassだけでHTML/CSSを作成することも可能です。

HTML上の各要素からCSSファイル内のスタイルの読み込み2「スタイルの紐付け」

HTMLの要素にid・クラス付けが終わったら、次はCSSを作成し、各id、クラスに対してスタイルを定義していきます。

CSSファイルの作成

CSSファイルは実質テキストですので、メモ帳等でテキストファイルを一つ作成し、拡張子を.cssに書き換えれば準備完了です。

スタイルの定義

用意したCSSファイル上で各id、クラスに対し、スタイルを定義していきます。詳しい書き方は後述しますので、ここでは簡単に概要だけお見せします。
<記述例>

<記述例>

sc10

本項ではCSSでの各部位の呼称を覚えてください。例として.headlineで説明します。

  • headline・・・セレクタ(選択子)
  • { から }で囲われた部分・・・宣言ブロック
  • font-size:18px;・・・宣言
  • font-size・・・プロパティ
  • 18px;・・・値

CSSの書式は宣言型言語と呼ばれるプログラムの一種で、プロパティと値からなる宣言を集めた集合体、宣言ブロックをいくつも書き連ねれて作成します。各宣言ブロックはセレクタによってHTMLと紐づけます。

セレクタ(選択子)

宣言ブロックに書かれたスタイルをHTMLのどの部分に適応するか選択する箇所です。セレクタよってスタイルとHTMLの紐付けが行われます。セレクタではIDは#(シャープ)、クラスは.(ドット)で表されます。ID、クラス以外に、要素名、属性名、それらの複合などがセレクタに利用でき、組み合わせて細かなスタイル指定を行います。詳しい使い方については後述します。

宣言(プロパティ:値)

宣言はHTMLでのstyle属性に当たるものです。プロパティ:値; の形で記され、プロパティでどういったスタイルを利用するか(色、隙間、枠線など)を選択し、値でどのように変化させるか(青色、20ピクセル、枠線ありなど)を記します。

プロパティと値の間は:(コロン)で分け、値の後に;(セミコロン)をつけることで、一つの宣言が終わったと明示します。複数の宣言を並べてまとめたものが宣言ブロックとなり、{}でくくり、頭にセレクタをつけることで初めて機能します。

次回の記事はこちらです➡︎プログラミング入門講座④「CSSを作る時に必要な予備知識」

【オススメ記事】
➡︎ コーダー志望者必見!CSSのスクールBEST17
➡︎ マークアップエンジニアがオススメするCSS学習サイト
➡︎ CSSの本・参考書の評判
➡︎ HTMLとCSSの学習はCD-ROMが付いている書籍が良い
➡︎ 書籍とWebサイトを使ってCSSを独学で身につけた話

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る