バナー画像

HTMLではCSSを適用させる場合に二通りの方法があります。

一つ目はHTMLに使用されるタグに直接記述する方法で、二つ目は<style></style>の中にセレクタなどを使い記述していく方法です。

そこで今回はこの二つの方法について解説していきたいと思います。

HTMLでは基本中の基本ですが、学習を開始して間もない方にとって、基本理解というのは今後の学習意欲を継続させるうえでかなり重要な部分です。

ここで躓くとHTMLに対する壁を自ら作ってしまい、学習スピードが落ちるばかりでなく、ひどい場合にはHTML構築に対して嫌悪感すら抱く事態となってしまいます。

この記事では具体的に、そして出来るだけ簡単にわかりやすい解説を心がけていきますので、初心者の方も安心して読んでください。

styleとは

HTMLには先ほど少し触れたように、CSSに対していくつかの記述方法が存在します。

これらの方法には当然メリットとデメリットが存在しますが、そもそもなぜこのようにいくつかの方法が存在するのかについてまずは説明していきます。

無駄な知識はいらないと思われる方や学習だけをしていきたいと思われる方は以下の囲みは読み飛ばして次のステップに移動してください。

ガラケー時代の名残

現在ではガラケーというものはほとんど見かけず、携帯デバイスといえばスマホやタブレットが主流となっています。

これらのデバイスはいわば携帯版PCと同じで、構造的にもCPU、GPU、メモリといったPCに使われている部品が数多くつかわれています。

当然出来ることも限りなくPCに近いため、サイトの観覧もPCブラウザと同じと思ってもらっても遜色ないほどですが、以前はそうはいきませんでした。

ガラケーと呼ばれる昔の携帯電話ではブラウザもキャリア独自のものが使われており、表示できる容量についてもかなり低く制限されていました。

当然キャリア独自の疑似ブラウザがいくつもあったため、CSSに関してもキャリアによっては「外部ファイルからのインクルードはできない」というような仕様が平気で作られていたわけです。

こういった場合に唯一使用できたのが「タグに直接記述する方法」です。

現在ではどの参考書を見てもあまり触れられているものはありませんが、こういった時代があったということを知っておくことも重要な学習に繋がるかもしれません。

タグに直接記述する方法

HTML構築に使用するタグの中に直接属性を記述していく方法。ガラケーが主流だった時代、携帯サイトではこの方法が広く使われていた。

<style></style>の中に記述していく方法

HTMLファイルには大きく分けて<head>と<body>という2つのパートがあり、この<head></head>の中に<style></style>を記述し、その中でセレクタ毎に異なるCSSを記述していく方法。

<head>の中にはCSSの他にも<title>タグや<meta>タグと呼ばれる基本的情報を記述するタグが存在する。

外部CSSファイルに記述していく方法

基本的には<style></style>の中に記述していく方法と同じですが、こちらはCSSのみを記述した外部ファイルを用意し、HTMLファイルでその外部ファイルをインクルードして使用します。

制作後に特定の部分だけを変更する際にも非常にわかりやすい作りとなっているため、現在のサイト制作の現場においては主流となっている方法です。

<style>タグの使い方

それではここからは実際に<style>タグを使って解説していきます。

まず一つ目はHTMLの<head>と</head>の間に<style></style>を記述し、更にその中に「要素名. クラス名. { プロパティ: 値; }」を記述していく方法です。

<!doctype html>
<html>
<head>
	<style>
		div {
			width: 250px;
			height: 250px;
			border: solid 2px gray;
		}
		
		span {
			display: block;
			color: white;
		}
		
		#sample {
			background-color: crimson;
			margin: 20px;
		}
		
		span.sample {
			display: inline;
		}
		
		.outer {
			position: relative;
			width: 250px;
			height: 250px;
			margin: 20px;
		}
		
		.outer > .inner {
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			background-color: blue;
		}
	</style>
</head>

<body>
	<div id="sample">
		<span>ここにサンプルが入ります。</span>
	</div>
	<div class="outer">
		<div class="inner">
			<span class="sample">ここにサンプルが入ります。</span>
		</div>
	</div>
</body>
</html>

表示結果

このHTMLファイルに直接CSSを記述する方法は小規模のHTML開発においては非常に便利ですが、中規模以上の開発になってくるとCSSの量が増えてくるため、読み込みに時間がかかってしまいます。

中規模以上の開発にはやはり外部ファイルを用意し、そこにCSSを全て詰め込む方法が有効ということを予め意識しておいてください。

二つ目はタグに直接記述する方法ですが、こちらはもうほぼ使わないと思って大丈夫でしょう。

しかし知識としては持っておくに越したことはないので、簡単に解説していきます。

<!doctype html>
<html>
<head>
</head>
<body>
	<p style="font-size: large; padding: 10px 5px; background-color: darkcyan">ここにサンプルが入ります。</p>
</body>
</html>

表示結果

このようにタグの中に「style=””」を直接記述することでCSSを適用させることが出来ます。

ただし、この方法は後でCSSに変更を加える際、非常に解り難く管理が煩雑になってしまいがちなためお勧めはできません。

知識の一つとして覚えておく程度にとどめておいてください。

ベストな方法は外部ファイル

CSSを読み込ませる方法としてやはり最も良い方法は外部ファイルをインクルードする方法でしょう。

今回のテーマとは若干それてしまいますが、こちらの方法もすぐに実践できるほど簡単ですので、紹介してみたいと思います。

まず、エディタでCSSのみを記述します。

@charset "utf-8";
/* CSS Document */
div {
	width: 250px;
	height: 250px;
	border: solid 2px gray;
}

span {
	display: block;
	color: white;
}

#sample {
	background-color: crimson;
	margin: 20px;
}

span.sample {
	display: inline;
}

.outer {
	position: relative;
	width: 250px;
	height: 250px;
	margin: 20px;
}

.outer > .inner {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	background-color: blue;
}

次に拡張子を「.css」にして保存します。

あとはHTMLファイルで<head></head>の間に「<link rel=”stylesheet” href=”外部ファイル名.css”>」と記述し、後は普通にHTMLで構築するだけです。

<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="sample.css">
</head>

<body>
	<div id="sample">
		<span>ここにサンプルが入ります。</span>
	</div>
	<div class="outer">
		<div class="inner">
			<span class="sample">ここにサンプルが入ります。</span>
		</div>
	</div>
</body>
</html>

表示結果

<style></style>の間に記述する方法と同じように表示されていることが確認できました。

まとめ

いかがでしたか?

今回はstyleについての様々な記述方法について解説してみました。

現場では外部ファイルを使って記述する方法が主流となっていますので、今後のためにもプロが使っている方法で学習を進めった方が実践で役に立つと思います。

HTMLの学習を始めたばかりの方にとってはどの方法であっても学習コストは同じだと思いますので、出来るだけ実践で使える方法で学習をするように心がけてみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。