htmlcss cssファイルの読み込みとclass × idの使い方
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

cssファイルの読み込みとclass × idの使い方

HTML×CSS|2018年10月15日

2018年10月15日
  • このエントリーをはてなブックマークに追加

HTMLはウェブサイトの「骨組み」を作り、CSSは「装飾」を担当する。
その概念そのものは、把握できたでしょうか。

ここで、よく質問を受ける項目が2つあります。

1つめが、HTMLにCSSファイルを読み込む方法。
前前回、記述したソースコードの中に、こっそり書いてあったことにお気づきでしょうか。
深くはご説明していなかったので、改めて説明させて頂きます。

2つめが、classとidの使い方についてです。
CSSでサイトを装飾する時、必要になるのがclassです。
前回もやりましたが、classでcssのプロパティと紐づけて装飾をします。
しかし、class以外にも「id」という紐づけ方があるのです。

今回は、まずHTMLにCSSファイルを読み込む方法を、ご説明していきます。
次にclassとidの基本的な使い方について、お伝えしていきます。

cssはhtmlに読み込んで使いましょう

基本的にcssとhtmlは別のファイルとして存在します。
ですのでhtmlから、cssを読み込む必要があります。
cssがhtmlに読み込まれて、初めてcssは装飾として機能します。
では、どのようにしてhtmlからcssを読み込めば良いのでしょうか。

下記のソースコードをみてください。

<!--index.htmlに書かれています-->
<link href="css/common.css" rel="stylesheet" type="text/css">

これが、cssを読み込むソースコードです。
<head>内に書いて、使用します。
ここで、変更するべき箇所は1箇所しかありません。

<!--index.htmlに書かれています-->
href="css/common.css"

hrefのダブルクオーテーション(“)で囲まれた中身「css/common.css」の部分です。
これを「パス」と呼び、ファイルの位置を示しています。

なお、cssだけではなく他のファイル形式もパスを使って読み込みます。
画像やjs ( JavaScript ) ファイルなど、外部ファイルを読み込む際は、いつでもパスを使います。

今回のパスは「index.htmlと同じ階層にあるcssフォルダの中の、common.cssを読み込む」という意味になります。
スラッシュ ( / ) で区切ったところがフォルダを意味します。
「css/」でcssフォルダの中、ということです。

逆に「../」がつくと、階層を1つ上がる、という意味になります。

<!--index.htmlに書かれています-->
href="../css/common.css"

上記であれば「index.htmlから1つ上のフォルダの中にあるcssの中のcommon.css」になります。

このように、htmlからパスでcssを読み込んで、初めてcssを使えるようになります。
もしcssが読み込まれていなければ、cssを使うことはできません。
cssが効かない場合、まずcssが読み込まれているか確認しましょう。

cssの基本的な書き方と考え方

ではcssで、どうやってhtmlを装飾するのでしょうか。
まず、classのおさらいから、進めていきましょう。
前回で理解された方も、改めておさらいしてみてください。

基本的にhtmlは<p>や<h1>のようなタグで作られています。
しかし、それ単体だと何の装飾もできません。

例えば、下記のようなhtmlがあったとします。

<!--index.htmlに書かれています-->
<h1>タイトル</h1>

しかし、これだけだと、何の装飾もされません。

そこでまず、装飾だけを別途、cssで用意します。
下記のcssを見てください。

<!--common.cssに書かれています-->
.red{
color:#ff0000;
}

これは、文字の色を赤に変える、という意味のcssです。
では、上記を使って、文字を赤くするにはどうするべきでしょう。

<!--index.htmlに書かれています-->
<h1 class="red">タイトル</h1>

このようにclass=”red”という形で互いを紐づけて使います。
すると、タイトル、という文字列が赤くなります。

ちなみに今回はredというclassの名前をつけましたが、なんでも構いません。
英数字であれば、なんでもclassの名前としてつけられます。

ここで少し、補足です。
もう一度、下記のソースコードを見てください。

<!--common.cssに書かれています-->
.red{
color:#ff0000;
}

redの前に ( . ) があるのが、わかるでしょうか?
( . ) が何を意味するかと言えば、classを意味しています。
ただ、CSSの書き方はclassだけではありません。
実は、もう1つ、書き方があるのです。

<!--common.cssに書かれています-->;
#red{
color:#ff0000;
}

( # ) になったことに、お気づきでしょうか。
これはclassではなく、idと言います。
htmlに記述するときもidと記載します。

<!--index.htmlに書かれています-->
<h1 id="red">タイトル</h1>

さて、idとclassで何が違うのでしょうか?
違いは使うことのできる回数です。

idは「1ページに1度」しか使えません。
classは「1ページに何度でも」使えます。

つまりidは固定された1つであって、classは使い回せるのです。
その時のcssの用途によって、使い分けると、把握が楽になります。
また、idの方が読み込みが早いという噂もあります。

ただし、最近ではidはほとんど使わない方がいいとされます。
JavaScriptとの兼ね合いや、アンカーリンク等で必要なときだけ使います。
基本的にはidではなく、classを使うようにしてください。

これが、cssを使う時に覚えておくべき、基礎的な知識です。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら