htmlについて徹底解説!

Webサイトのスタイル統一を目指して!HTMLのスタイルはCSSで決まる

折乃 杏

インフラエンジニア/ヘルプデスク(COBOLも経験あり)/ボールド歴3年

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は、HTMLと組み合わせて使用する言語です。

HTMLがWebページ内の文書構造を記述することに対し、CSSではそれらのデザインを定義します。例えば、Webページがブラウザで表示される際の文字や線の色、サイズ、レイアウトなどの表示スタイルです。

CSSの記述方法は複雑そうに見えますが、覚えてしまえば簡単です。この記事ではCSSの基本について、初心者向けに解説していきたいと思います。


1.CSSとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、Webページのスタイルを指定するための言語です。Webページに限らず、Wordなどで作成された文書のスタイルを制御する技術全般をスタイルシートといいますが、HTMLXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

1-1.スタイルシートが必要な理由

Webページの視覚的な部分の制御をCSSが担うことで、簡潔なHTMLが作成でき、理解しやすくなります。

現在、ウェブページを制作する言語として広く利用されているHTMLXHTMLには、 <color><font>などの装飾目的のタグや属性があり、HTMLだけでウェブページのスタイルを制御することもできます。

しかし、HTMLは文書構造を定義するための言語であり、そこにスタイル関連の定義まで追加してしまうと、HTMLファイルの文書構造が崩れてしまったり、後から修正が必要になった時もページ全てを見直し、修正することが必要になります。「スタイルに関してはあのCSSファイルを参照して」と、HTMLファイルに指定しておけば、そのCSSファイル1つ修正すれば、参照しているHTMLファイルは、表示の確認を行うだけで済みます。

また、HTMLのタグをどのように表示するかは、ブラウザの種類はバージョンによって異なる場合があります。 HTMLタグを駆使してWebページを作成し自分のパソコンでは思い通りに表示できたとしても、他のパソコンやスマホでは、意図しないレイアウトになってしまうこともありえます。

このような理由から、HTMLでは文書構造のみを定義して、スタイルについてはスタイルシートで指定することが推奨されています。

1-2.CSSのバージョン

現在CSS1からCSS3までの3つのバージョンが存在しています。(「CSS4」はCSSのモジュール化に伴い「Cascading Style Sheets,Level4」モジュールの総称名となっています)

1996年にCSS1Cascading Style Sheets,Level1)が勧告されてから、追加、拡大、改訂が行われています。現在はCSS3が主流です。


2.HTMLでCSSを読み込むには

CSSを読み込むには、以下のような方法があります。

  • 外部ファイルを読み込む
  • head内に記述する
  • インラインで記述する

では、それぞれの書き方を見てみましょう。

2-1.外部ファイルを読み込む

<link>タグで外部CSSファイルを呼び出して適用します。

CSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の<head>タグ内に<link>タグを記述して、外部CSSファイルを指定します。<link>タグのtype属性の値にはtext/cssを指定します。スタイルの修正のしやすさやHTMLファイル数が多いときなど、この方法でスタイルシートを設定するのがおすすめです。

スタイルシート部分は外部ファイル(abcdef.css)に記述。

【HTMLファイルの記述】

2-2.head内に記述する

<style>タグで文書単位に適用する

HTMLファイルの<head>タグ内に<style>タグを記述して、ファイル単位にスタイルシートを設定します。

そのページさえスタイルが適用できればいい!という場合向きです。

【HTMLファイルの記述】

2-3.インラインで記述する

タグにstyle属性を追加して局所的に適用する場合です。そのページのこの部分さえどうにかなればいい!という時に使用します。

2か所以上ある時は今後のHTMLファイル管理のためにも外部CSSファイルを作成するか、headタグ内で指定することをお勧めします。

【HTMLファイルの記述】


3.CSSの書き方

上であげた例の中では、外部ファイルを読み込む方法が一般的な方法になりますので、「外部ファイルに記述する方式」でCSSの記述方法をご紹介します。

2-1でも例にあげましたが、HTMLファイル側には、linkタグのhref属性に以下のように記述しておきます。

3-1.書き方の基本

【HTMLファイルの記述】

(「abcdef.css」はCSSファイル名です)

