【この記事でわかること】
✔ HTMLでCSSを読み込む方法
【この記事の信頼性】
この記事を書いている僕は現役のWEBエンジニアです。
普段からHTMLとCSSを使ってWEBページを制作しています。
ではさっそく見ていきましょう。
HTMLでCSSを読み込む方法を解説します
今回は以下の記事で使ったHTMLファイルとCSSファイルを例に解説します。
まだ準備できていない方はこのステップまで進めてください。
【この章でわかること】
✔ HTMLでCSSを読み込む方法
CSSは大体HTMLの上部で読み込む
結論から話すと以下の部分で読み込みます。
index.html
それぞれの意味は以下の通りです。
| href="style.css" | 読み込むcssファイルの位置指定 htmlファイルと同じ階層にあるときは href="style.css" cssというフォルダの中にあるときは href="css/style.css" |
| rel="stylesheet" | リンクタイプを指定 |
| media="" | 対象のメディア allはすべて |
実際に読み込んでみる
今は以下の状態です。
この場合だと
index.html
で読み込むことができます。
つぎに新しく「css」というフォルダを作成してその中にstyle.cssを入れます。
いったんindex.htmlをクリックして見てみましょう。
cssが有効になっていません。
これは指定しているcssの位置が違うからです。
cssフォルダの中のstyle.cssを指定しましょう。
index.html
もう一度読み込むと成功しましたね。
読み込み方法を理解して自在に扱えるようになろう
今回はcssファイルの読み込み方について解説しました。
特に最初は勝手にcssの場所を変えてしまって、見た目が崩れて焦ることもあります。
しかしそのようなときはしっかりHTMLファイルでcssの場所を指定してあげればOKです。
もちろん複数のファイルを読み込むことも可能なので気になる方は試してみてください。
・cssを外部ファイルとして読み込むときはHTMLファイルに記述する
HTMLとCSSの教材をまだ準備していない方は準備しましょう。
学習ステップの全体はコチラ
僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ
>>HTML/CSSを習得できるプログラミングスクールランキング
