【HTML、ASP.NET】外部のCSSファイルを参照する方法

◆この記事で紹介している内容の概要

・外部ファイルとして作成したCSSファイルをHTML上のコードから参照する方法
(ASP.NETで使用する場合のHTMLのコードも記載)
・linkタグの構文と実際の使用例

◆この記事で紹介ししていない内容

・外部ファイルとして作成したCSS以外のファイルをHTML上のコードから参照する方法

外部ファイルとして作成したCSSファイルの参照はLinkタグを用いることで可能です。

構文

<link href="<参照先のCSSファイルパス>" rel="stylesheet" type="text/css"/>

参照する場合、Headタグ内にlinkタグを定義する。

通常のHTMLソースコードでの使用例

<head>
    <%--CSSファイル参照設定--%>
    <link href="../StyleSheet/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

使用例では"StyleSheetフォルダ"内のStyleSheet.cssを参照するファイルとして設定しています。

参照先のCSSファイルとフォルダ構成

f:id:rumr-Labo:20190219061421p:plain — 参照先に指定するファイルとフォルダ構成

ASP.NETで画面を作成しているときに参照方法が分からなかったので、調べて得られたものを記載しておきます。
一応、ASP.NETで実際に使っているコードも記載しておきます。

ASP.NETでの使用例

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>単体動作確認</title>
    <%--CSSファイル参照設定--%>
    <link href="../StyleSheet/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>

動作環境

・使用OS:Windows10 Home
・IE Version:11.590.17134.0
・VisualStudio Community 2017