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を習得できるプログラミングスクールランキング

 

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

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

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

続きを見る

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

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

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

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