一番簡単なcssをインポートしたhtmlサンプル

2019年9月17日

毎回探すのがめんどくさいのでメモがてらアップ

まずこちらがcssをインポートしたhtmlのサンプルになります

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css.css">
		<title></title>
	</head>
	<body>
	</body>
</html>

 

使い方がわからない方向けの説明

 

 

1.フォルダを作成

 

 

2.フォルダの中にindex.htmlとcss.cssを作成

 

 

 

 

3.試しに作ったhtmlにcssを適用させてみます

完成した画面がこちら↓

 

 

 

4.index.htmlの画面を作っていきます

 

index.htmlを編集画面で開きます(index.html右クリック➜プログラムから開く➜メモ帳)
分かりやすくするためにメモ帳に書きましたが普通は編集エディタを使用します(Atomなど)

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css.css">
		<title></title>
	</head>
	<body>	
        <h1>sampleです</h1>
	</body>
</html>

 

以下のような画面になるとOKです。保存して終了します

 

5.次はCSSを編集します

 

(css.css右クリック➜プログラムから開く➜メモ帳)

h1の文字を赤色にするコードを記述していきます

 

h1{
	color:red;
}

 

 

保存して終了すると完成です

 

6.フォルダの中にあるindex.htmlをダブルクリックするとさっきの完成画面が出てきます!

 

 

※もし出てこない方は以下の点に注意してください

 

1.スペルが間違ってる(コピー&ペーストでやりなおしてみてください)

2.index.htmlとcss.cssがお互い別のディレクトリにある場合

(index.htmlでcssをインポートする際のパスは相対パスなのでindex.htmlとcss.cssが同じディレクトリでないと正しくインポートされません。index.htmlとcss.cssが同じフォルダ内にあるか確認してみてください)

 

以上簡単なhtmlテンプレートでした。サクッと書くつもりでしたが結構時間かかっちゃったw