ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

HTMLとCSSの紐付け

お互いを紐付けよう

さきほど作成したCSSファイルは、そのままでは単なる独立した1個のファイルとして扱われます。
そこにいくらCSSを書いたって使うことができません。

そこで、HTMLファイルとCSSファイルをお互いに紐付ける(関連付ける)必要があります。

HTMLとCSSの紐付け

お互いを紐付けることにより、HTMLファイルからCSSを呼び出すことができるようになります。

覚えておきたいポイント

紐付けは必須

HTMLファイルからCSSを呼び出すには、かならずお互いを紐付ける必要があります。これをしないと、CSSファイルに記述されたスタイルを使うことができません。

外部CSSを推奨

直接HTMLファイルにCSSを記述する方法もありますが、ゴチャゴチャして見づらくなりあまりオススメしません。当サイトでは外部CSS読込の方法を推奨・紹介しています。

紐付けの方法

HTMLファイルとCSSファイルを紐付けるには、<head>内に<link>要素を記述する必要があります。

[記述例]
<link rel="stylesheet" href="参照する場所">

この<link>を記述することにより、CSSファイルを呼び出すことができるようになります。

なお、href=""内の「参照する場所」は、CSSファイルが置かれている場所を指定します。
今回の場合はindex.htmlファイルと同じフォルダ階層にありますので、style.cssと入力するとOKです。

<link rel="stylesheet" href="style.css">

HTMLファイルと紐付けよう

それでは、さきほど作成したindex.htmlをTeraPadで開き、HTMLの基本構文と<link>を入力してみましょう。

step.1

基本構文を記述し、<head>内に<link rel="stylesheet" href="style.css">を記述します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>CSSの練習</title>
</head>

<body>

</body>
</html>

step.2

記述が終わったらファイルを保存しましょう。タイトルは「CSSの練習」として保存します。
また、保存する際には必ず「UFT-8N」で保存します。

保存の確認

これでCSSを使う準備は完了です。<link>を記述したことにより、HTMLファイルとCSSファイルが紐付けられました。

さっそくCSSファイルにスタイルをガシガシ書いていきましょう!…と言いたいところですが、その前にもうひとつだけ大事な約束事があります。
CSSを自由自在に扱うためには欠かせない、重要なポイントです。

覚えておきたいポイント

参照場所の指定が可能

CSSファイルを参照する場所が同じ階層にある場合は、href="ファイル名.css"でOKです。違う階層、例えばひとつ上などにある場合はhref="../ファイル名.css"となります。
ファイル名の前に../を付けることにより、参照する場所を指定することが可能です。

classとidの使い方
« 前のページへ CSSを書く場所

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。