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ページの関係性【理解できます】

 

【この章でわかること】

✔  HTMLでCSSを読み込む方法

 

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

 

結論から話すと以下の部分で読み込みます。

index.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はすべて

 

実際に読み込んでみる

 

今は以下の状態です。

この場合だと

index.html

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

で読み込むことができます。

 

 

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

 

 

いったんindex.htmlをクリックして見てみましょう。

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

 

cssが効いていないhtml

 

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

cssフォルダの中のstyle.cssを指定しましょう。

 

index.html

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

 

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

 

cssが効いているhtml

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

 

今回はcssファイルの読み込み方について解説しました。

特に最初は勝手にcssの場所を変えてしまって、見た目が崩れて焦ることもあります。

しかしそのようなときはしっかりHTMLファイルでcssの場所を指定してあげればOKです。

 

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

 

・cssを外部ファイルとして読み込むときはHTMLファイルに記述する

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

その他HTML/CSSに関する記事

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

  step0 学習の見通しを持つための記事を読んでおこう!   step1 教材を用意しよう! step2 HTMLとCSSの意味を理解しよう! step3 HTMLとCSSを使って開発できる環境を ...

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

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

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.