1. なぜ、新人エンジニア研修でスタイルを学ぶのか、その理由

前回は、「文章の構造を表現するタグ」について学びました。

今回は、文章に色などのスタイルを付けてさらに読みやすくする方法を学びましょう。

実は、研修ではスタイルについての詳細な説明は行いませんが、エンジニアとしても基本的なCSSの知識は不可欠です。

詳しく学びたい方のためにCSS の第一歩という記事をご紹介しておきます。

2. スタイルを設定するstyleタグ

文字などのHTML要素を装飾するときにはstyleタグを使います。スタイルを適用するには３つの方法があります。

  • <head> 内の <style> タグに記述する方法
  • 各HTMLタグに直接 style 属性を指定する方法
  • CSSファイルを別に作りheadタグ内でリンクを張る方法

Webデザインには統一感が重要、ということで複数のHTMLファイルに同じCSSのスタイルを適用するには３番目の方法が最適です。しかし、この方法は既にご紹介しています。また、当社の新人エンジニア研修ではより簡便な方法を使うことも多々ありますのでここでは１、２の方法をご紹介します。

１．ヘッダのstyleタグ内にcssを書く

＜アウトプット＞

ブラウザで確認してみましょう

＜ソースコード＞
<html>
    <head>
        <meta charset="UTF-8">
        <title>このタイトルはブラウザのタブに表示されます</title>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>ひつまぶし</p>
        <p>味噌カツ</p>
    </body>
</html>

上記では「p要素」の文字を赤くするという処理を書いています。pタグ内の“ひつまぶし”と“味噌カツ”の文字が赤くなります。この時styleタグ内の“P”をセレクタというのでした。

２．個々のタグの style属性で指定する

＜アウトプット＞

ブラウザで確認してみましょう。

＜ソースコード(抜粋)＞
        <p style="color:blue;">ひつまぶし</p>
        <p>味噌カツ</p>

“ひつまぶし”のpタグのstyle属性で指定しています。したがって“ひつまぶし”だけが青文字になります。

方法１と方法２を混在させた場合は、方法２のスタイルが勝ちます。

優先順位はCSSの属性を適用する要素に近いものほど高くなる

と覚えましょう。

そうすれば、

  • 個々のタグの style属性で指定する
  • ヘッダのstyleタグ内に書く
  • CSSファイルを別に作りheadタグ内でリンクを張る

の順でスタイルが適用されることが理解できるでしょう。

3. セレクタとは

セレクタ【selector】とは、特定の要素を選択するための目印のようなものです。

セレクタに「id」や「class」を指定することで、特定の要素を選択できます。特定の要素だけにCSSで装飾したい時に便利です。実は先ほどpタグの文字を赤くしたように、htmlのタグもセレクタになりうるのですがあまり使われません。タグで指定してデザインを適用すると全ての同じタグの外見が同じになってしまうからです。むしろ、この後見るようにclass指定をしてCSSで修飾するのが一般的です。

3.1 id

まずは「id」について。以下のソースコードを読み込んでください。

＜ソースコード＞
    <head>
        <meta charset="UTF-8">
        <title>このタイトルはブラウザのタブに表示されます</title>
        <style> 
            #miso { color:brown; } 
        </style> 
    </head> 
    <body> 
        <p>ひつまぶし</p>
        <p id ="miso">味噌カツ</p> 
        <p>カレーうどん</p> 
    </body>
  • 4～6行目に書いてあるものを英字3文字で何といいますか？
あなたの答え：

idは一種の属性です。属性は、開始タグの中に以下のように書くのでした。

<p id ="miso">味噌カツ</p>

ここで付けたidは、1つのHTMLドキュメント内で同じ値を複数の要素に適用することはできません。

新人エンジニア研修
ID

idは 'identifier'（識別子）の略です。【identification:身分証明書】という類語からも推測できるようにHTMLソース中では唯一の要素に付けます。

あなたと全く同じ免許証やパスポートを持っている人がいないように、id名は１つのページで唯一無二のものになります。

idをCSSのスタイルで指定するには以下のようにid名の先頭に「#」をつけます。

#miso

それにより、pタグの中の味噌カツの文字色だけを変更することができました。id名をつけることでHTMLの特定の要素を選択することができます。

しかし、idはHTML単体ではあまり活躍の場はありません。idはCSSで特定の要素を装飾する際に使用できますが、通常はJavaScriptで要素を操作する際に特に重要になります。HTMLでは主として以下のclassを使うことが一般的です。

3.2 class

次に「class」です。以下のソースコードを読み込んでください。

 ＜ソースコード＞
<html>
    <head>
        <meta charset="UTF-8">
        <title>このタイトルはブラウザのタブに表示されます</title>
        <style>
            .content{ text-align: center;}
        </style>
    </head>
    <body>
        <ul>
            <li class="content">ひつまぶし</li>
            <li class="content">味噌カツ</li>
            <li class="content">カレーうどん</li>
        </ul>
    </body>
