HTML・CSSとは
WEBページは、HTMLとCSSという言語で見た目が作られています。
HTMLはホームページの「骨格」の役割、CSSは色や背景色、枠線などで飾る「装飾」の役割を担うものです。
家に例えれば、HTMLは骨格の「柱や土台」、CSSは飾るための「屋根や壁、窓枠」でイメージすると良いでしょう。
まずはイメージを掴むために、サンプルファイルを作成して出力結果を確認してみましょう！
・「com.cmps」内に「front」フォルダを作成し、「index.html」ファイルを作成してください。
※なお、本来Javaを用いてWebアプリケーションを作成する場合「動的Webプロジェクト」と呼ばれるJavaプロジェクトとTomcatを連携させたプロジェクトを作成します。
今回はあくまでHTMLのタグがどのようなものか確認するために、フォルダ・ファイルを配置・作成しています。
・「index.html」ファイルに下記のコードを記述しましょう。
内容は後ほど説明しますが、HTMLではこのような<>で囲む記述スタイルになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLの基本的なタグ・簡易CSS</title>
</head>
<body>
<h1>タイトル</h1>
<p>文章をここに書きます</p>
</body>
</html>
WEBページでどのように表示されるのか、実際に確認してみましょう！
ブラウザ（ChromeやMicroSoft Edgeなどのこと）上でHTMLファイルを開くには、以下のどちらかの手順で行います。
Eclipseのパッケージエクスプローラー上にて、
（A）「index.html」ファイルを右クリック →Windowsエクスプローラー(エクスプローラーから直接「com/cmps/front」フォルダを開いても可)
→「index.html」を右クリック →「開く」もしくは「プログラムから開く」でChromeを選択
（B) HTMLファイルを選択し右クリック
→「次で開く」→「Webブラウザー」
下図のようにブラウザで確認できたでしょうか。
・Code PenというWebサービスでは
ファイルを作成せずに、HTMLやCSSの記述がどのように画面表示されるかを手軽に確認できます。
HTMLの書き方
HTMLは、ウェブページに表示したい文章やウェブページの情報を「タグ」ではさんで書いていきます。
それぞれ開始タグ、終了タグと呼ばれ、基本的にセットで使われます。(終了タグのいらない例外もあります)
ウェブページの文章や情報は、どのタグにはさまれるかによってタグの中身の役割が変わってきます。
<タグ名 属性=”〇〇”> 文字など</タグ名>
*終了タグの先頭には「/」が付きます。
*属性についてはページの後半で説明します。
タグをタグではさんでWEBページを作成していきます。これを入れ子構造といい、
マトリョーシカのようにタグをタグの中に入れていきます。
Javaのif文などと同じように、タグの中にタグを入れる場合はインデントを下げます。
<タグ名>
<タグ名>文字など</タグ名>
</タグ名>HTMLの構造
HTMLファイルを作成するにあたって、下記のタグが最低限必須なものになります。
慣れないうちはファイルを作成したら下記のコードを貼り付けることから始めましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ここにタグを記述 -->
</body>
</html>1つ1つ説明していくと
<!DOCTYPE html>
…DOCTYPE宣言と言い、このファイルがHTMLファイルであることを示します。終了タグはありません
<html></html>
…HTMLコードを表すタグです。DOCTYPE宣言以外のタグはすべてこの中に記述します。
<head></head>
…headタグにはWEBページの情報や設定を記述します。基本的に見た目に反映されない内容です。
慣れないうちは、ブラウザのタブの表示名になるtitleタグだけ記述することでいいでしょう。
<body></body>
…このbodyタグ内に書いたものが、基本的に画面に表示される部分になります。
これらのタグは基本的に1ページに1つのみ記述します。
初めてHTMLに触れる方は、下記の参考サイトも併せて読んでください。
参考サイト：初心者向けHTML入門：書き方の基本とタグの使い方
HTMLタグ
よく使われる基本のタグとしては以下の種類があります。
index.htmlファイルの<body>タグ内に書いて試してみましょう。
見出しタグ
見出しに使うタグです。
<h1></h1>から<h6></h6>までの6種類があり、見出しのランクによりタグを使い分けます。
基本的にはサイト名・ページタイトルにはh1を、各章の見出しはh2が使われます。
<h1>ページタイトル</h1>
<h2>HTMLの書き方を解説</h2>
<h3>見出しタグについて</h3>段落タグ
文章を書く時は<p></p>で文章を囲みます。
話の内容が変わる場合は<p></p>を増やします。
<p>ここに文章を入れます。</p>
<p>段落が変わるときはpを追加します。</p>改行タグ
HTMLコード内でEnterを押して改行しても、ブラウザに表示される文では改行が反映されません。
HTMLコード内で改行するには、<br>タグを使用します。
<p>ここで<br>改行します。</p>
<!-- brタグでは終了タグは使いません。 -->出力結果
ここで
改行します。
pタグとbrタグの違い
| pタグ | brタグ |
|---|---|
| 内容を段落分けするために使います。 基本的に1つの話題に対して1つの段落を用います。 | 1つの段落内で改行するために使用します。 文章を読みやすくするために使います。 |
箇条書きリスト
<ul>と<li>タグのペアで使用します。<ul>～</ul>のタグ内に<li></li>タグを書くことで、リストが作成されます。
順不同のリストを作成するときに使います。
デフォルトでは「・」付きのリストになります。
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ul>出力結果
- 項目
- 項目B
- 項目C
順序リスト
1,2,3……と順番に並ぶリストを作成するときはolタグを使用します。<ol>と<li>タグのペアで使用します。
デフォルトでは番号付きのリストとして表示されます。
<ol>
<li>手順１</li>
<li>手順２</li>
<li>手順３</li>
</ol>出力結果
- 手順１
- 手順２
- 手順３
リンク
「クリックするとリンク先へと飛ぶ」ボタンを作成するには、<a>~</a>タグではさんで作成します。
<a>タグには「href属性」と呼ばれる属性が必要で、<a href=”リンク先のURL“>という形で記述します。
<a href=”遷移先”>ここがリンクになる</a>
<a href="https://cmps.jp/">コンパス株式会社</a>出力結果
コンパス株式会社
テーブル
HTMLで表を作成するときまず<table>～</table>でくくります。その中に<tr></tr>タグで行を作成し、<td></td>タグでセルを作成します。
<td>タグの代わりに<th></th>タグでくくれば、表の見出しとして定義できます。
<!-- 項目が表の上部にある場合 -->
<table>
<thead><!-- thのみの塊はtheadで囲む -->
<tr><!-- 行 -->
<th>項目</th><!-- セル -->
<th>項目</th><!-- セル -->
</tr>
</thead>
<tbody><!-- tdもある場合はtbodyで囲む -->
<tr><!-- 行 -->
<td>内容</td><!-- セル -->
<td>内容</td><!-- セル -->
</tr>
</tbody>
</table>
<!-- 項目と内容が横に並んでいる場合 -->
<table>
<tbody><!-- thとtdが混在している場合もtbodyで囲む -->
<tr>
<th>項目</th>
<td>内容</td>
</tr>
<tr>
<th>項目</th>
<td>内容</td>
</tr>
</tbody>
</table>| 項目 | 項目 |
|---|---|
| 内容 | 内容 |
| 項目 | 内容 |
|---|---|
| 項目 | 内容 |
参考サイト：HTMLのtableでテーブルを作る方法と応用テクニックを解説
セルを結合する場合はcolspan属性・rowspan属性を使います。横に並んだセルを結合するならcolspan属性を、縦に並んだセルならrowspan属性を記述します。
<table>
<thead>
<tr>
<th>結合しないセル</th>
<th colspan="2">横に並んだ2つのセルを結合</th>
<!-- 結合されたth/tdは書かない -->
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">縦に並んだ2つのセルを結合</th>
<td>結合しないセル</td>
<td>結合しないセル</td>
</tr>
<tr>
<!-- 結合されたth/tdは書かない -->
<td>結合しないセル</td>
<td>結合しないセル</td>
</tr>
<tr>
<th>結合しないセル</th>
<td>結合しないセル</td>
<td>結合しないセル</td>
</tr>
</tbody>
</table>| 結合しないセル | 横に並んだ2つのセルを結合 | |
|---|---|---|
| 縦に並んだ2つのセルを結合 | 結合しないセル | 結合しないセル |
| 結合しないセル | 結合しないセル | |
| 結合しないセル | 結合しないセル | 結合しないセル |
参考サイト：【HTML初心者入門】テーブルのセルを結合する方法を解説！
colタグを使うと同じ列のセルに同じ設定ができます。列を同じ幅にするときにも使います。colタグはcolgroupタグで囲みます。
colタグは上から順番に読み込まれ、表の左側の列から順番に適用されます。
ただしcolタグを使う方法はPC版とスマホ版とで設定を別々にすることができません。PC版とスマホ版で変更点がある場合はcssを使用しましょう。
<table>
<colgroup>
<col style="width: 10%;" /><!-- 左側から1番目の列に適用 -->
<col span="4" style="width: 22.5%;" /><!-- 左側から2番目の列から数えて4列に適用（2, 3, 4, 5列目) -->
</colgroup>
<thead>
<tr>
<td></td>
<th scope="col">国名</th><!-- scope="col"は横方向に項目が並ぶことをコンピューターに伝える -->
<th scope="col">首都</th>
<th scope="col">公用語</th>
<th scope="col">通貨</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">国A</th><!-- scope="row"は縦方向に項目が並ぶことをコンピューターに伝える -->
<td>日本</td>
<td>東京都</td>
<td>日本語</td>
<td>円</td>
</tr>
<tr>
<th scope="row">国C</th>
<td>韓国</td>
<td>ソウル</td>
<td>韓国語</td>
<td>ウォン</td>
</tr>
<tr>
<th scope="row">国B</th>
<td>イギリス</td>
<td>ロンドン</td>
<td>英語</td>
<td>スターリング・ポンド</td>
</tr>
<tr>
<th scope="row">国D</th>
<td>ペルー</td>
<td>リマ</td>
<td>スペイン語</td>
<td>ソル</td>
</tr>
</tbody>
</table>| 国名 | 首都 | 公用語 | 通貨 | |
|---|---|---|---|---|
| 国A | 日本 | 東京都 | 日本語 | 円 |
| 国C | 韓国 | ソウル | 韓国語 | ウォン |
| 国B | イギリス | ロンドン | 英語 | スターリング・ポンド |
| 国D | ペルー | リマ | スペイン語 | ソル |
divタグ
見た目を変える目的のみで要素を分けるときには<div></div>で囲みます。divタグは文書構造では意味を持たないブロック要素です。
<ul>
<li>
<h2>見出しは上に置きたい</h2>
<div>
<img src="" alt="">
<p>画像と文章だけ横並びにしたいのでdivタグで囲んだ</p>
</div>
</li>
<li>
<h2></h2>
<div>
<img src="" alt="">
<p></p>
</div>
</li>
</ul>spanタグ
pタグやaタグなど文中で一部分だけ見た目を変えたい場合は、インライン要素であるspanタグで囲みます。文字色や文字サイズを部分的に変えるときによく使います。
<p>テキスト<span>ここだけ文字色を変えたいのでspanタグ囲んだ</span>テキスト</p>参考サイト：divとspanの違いは？使い分け方を初心者向けに解説
他にもarticleタグやsectionタグなど数多くのHTMLタグがあります。適切に使い分けるとソースコードが見やすくなったり、コンピューターが理解しやすくアクセシビリティ向上やSEO対策にも繋がったりします。
時間があるときには参考サイトを見て、どのようなタグがあるかを調べてみるのもよいでしょう。
【初心者向け】HTMLのタグ一覧と書き方をわかりやすく解説
<article>: 記事コンテンツ要素
<section>: 汎用セクション要素
articleとsectionの違いと使い分け【HTML】
属性
属性はHTMLタグ内に記述するもので、要素に対して機能を付け加えられるものです。
・開始タグの要素名の後ろに半角スペースを空けて、「属性名=”属性値”」という形式で書きます。
・一般に半角ダブルクォーテーションで囲みます。（全角×）
・属性同士も半角スペースを空けることで続けて記述することができます。
<タグ名 属性1="〇〇" 属性2="〇〇"> 文字など</タグ名>
いくつか代表的なものを見ていきましょう。
style属性
style属性とはHTMLタグに直接スタイル（CSSという見た目を変更する装飾）を指定するための属性です。
<p style="font-weight: bold; font-size: 30px; color: darkolivegreen;">タグに直接見た目を指定します。</p>出力結果
タグに直接見た目を指定します。
style属性で指定したスタイルは優先順位が非常に高く、外部CSS（後述）よりも優先されて適用されます。
昔はHTMLタグのstyle属性のみで要素の装飾をしていました。
しかし大量のスタイルを適用するときはstyle属性のみだと管理がしにくいため、現在では外部スタイルシートに記述していくやり方が主流です。
この場所でのみ使うスタイルは、style属性に記述することが設計上正しいといわれています。
aタグのrel属性
target=”_blank”をaタグの中に記述すると別タブで開くようになります。
target=”_blank”で外部サイトを開く場合は、セキュリティ対策のためにrel=”noreferrer noopener”を記述しておきましょう。
「target=”_blank”」には「rel=”noopener”」を！htmlで外部リンクを貼る際の注意点。
SEOの観点では、リンク先サイトと自分のサイトの関連性が低い場合、自分のサイトからリンク先へクロールさせたくない場合にはrel=”nofollow”を設定します。
nofollowとは？設定すべきケースは2つだけ！正しく理解しよう
aタグのrel属性の一部を紹介します。
| nofollow | リンク先と自分のサイトを関連付けない。 |
|---|---|
| noopener | リンク先のページからリンク元への操作を防ぐ。 |
| noreferrer | リンク先にリンク元の情報を送信しない。 |
| sponsored | 広告や有料のリンクを表す。 |
| ugc | コメントやフォーラム投稿などに貼られたリンクに使用する。 |
他の属性について知りたい方はこちらを参考にしてください。
HTML 属性リファレンス
<a href="https://cmps.jp/" rel="noreferrer noopener" target="_blank">コンパス株式会社</a>class属性・id属性
classとidは開始タグ内に書く属性の1つです。
タグに名前を付けることができ、CSSで装飾するときなどに class属性や id属性で付けた名前で呼び出して使います。
<タグ名 class=”クラス名”>〜</タグ名>
<タグ名 id=”id名”>〜</タグ名>
書き方の例
<div class="c-textBox c-textBox-center" id="js-modal">クラス名を2つ以上設定する場合は、半角スペースをはさみます。</div>クラス名・id名のルール
- id名とclass名は英数字で書くこと(日本語は使わない)
- 先頭に数字は使えない (×class=”1title”)
- id名は同じページ内で同じ名前をつけられない。重複（被り）不可
( class名は同じページ内で何回でも使える。見た目が同じ場所には基本的に同じclass名をつける。 )
cssで装飾する箇所にはclass名を付けることが多いです。
一方でid名はJavaScriptの制御で使われる場面が多く、ページ内リンクを貼る場合にも使用されます。
CSSの書き方
CSS には以下の3 通りの設定方法があります。
① インラインCSS (要素内直接記述法)：style属性
② 内部 CSS (head 内記述法)
③外部 CSS (外部ファイル記述法)
ウェブサイトを作る時には③が最も一般的な方法です。
CSS は以下のように記述します。
セレクタ｛ プロパティ：値 ; ｝
セレクタ
セレクタとは、どの部分にCSSを適用させるかを選択する役割を果たします。例えば、タグ名や、id属性やclass属性に指定した名前のことを指します。
id名を使うときは #id名、クラス名を使うときは .class名 といった形で記述します。
プロパティ
プロパティとは、適用するCSSのスタイルの種類のことです。
例えば、文字サイズを変更したい場合の「font-size」や、背景色を変更したい場合の「background-color」などのことを指します。
よく使うプロパティ（単位・値はこちらで紹介したもの以外も設定できます。）
| プロパティ名 | 単位・値 | |
|---|---|---|
| 要素の状態 | display | block, inline, inline-block, flex, grid, none |
| 要素の外側の隙間 | margin | px (ピクセル), vw, % |
| 要素の内側の隙間 | padding | px (ピクセル), vw, % |
| 要素の幅 | width | px (ピクセル), vw, % |
| 要素の高さ | height | px (ピクセル), vw, % |
| 文字サイズ | font-size | px (ピクセル), vw, %, em, rem |
| 文字の色 | color | 色のコードまたは名前 |
| 背景色 | background-color | 色のコードまたは名前 |
プロパティはまだまだたくさんあるので、詳しく知りたい方は以下のページなどが参考になります。
CSSプロパティ一覧
値
値とは、セレクタに適用するプロパティを「どのように変更するのか」の具体的な数値のことです。
例えば、プロパティに文字サイズを変更する「font-size」が指定されている場合の「24px」「1.5em」「100%」などを指します。
指定する値は、プロパティによって異なります。
値で使用する単位
| px | 画面や画像を構成する最小単位がpx（ピクセル）です。 pxで指定すると固定の大きさ・位置になります。 |
|---|---|
| % | %（パーセント）とは相対的に割合を示す単位です。 親要素の大きさを100%として、どのくらいの割合かを指定します。 |
| vw | vw（Viewport Width）は画面幅に基づいた単位です。 画面の左端からスクロールバーの右端までの横幅を100vwとして、どのくらいの割合かを指定します。 |
| vh | vh（Viewport Height）は画面の高さに基づいた単位です。 画面の上端から下端までの高さを100vhとして、どのくらいの割合かを指定します。 |
| em | emとは相対的な文字サイズの単位です。 親要素のfont-size(1em)を基準にして、文字の大きさを何倍にするか指定します。 |
| rem | remとは相対的な文字サイズの単位です。 ルート要素のfont-size(1rem)を基準にして、文字の大きさを何倍にするか指定します。 |
| 単位なし | line-heightの場合：文字の高さを1として、相対的に1行の高さを指定します。 opacityの場合：不透明度を指定します。1が完全に不透明、0.5が50%くらいの不透明度、0が完全に透明です。 |
※ルート要素とはHTML文書の最上位 の<html>のことです。
※line-heightは1.4～2がおすすめです。サイトの雰囲気やターゲットユーザーに合わせて設定しましょう。
※line-heightは単位を用いて設定することも可能ですが、レイアウト崩れを防ぐために単位なしでの設定がおすすめです。
※htmlのfont-sizeはブラウザにより異なりますが、ほとんどのブラウザでは16pxです。リセットcssでhtmlに対し「font-size: 62.5%;」を設定し、font-sizeを10pxにしてからコーディングする場合が多いです。（リセットcssについては「様々な入力項目について」で説明します。）
参考サイト：
【css】単位についておさらいしてみた
【初心者向け】CSSのvwとvhを理解しよう
remを使ってCSSの文字サイズ指定
参考サイト：
【CSS】line-heightをちゃんと理解しよう！図を用いて解説します
CSSのopacityで要素をちょっと透明にする方法と活用法まとめ
疑似クラス
要素の特定の状態を表すのが疑似クラスです。
大まかに分けると、カーソルを乗せたときなど「要素の状態」、最初の子要素など「要素の位置」の2種類があります。他にも特定の要素を除く:notも疑似クラスです。
特定の状態の時だけ見た目を変更したいときに、cssのセレクタとして指定します。
疑似要素
疑似クラスと名前が似てますが、全く別物です。
疑似要素は「要素の場所」を表します。要素の手前::beforeと要素の後ろ::afterがよく使われます。
要素に装飾を足したいとき、最初の文字だけ色を変えたいときなどにcssのセレクタとして指定します。
参考サイト：疑似要素と疑似クラスを一挙にまとめてみる
cssの優先順位
cssの記述が重複している場合は、下に書かれているコードが優先的に適用されます。
しかしながら、セレクタの書き方によって優先順位が異なりますのでしっかり把握しましょう。
基本的にどのセレクタを使うのかを統一しておくと、思わぬ混乱を避けることができます。クラス名に対してスタイルを設定するやり方なら、HTMLタグが変更されてもcssは修正せずに済むためおすすめです。
| 優先順位 | スタイル・セレクタ | コードの例 |
|---|---|---|
| 1位 | !important | |
| 2位 | style属性 | |
| 3位 | id | |
| 4位 | class・疑似クラス | |
| 5位 | 要素名 | |
| 6位 | ユニバーサルセレクタ （全要素に対して指定） | |
参考サイト：CSSのスタイルやセレクターの優先順位とその上げ下げをする方法
cssの書き方の例
CSSを簡単に実践してみましょう。
冒頭で説明したCSSの指定方法のうち、② 内部 CSS (head 内記述法) と ③外部 CSS (外部ファイル記述法) を見ていきます。
② 内部 CSS (head 内記述法) は、headタグ内にstyleタグを記述し、その中にCSSを書いていきます。
③外部 CSS (外部ファイル記述法) は、HTMLとは別にcssファイルを配置し、headタグ内にlinkタグでcssファイルのパスを指定することで読み込むことができます。
下記のコードでは、2つのテーブルを内部CSS、外部CSSでそれぞれ装飾している例で、記述の違いを示しています。（※一般的には両方を使うことはありません）
「com.cmps」内の「front」フォルダに「css_sample.html」ファイルを下記の内容で作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSの指定方法</title>
<!-- ② 内部 CSS (head 内記述法) -->
<style>
th, td {
border:1px solid #333;
}
.table {
background-color: #8EE;
}
</style>
<!-- ③外部 CSS (外部ファイル記述法) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table class="table"><!-- ② 内部 CSS (head 内記述法) -->
<thead>
<tr>
<th colspan="2">② 内部 CSS (head 内記述法) </th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
<table class="tableOuter"><!-- ③外部 CSS (外部ファイル記述法) -->
<thead>
<tr>
<th colspan="2">③外部 CSS (外部ファイル記述法)</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
</body>
</html>
「com.cmps」内の「front」フォルダ内に「css」フォルダを作成し、「style.css」ファイルを下記の内容で作成します。
@charset "UTF-8";/* CSSファイルの文字コードを指定する、お約束の記述 */
/* ③外部 CSS (外部ファイル記述法) */
.tableOuter {
background-color: ivory;
margin-top: 50px;
}
ブラウザで表示を確認してください。
styleタグやlinkタグをコメントアウトするとどのように変わるか、確認してみてもいいでしょう。
（表示例）
参考サイト：初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！
検証ツール
HTML、CSSを記述するうえでは検証ツール（デベロッパーモード）は非常に便利で、フロントエンドの業務では必須です。
下記のサイトを参照し、使い方を押さえておきましょう。
検証ツール（デベロッパーモード）の使い方