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

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

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

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

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

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

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

  1. CSSファイルを別に作りheadタグ内でリンクを張る方法(外部スタイルシート：共通スタイルの司令塔)
  2. <head> 内の <style> タグに記述する方法(内部スタイルシート：ページごとのルール帳)
  3. 各HTMLタグに直接 style 属性を指定する方法(インラインスタイル：ピンポイントの指定)

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

１．内部スタイルシート

＜アウトプット＞

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

＜ソースコード＞
<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”をセレクタというのでした。

２．インラインスタイルシート

＜アウトプット＞

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

＜ソースコード(抜粋)＞
        <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を学ぶ場合には多用しますので心に留めてください。

idは井戸

#は井戸(id:イド)、.は点(class)が色んな所に同じ特徴が点在

やや強引ですが私はこのように覚えています。

複数のクラスを適用する

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 level 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: 高さ

Success

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

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

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

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

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

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

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

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