HTML / CSS

【1行で簡単】HTMLに外部CSSを読み込ませる方法

こんにちは、テルプロです!

「HTMLに外部CSSを読み込ませる方法は?」とお悩みではないでしょうか?

テルプロ

本記事ではそんな悩みを解決していきます!

本記事を読むことで
  1. コピペですぐに実装できる
  2. HTMLに外部CSSを読み込ませる方法がわかる

HTMLに外部CSSを読み込ませる方法

CSSがHTMLと同じ階層にある場合

   <link rel="stylesheet" href="style.css">

HTMLと同じ階層にある場合のソースコードは上記のようになります。

HTMLと同じ階層にある場合というのは上記の画像のような状態のことです。

CSSがフォルダーの中に入っている場合

   <link rel="stylesheet" href="css/style.css">

CSSがフォルダーの中に入っている場合のソースコードは上記のようになります。今回は「CSS」というフォルダーの中に「style.css」が入っている場合を想定しました。

下記の画像のような状態です。

フォルダー名を変更したい場合→コードのcssの部分を任意の名前に変更

ファイル名を変更したい場合→style.cssのstyleを任意の名前に変更

まとめ

今回は、1行で簡単に出来るHTMLに外部CSSを読み込ませる方法をご紹介しました。

良ければ参考にしてみてください。

最後までご覧いただきありがとうございました。ではまた!

ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 監修実績(レバテックフリーランス
Flutter関連の書籍を出版しました!