CSSは外付け?直書き? マンガでわかるCSS入門

公開日: : 最終更新日:2015/10/04 CSS

CSS外付け 直書き

CSSは外付けがテッパン!

CSSでWebページを装飾するとき、CSSは外部ファイル化して、それをHTMLから読み込むのが一般的です。

CSSでWebページを飾る方法は3つある

という方法があります。

HTML

下に3つの具体的な方法を書いていくね!


1.HTMLタグに直書きする

Body内のHTMLタグに直書きする方法です。
四コマでは2コマ目ですね。HTMLちゃんのBody部分にごっちゃりとコードが書いてある状態です。

<p style="color:#000; 
font-size:12px; 
font-weight:bold; 
padding:10px 0px;">
とても読みづらいコードになっちゃうよ
</p>

HTML

これだと確かにコードを編集するときにミスしちゃいそうだよね。


HTML

そうだね。さらにSEO的にもあまりよくないんだ。コードがゴテゴテしていると、せっかく文章が書いてあっても、検索エンジンのクローラー的は「読みにくいんだよっ!」ということになってしまうよね。コードがシンプルであるほど、インデックスされやすい、つまり検索上位に上がりやすいと言われているよ。


2.head内に直書きする

二つ目はHTMLファイルのヘッダー内にスタイルを直書きする方法です。

<!doctype html>
<html>
<head>
<title>ページタイトル</title>
<style type="text/css">
<!--
.test {
color:#000;
font-size:12px;
font-weight:bold;
padding:10px 0px;
}
-->
</style> 
</head>
<body>
<p class="test">
testクラスのスタイルが適用されるよ
</p>
</body>
HTML

文章と装飾が分離されているから、さっきの直書きよりは大分マシな気がする


HTML

そうだね。でもこれだとスタイル指定をhead内に長々と書くことになっちゃうんだ。headが長ーくなっちゃうとクローラーも文章にたどり着きにくくなるよね。


HTML

次回の記事でまた詳しく説明するけど、もしこのheadに直書きする方法ですべてのページを作っちゃったら、あとになって「この文字色を一気に変えたいな」なんてときにHTMLファイルをひとつひとつ開いて編集するはめになるよ。


HTML

え〜!それは嫌だ!
じゃあどうすればいいの?


HTML

そこでCSS外付けだよ!


3.CSS外付け

HTML

まずはHTMLのheadタグ内にこう書くよ


<link href="sample.css" rel="stylesheet" type="text/css" />
HTML

次に、sample.cssというファイルを作ってその中にスタイルを書いていくよ


@charset "utf-8";
.test {
color:#000;
font-size:12px;
font-weight:bold;
padding:10px 0px;
}
HTML

ちなみに、@charset “utf-8”;というのは、「UTF-8という文字コードで記述していますよ」と宣言しているだけだよ。


文章とスタイルが分離されてすっきり

<!doctype html>
<html>
<head>
<title>ページタイトル</title>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="test">
testクラスのスタイルが適用されるよ
</p>
</body>
</html>
HTML

CSSを外付けすることで文章とスタイルが分離されてすっきりしたね!


HTML

次回はCSSを外付けするとどんないいことがあるのか掘り下げていくよ!


初心者向け


中級者向け

記事作成:湊川 あい
マンガ・イラスト:湊川 あい


The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

image

マンガでわかるWebデザインが書籍化!全国の書店・アマゾンで発売

マンガでわかるWebデザインが本になりました! 「わかばちゃんと学ぶWebサイト制作の基本」 出

記事を読む

image

Web制作で使う言語たちを図解してみた HTML,CSS,JavaScript,PHP

HTML CSS JavaScript PHPの関係を図解してみた HTML 「HTML

記事を読む

CSSとは マンガで解説

CSSとは? 簡単解説!マンガでわかるCSS入門

CSSとは? CSSとは、Webページの見た目を担当する言語です。 「カスケーディン

記事を読む

manga_cssmakefile

CSSファイルの作り方 マンガでわかるCSS入門

CSSファイルってどうやって作るの? Webデザインに初めて挑戦するとき、「CSSっていう

記事を読む

manga_CSS3_resize

CSS外付けのメリットとは?マンガでわかるCSS入門

CSSは外付けのメリットって? CSS外付けのメリットはこんなかんじ 1 メンテ

記事を読む

image

HTMLちゃんとCSSちゃんを擬人化するとこんな感じ

  ちょっとラクガキ。 HTMLちゃんとCSSちゃんの日常を描いてみました。

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

emojigit_catch01
絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Em

phpstudyコラボ画像
PHP勉強会@東京に登壇します 2016.11.30

マンガでわかるWebデザイン・マンガでわかるGitの湊川あいです。

→もっと見る

PAGE TOP