</html>

属性の書き方は、開始タグの中に以下のように書くのでした。

<li class="content">

“class”は先ほどの“id”とは違い、複数の要素に同じclass名を付けることができます。

新人エンジニア研修
クラス

学校のクラスにも色々な人がいてもいいように、1つのクラスに複数の要素が属することができます。

classをスタイルで指定するには以下のようにclass名の先頭に「.」をつけます。

.content

同じクラスの文字を中央揃えにすることができました。なお、classはスペースで区切って複数指定することもできます。この点は後ほどBootstrapを学ぶ場合には多用しますので心に留めてください。

複数のクラスを適用する

1つの要素に対して複数のクラスを適用する場合、クラス名をスペースで区切って記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .class1 {
      color: blue;
    }
    .class2 {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p class="class1 class2">このテキストは青色で太字になります。</p>
</body>
</html>

!importantは最後の手段

CSSの!importantは、特定のスタイルを強制的に適用するために使用されるディレクティブです。このディレクティブを使用すると、他のすべてのスタイルルールよりも優先され、そのスタイルが確実に適用されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>!importantの例</title>
    <style>
        .normal {
            color: blue;
        }

        .important {
            color: red !important;
        }
    </style>
</head>
<body>
    <p class="normal important">このテキストは赤色になります。</p>
</body>
</html>

通常、CSSの優先順位は以下の順序で決定されます。

  1. インラインスタイル（例: <p style="color: green;">）
  2. IDセレクタ（例: #id）
  3. クラス、属性セレクタ、疑似クラス（例: .class、[type="text"]、:hover）
  4. タグセレクタ（例: p）

ただし、!importantを使用すると、これらのすべての優先順位を無視して、そのスタイルが適用されます。デバッグが難しくなるため使いすぎには注意しましょう。

4. div

次にdivタグです。“div”は【division:部分】の略ですからHTMLの一部をグループ化するために使います。divタグはグループ化のための単なる箱だと考えていただけると分かりやすいと思います。したがって、divタグには積極的にclass属性を追加して、どういう部品なのかを明示することが求められます。

あなたがお気に入りのサイトのソースコードをよく観察してみてください。そこで使われているタグのほとんどがdivタグでしょう。また、divタグには様々なクラス指定がしてあるのが見えたことと思います。このようにdivタグは最もよく使われるタグと言っても過言ではないでしょう。

＜アウトプット＞

アウトプットをブラウザで見る

＜ソースコード＞
<html>
    <head>
        <meta charset="UTF-8">
        <title>div.html</title>
        <style>
            #content
            {
                width: 500px;
                height:300px;                    
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id = "content">
            <ul>
                <li>ひつまぶし</li>
                <li>味噌カツ</li>
                <li>カレーうどん</li>
            </ul>
        </div>
    </body>
</html>

幅【width】と高さ【height】を指定してバックグラウンドの色をグレイにしています。単位はpx（ピクセル）になります。

divタグはこのように要素を囲うために使われます。また、上記のようにdivタグにidやclassを振ってスタイルを適用させることもよくあります。

例えば、リストを中央ぞろえにするにはどのようにすればよいか分かりますか？

divタグは囲った部分をブロックレベル要素として、関連する要素をグループ化するためのタグです。ブロックレベル要素とはその名の通りブロックのような要素です。ブロックのように縦に積み重ねることができます。その点、次のspanタグと比較してください。

4.1 余白の設定

余白を設定するにはマージン【margin】を設定します。マージンは要素の周り空白の領域を作成します。次のパディングと違い色を付けることはできません。

＜ソースコード（抜粋）＞

<div id = "content" style="margin: 100px">

マージンが設定されている様子をディベロッパーツールで見ると下図のようになりますので講師と一緒に確認してみてください。

新人エンジニア研修
マージン

4.2 パディングの設定

パディング【padding】とは元々詰め物のことです。パディングは要素の内側に領域を作成します。マージンと異なり要素の色が付きます。

＜ソースコード（抜粋）＞

 <div id = "content" style="padding:10px">

パディングが設定されている様子をディベロッパーツールで見ると下図のようになりますので講師と一緒に確認してみてください。

新人エンジニア研修
パディング

5. span

次にspanタグです。

＜ソースコード（抜粋）＞
        <ul>
            <li>ひつまぶし</li>
            <li>味噌カツ</li>
            <li><span style="color:yellow" >カレー</span>うどん</li>
        </ul>

「カレーうどん」の“カレー”という３文字だけを黄色にしています。spanタグは囲った部分をインライン要素としてグループ化することができるタグです。一部分の見た目を変えたいときなどによく使います。

インライン要素とは、【inline】という名の通りPタグなどのブロックレベル要素の中で使われる要素です。 ブロックのように積み重ねることはできない要素です。当社の新人エンジニア研修では、spanタグよりもdivタグを多用することになるでしょう。

5インライン要素とブロック要素の違い

  • ブロック要素（div、p、ul、h1 など）
    → 改行が入る。幅がデフォルトで親要素の幅いっぱい。
  • インライン要素（span、a、strong など）
    → 改行が入らない。内容に応じて幅が決まる。

6. インライン要素とブロック要素

HTMLには、インライン要素とブロック要素という2つの主要な要素タイプがあります。これらの要素は、文書のレイアウトと構造において重要な役割を果たします。それぞれの特徴と使用方法について解説します。

6.1 インライン要素

インライン要素（inline element）は、テキストや他のインライン要素と一緒に同じ行内に表示される要素です。インライン要素の主な特徴は以下の通りです。

特徴

  1. 同じ行に並ぶ: インライン要素は、前後の要素と同じ行に配置されます。
  2. 幅と高さ: インライン要素は、その内容に基づいて幅と高さが決まります。widthやheightプロパティを使用しても、通常は効果がありません。
  3. ブロックレベル要素を含まない: インライン要素の中にブロックレベル要素（例えば<div>）を含めることはできません。

本研修で使用するインライン要素

  • <a>（アンカー）
  • <span>（スパン）
  • <img>（画像）

6.2 ブロック要素

ブロック要素（block element）は、通常、新しい行に開始され、その後の要素も新しい行に開始されます。ブロック要素の主な特徴は以下の通りです。

特徴

  1. 新しい行に開始される: ブロック要素は、常に新しい行から開始され、その後に続く要素も新しい行に配置されます。
  2. 全幅を占有: ブロック要素は、親要素の幅全体を占有します。
  3. 他のブロック要素やインライン要素を含むことができる: ブロック要素は、他のブロック要素やインライン要素を含めることができます。
  4. 幅と高さの設定が可能: ブロック要素は、widthやheightプロパティを使用してサイズを設定できます。

本研修で使用するブロック要素

  • <div>（ディブ）
  • <p>（段落）
  • <h1>から<h6>（見出し）
  • <ul>（順不同リスト）と<ol>（番号付きリスト）
  • <li>（リストアイテム）

7. CSSプロパティの継承

CSSプロパティの継承とは？
CSSプロパティの継承とは、親要素に設定されたスタイルが子要素に自動的に適用されることを指します。これは、ウェブページのデザインを簡素化し、一貫性を保つために役立ちます。以下では、継承されるプロパティとされないプロパティについて詳しく説明します。

7.1 継承されるCSSプロパティ

以下のプロパティは、親要素から子要素に継承される代表的なプロパティです：

color: テキストの色
font-family: フォントの種類
font-size: フォントのサイズ
font-style: フォントのスタイル（例：italic）
font-weight: フォントの太さ（例：bold）
line-height: 行の高さ
text-align: テキストの配置
visibility: 要素の可視性
これらのプロパティは、子要素が明示的に上書きしない限り、親要素のスタイルが適用されます。

例

<div class="parent">
    <p class="child">これは子要素の段落です。</p>
</div>

.parent {
    color: blue;
    font-family: Arial, sans-serif;
}


この場合、.parentに設定されたcolorとfont-familyは、.childにも適用され、段落のテキストは青色のArialフォントで表示されます。

7.2 継承されないCSSプロパティ

一方で、多くのプロパティは継承されません。これらのプロパティは、通常、要素ごとに個別に設定する必要があります。代表的な継承されないプロパティには以下のものがあります：

margin: 外側の余白
padding: 内側の余白
border: 境界線
background: 背景
width: 幅
height: 高さ

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□ CSSを使うには3つの方法があり、優先度の高い順に以下の通りである

  • 個々のタグの style属性で指定する
  • ヘッダのstyleタグ内に書く
  • CSSファイルを別に作りheadタグ内でリンクを張る

□ セレクタに「id」や「class」を指定することで、特定の要素を選択できる

□ HTMLでは主としてclassを使うことが一般的

□ 1つのHTMLファイル内にid名は重複して付けることができない

□ 1つのHTMLファイル内に同じclass名を複数付けることができる

□ divタグは囲った部分をブロックレベル要素としてグループ化することができる

Success

何度でも受けられるテストへのリンク

以上、今回は「id, class, div, span」について学びました。

このテキストではCSSについての詳細な解説はありませんが、以下のリンクでサンプルを提供していますので参考にしてみて下さい。

https://saycon.co.jp/portal-for-newcomer/javaweb/webtips#HTML

次回は「リンクを張って回遊性を高める」方法について学びます。

新人エンジニア向けHTML講座の一覧に戻る

スタイル（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる