2021.08.07
テーマ： HTMLタグのお勉強(104)
カテゴリ： HTMLを知る
始めに作成したhtmlに
自分が作成したcssを反映させる作業にうつります。
htmlの<head>部分にcssの<link>タグを書いていきます。
<head>部分は、単なるhtmlの情報を入れるところなので、
ウェブ上では表示されません。
ピンク色の部分を追加しました。
まず、linkは、リンクという文字なのでなんとなく納得です。
が、href が分かりません。
これは、ハイパーテキストの参照という意味らしいです。
また、rel は参照するものがここにあるよという意味です。
ですので、
私なりに解釈すると、
<link href="cssが入っているフォルダ/cssのファイル"
rel="cssのファイルはここです">
というような感じでしょうか。
このhtmlをデスクトップに保存し、
早速できたhtmlをブラウザで表示させてみましょう。
↓
↑
ちゃんと色が変わりました！！
大成功ですね。
自分が作成したcssを反映させる作業にうつります。
htmlの<head>部分にcssの<link>タグを書いていきます。
<head>部分は、単なるhtmlの情報を入れるところなので、
ウェブ上では表示されません。
<!DOCTYPE html>
<html>
<head>
<title>タイトルを入れる</title>
<link href="stylesheet/test.css"rel="stylesheet">
</head>
<link href="stylesheet/test.css"rel="stylesheet">
</head>
<body>
<h1>第１章</h1>
<p>早速作ってみよう。</p>
</body>
</html>
ピンク色の部分を追加しました。
まず、linkは、リンクという文字なのでなんとなく納得です。
が、href が分かりません。
これは、ハイパーテキストの参照という意味らしいです。
また、rel は参照するものがここにあるよという意味です。
ですので、
私なりに解釈すると、
<link href="cssが入っているフォルダ/cssのファイル"
rel="cssのファイルはここです">
というような感じでしょうか。
このhtmlをデスクトップに保存し、
早速できたhtmlをブラウザで表示させてみましょう。
↓
↑
ちゃんと色が変わりました！！
大成功ですね。
お気に入りの記事を「いいね！」で応援しよう
[HTMLを知る] カテゴリの最新記事
-
cssに追加してみよう3 2021.08.15
-
cssに追加してみよう2 2021.08.12
-
cssに追加してみよう１ 2021.08.11
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
