WEB講座
CSSの組み込み方
HTMLにCSSを組み込みための方法を説明するぞよ。
定番な方法と仕方なく使う場合の方法を伝授します！
詳しく教えてください～。
CSSの組み込み方
CSSの組み込み方には、下記の3つの方法があります。
② styleタグを使ってHTMLの中に直接書く方法。
③ 任意の要素にStyle属性を指定して書く方法。
③は、HTMLのあちこちに細かく表示指定を書くことになるので、更新作業などのメンテナンスが大変になるため、ブログ等のテンプレート以外では通常は使用しません。
CSSの組み込み方①･･･linkを使ってCSSファイルを読み込ませる
HTMLの<head>内に<link rel>を使って、CSSを読みこませる方法です。
この方法が一般的に1番使用されています。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>ページタイトルが入ります！</title>
<link rel=”stylesheet” href=”https://○○/△△/style.css”>
</head>
link要素の後ろにあるrel属性には、そのファイルの種類を示すキーワードを指定します。
今回はCSSなのでstyleseetと記載して指定します。
hrefには、CSSのある場所を書けばO.Kです！
複数のCSSを読み込ませたい場合は、行を追加するだけでいいので、この方法での設定が更新のことも考えると1番使いやすいと思います。
<link rel=”stylesheet” href=”https://○○/△△/style.css”>
<link rel=”stylesheet” href=”https://○○/△△/top.css”>
CSSの組み込み方②･･･styleタグを使ってHTMLの中に直接書く
①はCSSファイルをリンクで読み込む方法でしたが、<style>タグを使って直接CSSを書くことも出来ます。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>ページタイトルが入ります！</title>
<style>
body { background: black; }
h1, p { color: white; }
p { font-size: 17px}
</style>
</head>
上記のように<head>内に<style>要素を配置すると、h1タグやPタグは○色で等の指定ができます。
一見、この方が簡単に感じますが、下記のようなデメリットもあるため、ブログ等のテンプレート等で
仕方なく使う場合以外は、あまり使用はされません。
（1） HTMLの記載が長くなる。
（2） CSSの管理・把握がしにくくなる。
（3） ↑この影響もあり、場所によって細かい指定がしたい場合に重複記載が増えたりする。
CSSの組み込み方③･･･任意の要素にStyle属性を指定して書く
これも②の方法に近く、ブログ等のテンプレート等の仕様で仕方なく使う場合以外は、あまり使用されません。
<h1 style=”color: orange;”>h1タイトルテキスト</h1>
<p style=”color: white; font-size: 17px;”>
Pタグのテキストを書きます。
</p>
②の方法よりもHTMLのあちこちに細かく表示指定を書くことになるので、ブログや投稿ページ等では
使用することはあっても、通常のコンテンツページで使用することはあまりありません。
ちょっと難しく感じました～。
ワードプレスの投稿機能や、ブログ等のテンプレートを使う時は、②③の方法も使うこともあるとだけ覚えておけば大丈夫。
では、まずは①の方法をマスターします！
ホームページ制作のご相談はこちら WEB講座一覧