HTML/CSS

HTMLでCSSを読み込む方法

2020年12月5日

HTMLでCSSを読み込む方法と書かれた画像

 

あなた
HTMLでCSSを読み込むにはどうしたら良いのでしょうか?

 

【この記事でわかること】

HTMLでCSSを読み込む方法

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

ではさっそく見ていきましょう。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

HTMLでCSSを読み込む方法を解説します

 

今回は以下の記事で使ったHTMLファイルとCSSファイルを例に解説します。

まだ準備できていない方は以下の記事で学習&ファイル準備してください。

>>HTMLとCSSとWEBページの関係性【理解できます】

 

ファイルが準備できたら、そのファイルを見ながらこれからの解説を読んでください。

 

CSSは大体HTMLの上部で読み込む

 

結論から話すと、CSSはHTMLファイルの以下の部分で読み込んでいます。

 

<link href="style.css" rel="stylesheet" type="text/css" media="all">

 

それぞれの意味は以下の通りです。

href="style.css"

読み込むcssファイルの位置指定

htmlファイルと同じ階層にあるときは

「href="style.css"」

cssというフォルダの中にあるときは

「href="css/style.css"」

rel="stylesheet"リンクタイプを指定
media=""

対象のメディア

allはすべて

 

実際に読み込んでみる

 

今は以下の状態です。

 

 

上記の場合だと以下のように読み込めばOK。

 

<link href="style.css" rel="stylesheet" type="text/css" media="all">

 

一旦index.htmlを開いてみて、無事CSSが反映されていれば(見た目が整っていれば)成功です。

 

つぎに新しく「css」というフォルダを作成してその中にstyle.cssを入れてみましょう。

 

 

この状態で、いったんindex.htmlをクリックして見てみましょう。

cssが有効になっていません。

 

cssが効いていないhtml

 

これは指定しているcssの位置が違うからです。

cssを読み込んでいる場所のコードを以下のように書き換えてみてください。

 

<link href="css/style.css" rel="stylesheet" type="text/css" media="all">

 

もう一度読み込むと成功しましたね。

 

cssが効いているhtml

読み込み方法を理解して自在に扱えるようになろう

 

ということで今回はCSSファイルの読み込み方について解説しました。

 

HTMLとCSSを扱っていると、見た目が崩れて焦ることもあります。

そのようなときはまずはCSSを読み込むコードが正しいかをチェックしてあげましょう。

 

もちろん複数のファイルを読み込むことも可能なので気になる方は試してみてください。

 

次はHTMLの各要素の意味を解説していきます。

>>次の回:HTMLの要素を理解しよう

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2022 エンジニアてんし君ブログ