ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
さきほど作成したCSSファイルは、そのままでは単なる独立した1個のファイルとして扱われます。
そこにいくらCSSを書いたって使うことができません。
そこで、HTMLファイルとCSSファイルをお互いに紐付ける（関連付ける）必要があります。
お互いを紐付けることにより、HTMLファイルからCSSを呼び出すことができるようになります。
HTMLファイルからCSSを呼び出すには、かならずお互いを紐付ける必要があります。これをしないと、CSSファイルに記述されたスタイルを使うことができません。
直接HTMLファイルにCSSを記述する方法もありますが、ゴチャゴチャして見づらくなりあまりオススメしません。当サイトでは外部CSS読込の方法を推奨・紹介しています。
HTMLファイルとCSSファイルを紐付けるには、<head>内に<link>要素を記述する必要があります。
[記述例]この<link>を記述することにより、CSSファイルを呼び出すことができるようになります。
なお、href=""内の「参照する場所」は、CSSファイルが置かれている場所を指定します。
今回の場合はindex.htmlファイルと同じフォルダ階層にありますので、style.cssと入力するとOKです。
それでは、さきほど作成したindex.htmlをTeraPadで開き、HTMLの基本構文と<link>を入力してみましょう。
基本構文を記述し、<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>
記述が終わったらファイルを保存しましょう。タイトルは「CSSの練習」として保存します。
また、保存する際には必ず「UFT-8N」で保存します。
これでCSSを使う準備は完了です。<link>を記述したことにより、HTMLファイルとCSSファイルが紐付けられました。
さっそくCSSファイルにスタイルをガシガシ書いていきましょう！…と言いたいところですが、その前にもうひとつだけ大事な約束事があります。
CSSを自由自在に扱うためには欠かせない、重要なポイントです。
CSSファイルを参照する場所が同じ階層にある場合は、href="ファイル名.css"でOKです。違う階層、例えばひとつ上などにある場合はhref="../ファイル名.css"となります。
ファイル名の前に../を付けることにより、参照する場所を指定することが可能です。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。