あそびラボ

お問い合わせ

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

講座5 CSSの組み込み方2019.12.21

へっぽこWeb講座5

ふくろう先生
ふくろう先生

HTMLの要素や枠組みがだいたいわかってきたので、

HTMLにCSSを組み込みための方法を説明するぞよ。

パンちゃん
パンちゃん

よろしくお願いしますゞ

ふくろう先生
ふくろう先生

CSSを組み込む方法は3種類あるのじゃが、
定番な方法と仕方なく使う場合の方法を伝授します!

パンちゃん
パンちゃん

定番と仕方なく使う方法?

詳しく教えてください~。

CSSの組み込み方

CSSの組み込み方には、下記の3つの方法があります。

① リンクを使ってCSSファイルを読み込ませる方法。
② styleタグを使ってHTMLの中に直接書く方法。
③ 任意の要素にStyle属性を指定して書く方法。

③は、HTMLのあちこちに細かく表示指定を書くことになるので、更新作業などのメンテナンスが大変になるため、
ブログ等のテンプレート以外では通常は使用しません。

CSSの組み込み方①・・・linkを使ってCSSファイルを読み込ませる

HTMLの<head>内に<link rel>を使って、CSSを読みこませる方法です。

この方法が一般的に1番使用されています。

HTMLの書き方例

<!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番使いやすいと思います。

■複数のCSSを読み込ませる例

<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講座一覧へ

池袋・練馬近郊でホームページ制作のご相談をされたい方はこちら ▶