CSSファイル側は、たとえばこのように記述します。

【CSSファイルの記述】(abcdef.cssの中身)

【ブラウザでの表示例】

ブラウザでの表示例

CSSは「セレクタ」「プロパティ」「値」の3つ組み合わせでスタイルを指定します。「セレクタ」は上記の例では「body」の部分です。どのタグにスタイルを設定するのかを書きます。「プロパティ」は「margin」や「padding」の部分、「値」は「0」の部分になります。値の部分を「:」と「;」ではさみます。

セレクタ {プロパティ:値;} という書式です。

例1:フォントの指定

フォントの指定はfont-familyプロパティで指定します。

※フォント名にスペースが含まれている場合は引用符で囲んでください。

sans-serif」はゴシック系のフォントを指定しています。

例2:文字色

文字の色はcolorプロパティで指定します。基本的な書き方は次の通りです。

例3:文字の大きさ

文字の大きさはfont-sizeプロパティで指定します。

値の種類は以下の通りです。

  • normal(普通の太さ)
  • bold(太字)
  • 100900の値(大きい程太い)

例5:テキストの左寄せ・中央寄せ・右寄せ

テキストの寄せ方はtext-alignで指定します。

値の種類は以下の通りです。

  • right(右寄せ)
  • center(中央寄せ)
  • left(左寄せ)

例6:段落のあとに空白行をつくる

「段落のあと」なので「margin-bottom」とします。

段落の上にあけたい時は 「margin-top」となります。

em」はフォントサイズの高さを1とします。

%」や「px」でも指定できます。

3-2.セレクタのグループ化とクラス指定

CSSは「セレクタ」「プロパティ」「値」の3つ組み合わせでスタイルを指定しますが、このセレクタの部分を複数指定することができます。

セレクタはカンマ(,)で区切って複数指定することができます。

/*」と「*/」で囲んだ部分はコメントとして扱われます。

また、同じ要素でもある部分は赤、ある部分は青、というような指定をしたいときは「クラス」をつけます。

下記の「red」「blue」の部分が「クラス」です。

【HTMLファイルの記述】


4.CSS作成時に便利なサイトとおすすめ書籍

基本はおさえた!でも、プロパティは何種類もある!当然、全て覚えるの無理なので「どんな指定ができるのかな」と「どんな使い方ができるのかな」と、気になった時は下記のサイトや本をご活用ください。

お勧めサイト】

http://www.htmq.com/style/

スタイルシートリファレンス(目的別)

※各プロパティの対応ブラウザもわかります。

 

https://saruwakakun.com/html-css/basic/linear-radial-gradient

CSSのグラデーション(linear-gradient)の使い方を総まとめ!

CSSでグラデーションも作れます。

 

お勧め書籍】

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML5とCSSの基本を理解して、さらにデザインの基礎も学べる一冊です。サンプルコードもダウンロードできます。


5.さいごに

いかがでしょうか。

HTMLで文書構造、CSSでデザイン、と分業させることで、あとからのメンテナンスもずいぶんラクになると思います。

HTMLファイルとセットで作成して、いろいろなデザインを楽しんでみてください。

私たちは、全てのエンジニアに市場価値を高め自身の望む理想のキャリアを歩んでいただきたいと考えています。もし、今あなたが転職を検討しているのであればこちらの記事をご一読ください。理想のキャリアを実現するためのヒントが見つかるはずです。

『技術力』と『人間力』を高め市場価値の高いエンジニアを目指しませんか?

私たちは「技術力」だけでなく「人間力」の向上をもって遙かに高い水準の成果を出し、関わる全ての人々に感動を与え続ける集団でありたいと考えています。

高い水準で仕事を進めていただくためにも、弊社では次のような環境を用意しています。

  • 定年までIT業界で働くためのスキル(技術力、人間力)が身につく支援
  • 「給与が上がらない」を解消する6ヶ月に1度の明確な人事評価制度
  • 平均残業時間17時間!毎週の稼動確認を徹底しているから実現できる働きやすい環境

現在、株式会社ボールドでは「キャリア採用」のエントリーを受付中です。

まずは以下のボタンより弊社の紹介をご覧いただき、あなたの望むキャリアビジョンをエントリーフォームより詳しくお聞かせください。