デザイナーやWeb担当者であれば、HTML・CSSを一度は耳にしたり目にしたことがあると思います。
たとえば、HTML・CSSが必要になるのは以下のような場面です。
- Webサイトの改修
- 計測タグの設置
- HTMLメールの配信
- 記事のマークアップ
なかには読み書きの仕方がわからず、エンジニアやコーダーに追加や変更を依頼する方もいるのではないでしょうか。
依頼する際に意思疎通がうまくいかず、時間を無駄にしてしまうということもあるかもしれません。
しかし基本的なHTML・CSSの知識があれば、エンジニアさんとの会話や意思疎通がスムーズになったり、簡単なLPを自ら制作できたり、自分で対応できる幅が広がります。
本記事では「簡単な追加・変更の対応は自分でできるようになりたい」という方に向けて、HTML・CSSの基礎知識を解説していきます。
目次
HTMLとCSSの役割
HTMLとは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の頭文字を取った言葉で、Webページを作るための言語です。テキストや画像を表示したい、見出しをつけたい、リンク化したい……というときに、コンピュータが理解できるよう、特殊なルールに則って文字列を組んでいきます。
一方CSSは、Cascading Style Sheets （カスケーディング スタイルシート）の略で、HTMLで構築された内容を装飾したり、レイアウトを整えたりするための言語です。
すでに公開されているWebページ内のテキストや画像のみを変更する場合は、HTMLの知識だけでも対応可能ですが、ページのデザインを変更する場合はCSSの知識が欠かせません。HTML・CSSをセットで覚えることで、対応できる範囲が広がるでしょう。
HTML・CSSファイルの作成は、以下のようなエディタを用いて作成・編集できます。エディタによってはファイル作成時にHTMLのテンプレートが用意されているので、簡単に作成することが可能です。
- Visual Studio Code（無料・WinとMac対応）
- Dreamweaver（有料・WinとMac対応）
- サクラエディタ（無料・Winのみ対応）
最低限必要なHTML知識
まずはHTMLの基本構造や、よく使われるタグを見ていきましょう。
HTMLの基本構造
上の画像のように、HTMLは「タグ」と呼ばれる「<〇〇>〜</〇〇>」のような記法で、表示させたいテキスト情報を挟んでコードを組んでいきます。
たとえば、「こんにちは」という文字を表示させたいときは、「<p>こんにちは</p>」のように、文字をpタグで囲んで書くことで、文字を表示させることができます。
いきなりこの文字の羅列を見るとハードルが高いように感じてしまうかもしれませんが、順番に何を指しているのか解説するので、ご安心ください。
DOCTYPE宣言とHTMLタグ
HTMLを構築するとき、必ず先頭に<!DOCTYPE html>と書き、その直下に<html>〜<html>を記載してください。こうすることで、HTMLファイルのバージョンをブラウザに宣言することができます。 書かなかった場合、一部のブラウザでは意図したとおりに表示されない可能性があります。
ページの情報や表示部分の具体的な内容は、<html>タグの中に記載していきます。
headタグ
headタグは、ブラウザには表示されません。ページのタイトルや、説明文などの情報を記述する役割を持ちます。bodyタグよりも前に記載します。
headタグに入れるタグは多くありますが、以下の表の優先度の項目に沿って追加していくと良いでしょう。優先度は、以下の通りです。
- 必須…必ず入れる
- 推奨…できれば入れたい
- 場合によっては必要…条件によっては必ず入れる
| 内容 | 優先度必須 / 推奨 / 場合によっては必要 | 書き方例 | 説明 |
|---|---|---|---|
| 文字のエンコード | 必須 | <meta charset="UTF-8" /> | 文字コードを指定するためのタグです。文字化けを防ぐために指定する必要があります。 世界中で利用されているUTF-8を指定するのが一般的です。 |
| viwportの設定 | 必須 | <meta name="viewport" content="width=device-width,initial-scale=1" /> | 表示領域を設定します。 これを記載することで、PCやスマートフォンの幅に合わせて、倍率1で表示させられます。 基本的にどのサイトを作る場合でも、左の記述のまま記述します。 |
| titleタグ | 必須 | <title>ページのタイトル</title> | ブラウザのタブや検索結果に表示される際のタイトルを設定します。 |
| ページの説明 | 推奨 | <meta name="description" content="ページの説明"> | 検索結果でタイトルの下に表示される説明文です。 |
| ogpタグ | 推奨 | /* 共通で入れる */<meta property="og:url" content="ページのURL" /> <meta property="og:title" content="ページのタイトル" /><meta property="og:type" content="ページの種類" /><meta property="og:description" content="ページの説明" /><meta property="og:image" content="ページの内容がわかるイメージ（ファーストビューなど）" /><meta property="og:site_name" content="サイト名" /><meta property="og:locale" content="ja_JP" />/* X（旧Twitter）表示時の設定 */<meta name="twitter:card" content="カードの種類" /><meta name="twitter:site" content="@ユーザー名" /><meta >/* Facebook時の設定 */<meta property=”fb:app_id” content=”appID（15文字の半角数字）”> | ソーシャルメデイアにページをシェアする際などに表示される、画像やタイトルを設定します。 設定するタグの種類は多いですが、どれも重要です。それぞれのタグの意味について詳しく知りたい方は、以下をご参照ください。 参考：OGPとは？設定するべき理由と設定方法について | デジマギルド |
| URL正規化 | 推奨 | <link rel="canonical" href="ページURL（https://〜）"> | 重複コンテンツや類似するページが存在する場合、どのページを評価してほしいかを検索エンジンに伝えるためのタグです。 |
| ファビコン（サイトアイコン） | 推奨 | <link rel="icon" href="画像のパス名"> | ブラウザのタブなどに表示されるサイトのアイコン=ファビコンを設定します。 |
| CSSファイルの読み込み | 必須 | <link rel=”stylesheet” href=”CSSファイルのURL”> | 読み込ませたいCSSファイルを指定します。 |
| 広告用計測タグ | 場合によっては必要 | 各媒体の広告管理画面より発行 | 広告を運用している場合、コンバージョンなどを計測するために必要です。 最新の情報のもと媒体推奨の位置に配置してください。 |
bodyタグ
bodyタグの中で、実際にブラウザに表示させる要素を構築していきます。
ここでは、とくに使用頻度の高いタグをいくつか紹介します。
見出しをつける<h1>〜<h6>タグ
見出しをつけるには、<h1>〜<h6>タグを用います。
「サービスの特徴」「料金一覧」など、ページ内の各セクションにある見出しなどに使うことが多いです。
h1が一番大きく、数字が大きくなるほど小見出しになります。
文章を表示するpタグ
pタグは文章の段落を表示するためのタグです。説明文などに使われることが多いです。
リンクをつけるaタグ
リンクをつける場合は、aタグを用います。
リンクを貼りたい文言をaタグで囲い、herf属性でリンクを指定します。
画像を表示するimgタグ
画像を表示する際は、imgタグを用います。
imgタグは他のタグのように終了タグ（例：</p>）がなく、src属性で画像のパスを指定し、alt属性は、ブラウザ上で画像が上手く表示されなかった際に表示したいテキストを指定します。二つの属性は必ず指定するようにしましょう。
要素をグループ化するタグ
h1タグやpタグなどをそのまま羅列していくと、非常に見づらいコードになるだけでなく、CSSでスタイルを指定していく際にも不便になります。
そのような状況を避けるために、細かい要素をグループ化するためのタグを覚えておくと便利です。
| 種類 | 用途 | 書き方例 |
|---|---|---|
| headerタグ | ページ上部、ヘッダー | <header>表示したい要素</header> |
| mainタグ | ページのメインコンテンツ（一般的にheader, footer以外はこのタグに入れる） | <main>表示したい要素</main> |
| footerタグ | ページ下部、フッター | <footer>表示したい要素</footer> |
| sectionタグ | テーマを持ったグループ（例：サービスの特徴、料金一覧） | <section>表示したい要素</section> |
最低限必要なCSS知識
CSSは、以下のような書き方で記述していきます。
CSSも、HTMLと同じく、文字化けを防ぐために文字コードを指定する必要があります。
一行目には必ず「@charset “UTF-8”;」と書くようにしましょう。
CSSの基本的な記法は以下の通りです。
セレクタ
CSSでは、HTMLの説明で紹介した<h1>や<p>タグなどをセレクタとして指定し、その部分の文字の色やサイズなどを装飾できます。
しかし、表示する要素が増えてくると、タグだけでピンポイントに指定することが難しくなってきます。その場合に便利なのが、idとclassです。セレクタとして対象のタグに対し、属性値を指定できます。
idは1ページ中に一つのみ、classはいくつでも同じ属性値を設定することが可能です。
classは同じCSSを適用したい時などに、idはその要素にしか処理を加えたくない時に使用するようにしましょう。
また、セレクタの種類によって記法が異なるため、使い分けて記述していく必要があります。
| 種類 | 対象 | 記法 |
|---|---|---|
| 要素指定 | タグに対して指定する例：body, h1, p, a, | p { プロパティ: 値; } |
| class指定 | HTMLでclassをつけたclass名を使って指定する | .test { プロパティ: 値; }（class名の前にピリオド「.」をつける） |
| id指定 | HTMLでidをつけたid名を使って指定する | #test { プロパティ: 値; }（id名の前にシャープ「#」をつける） |
他にも、擬似要素や擬似クラス、メディアクエリなどを使ってさまざまな指定を行うことが可能です。
よりカスタムした実装が必要な場合は、調べて実装してみると良いでしょう。
- 擬似要素の参考ページ
擬似要素 - CSS: カスケーディングスタイルシート | MDN - 擬似クラスの参考ページ
擬似クラス - CSS: カスケーディングスタイルシート | MDN - メディアクエリの参考ページ
メディアクエリーの使用 - CSS - MDN Web Docs
※基本的に使用するのは「max-width, min-width」で、レスポンシブデザインをする際に用いられる場合が多い
プロパティ
セレクタで要素を指定したら、その要素に対してプロパティで装飾を加えていきます。
プロパティの種類が多いため、ここではよく使うものを、目的別にいくつか紹介します。
文字の装飾
色を指定するcolor
文字色を指定するには、colorプロパティを使用します。
colorの指定方法はいくつかありますが、基本的にカラーコード（上の図の「#ff0000」のような値）で指定することが多いです。
文字の種類を指定するfont-family
文字の種類を指定するには、font-familyを使用します。
フォントの種類は複数指定しておくことが推奨されています。理由は、ブラウザやデバイスによって用意されているシステムフォントが異なるためです。どのブラウザ・デバイスでも期待する表示となるように、複数指定する必要があります。
総称フォントは必ず最後に指定します。総称フォントとは、個別のフォント名を持たない、「ゴシック体」「明朝体系」のように、書体を総称したフォントのことです。
例えば、「游ゴシック」MSゴシック」は個別のフォント名ですが、この場合はゴシック体なので、sans-serifという総称フォントを指定することが望ましいです。
総称フォントを指定しないと、それより前に指定した個別フォント（游ゴシックなど）が読み込めなかった場合に、意図しないフォントで表示されてしまう可能性があるので、必ず入れるようにしましょう。
総称フォントには、以下の種類があります。
| 総称フォント名 | 書体 | 適用フォント例 |
|---|---|---|
| sans-serif | ゴシック体フォント | メイリオ、ヒラギノ角ゴシック、Arial |
| serif | 明朝体フォント | MS P明朝、ヒラギノ明朝、Times |
| system-ui | OSのUIと同じフォント | Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco |
| monospace | 等幅系フォント | MSゴシック、MS明朝、Osaka-Mono |
| cursive | 筆記体系フォント | Comic Sans MS、Script |
| fantasy | 装飾系フォント | alba、Chick |
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例より
表示したい書体の雰囲気に合わせて指定するのが望ましいですが、基本的にWebページはゴシック体か明朝体で作る場合が多いかと思います。その場合は、ゴシック体はsans-serif、明朝体ならserifを指定すると良いでしょう。
特に指定がないという場合には、system-uiを使うのも良いかと思いますが、sans-serifやserifと比べると少し表示がかすれることもあるので、注意が必要です。
また、システムフォントを使わず、Webフォントというフォントを使用する方法もあります。Webフォントを使用する場合は、ブラウザやデバイスに依存せずにどの環境でも同じフォントを表示させられます。
Webフォントは表示速度が遅くなることがありますが、意図したデザインにしやすいというメリットもあります。
デザイン性を求めるサイトの作成や、どの環境でも表示を統一したい場合などに導入を検討してみると良いでしょう。
文字の大きさを指定するfont-size
font-sizeは文字の大きさを指定します。
文字サイズに限らず、CSSではさまざまな単位が使われます。どれも使用頻度は少なくないため、覚えておくと良いでしょう。
絶対値であればpxを、他要素に合わせて変化させたい指定の場合はそれ以外の相対値を使います。
| 単位 | 絶対値/相対値 | 説明 |
|---|---|---|
| px | 絶対値 | 画面上の最小単位（1ピクセル）を基準とした 、基本的な単位。 |
| rem | 相対値 | ルート要素（htmlタグ）のフォントサイズに対する相対サイズ。 |
| em | 相対値 | 親要素のフォントサイズに対する相対サイズ。 |
| % | 相対値 | 親要素に対する比率でサイズを指定する。 |
| vw | 相対値 | ブラウザウィンドウの横幅の一定割合。 幅に応じて要素のサイズも変化する。 |
| vh | 相対値 | ブラウザウィンドウの高さの一定割合。 高さに応じて要素のサイズも変化する。 |
レイアウトの調節
幅と高さを指定するwidthとheight
要素の幅を指定するにはwidthを、高さにはheightを指定します。
単位は先ほど紹介した表を参考にしてください。
余白を調節するmarginとpadding
要素の外側の余白を指定するにはmarginを、内側の余白にはpaddingを指定します。
また、mariginとpaddingは、半角スペースで区切り、上下左右を個別に指定することができます。以下の表にまとめたように、指定したい条件に合わせて使い分けると良いでしょう。
| 書き方 | 例 |
|---|---|
| margin: 四辺すべて;padding: 四辺すべて; | margin: 10px;padding: 10px; |
| margin: 上下 左右;padding: 上下 左右; | margin: 10px 20px;padding: 10px 20px; |
| margin: 上 左右 下;padding: 上 左右 下; | margin: 10px 20px 30px;padding: 10px 20px 30px; |
| margin: 上 右 下 左;padding: 上 右 下 左; | margin: 10px 20px 30px 40px;padding: 10px 20px 30px 40px; |
CSSでは、ほかにも下線を引いたり、フォントの太さを変えたり、さまざまな装飾を加えられます。
詳しくは、以下のサイトが参考になります。
ブラウザ上でソースコードを確認する方法
HTML・CSSのソースコードを確認するには、Chromeの検証ツール（デベロッパーツール）が便利ですので紹介します。
検証ツールは、Webページを右クリックし、メニューから「検証」をクリックして表示します。
「検証」をクリックすると、デベロッパーツールが表示されます。
画面右側の表示がデベロッパーツールで、その中にHTMLとCSSが表示されます。
デベロッパーツールには様々な機能がありますが、基本的には以下の機能を使うことが多いです。
- 画面サイズに合わせた表示プレビュー
- HTMLとCSSの確認と編集
HTMLとCSSの編集方法は、それぞれ以下の通りです。
HTMLの編集方法
①変更したい要素をクリックします。
②①でクリックした要素に該当するHTMLコードが選択されます。
その部分を右クリックして、「HTML as edit」をクリックすると、編集できるようになります。
CSSの編集方法
cssは、変更したい値をクリックすると、編集することができます。
新しくプロパティを追加する場合は、閉じ括弧「}」の直前でクリックすると編集モードになり、プロパティと値を追加することができます。
まとめ
HTMLとCSSの基礎である構造の部分から、実際の書き方や表示の仕方まで説明しましたが、この記事だけを見ると、もしかしたら難しそうだと感じる方もいらっしゃるかもしれません。
筆者も初めてコーディング（ソースコードを書くこと）をしたときは、何がなんだかわからず、本や参考サイトと睨めっこしていた記憶があります。実際に自分で簡単にコーディングしてみたり、人のコードを読んでみたりすることで、自然と読み書きができるようになりました。
参考サイトや本を軽くみた後、実際に手を動かしてみることで、思いのほか簡単に習得できると思いますので、ぜひこれを機にチャレンジしてみてはいかがでしょうか。
もちろん、わからないことや自分だけでは難しいと思うことがあれば、コーダーやデザイナーに助けを求めていただければと思います。
Momoka Sakakura
前職では、Slerの会社に主にiOSアプリエンジニアとして従事。その後、前職業務内でデザインに興味を持ったことがきっかけとなり、スクールに通う。人の役に立ちたいという思いと広告業界に興味があったことから、2022年10月よりアナグラムに入社。 趣味は、家庭菜園、ガーデニング、音楽鑑賞、ショッピングなど、多趣味。
