1. なぜ、新人エンジニア研修でスタイルを学ぶのか、その理由
前回は、「文章の構造を表現するタグ」について学びました。
今回は、文章に色などのスタイルを付けてさらに読みやすくする方法を学びましょう。
実は、当社の研修ではスタイルについてあまり詳しくは触れません。なぜなら、それはデザイナーのお仕事だからです。ロジックを作る皆さんのようなエンジニアとデザインを作るデザイナーは別の人であることが一般的です。もちろん中には両方デキる人もいますが。。。
スタイルについてあまり詳しくは触れませんので予めご了承下さい。
詳しく学びたい方のためにCSS の第一歩という記事をご紹介しておきます。
2. スタイルを設定するstyleタグ
文字などのHTML要素を装飾するときにはstyleタグを使います。スタイルを適用するには３つの方法があります。
- ヘッダのstyleタグ内に書く
- 個々のタグの 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のファイルでは1つしか付けることができません。【identification:身分証明書】の略ですからそのHTMLソース中では唯一の要素に付けます。あなたと全く同じ免許証やパスポートを持っている人がいないように、id名は１つのページで唯一無二のものになります。
idをCSSのスタイルで指定するには以下のようにid名の先頭に「#」をつけます。
#miso
それにより、pタグの中の味噌カツの文字色だけを変更することができました。id名をつけることでHTMLの特定の要素を選択することができます。
しかし、idはHTML単体ではあまり活躍の場はありません。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”とは違い、1つのHTMLファイル内に複数の同じclass名を付けることができます。学校のクラスにも色々な人がいてもいいように、1つのクラスに複数の要素が属することができます。
classをスタイルで指定するには以下のようにclass名の先頭に「.」をつけます。
.content
同じクラスの文字を中央揃えにすることができました。なお、classはスペースで区切って複数指定することもできます。この点は後ほどBootstrapを学ぶ場合には多用しますので心に留めてください。
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タグを多用することになるでしょう。
6. インライン要素とブロック要素
HTMLには、インライン要素とブロック要素という2つの主要な要素タイプがあります。これらの要素は、文書のレイアウトと構造において重要な役割を果たします。それぞれの特徴と使用方法について解説します。
6.1 インライン要素
インライン要素（inline element）は、テキストや他のインライン要素と一緒に同じ行内に表示される要素です。インライン要素の主な特徴は以下の通りです。
特徴
- 同じ行に並ぶ: インライン要素は、前後の要素と同じ行に配置されます。
- 幅と高さ: インライン要素は、その内容に基づいて幅と高さが決まります。
widthやheightプロパティを使用しても、通常は効果がありません。 - ブロックレベル要素を含まない: インライン要素の中にブロックレベル要素（例えば
<div>）を含めることはできません。
本研修で使用するインライン要素
<a>（アンカー）<span>（スパン）<img>（画像）
6.2 ブロック要素
ブロック要素（block element）は、通常、新しい行に開始され、その後の要素も新しい行に開始されます。ブロック要素の主な特徴は以下の通りです。
特徴
- 新しい行に開始される: ブロック要素は、常に新しい行から開始され、その後に続く要素も新しい行に配置されます。
- 全幅を占有: ブロック要素は、親要素の幅全体を占有します。
- 他のブロック要素やインライン要素を含むことができる: ブロック要素は、他のブロック要素やインライン要素を含めることができます。
- 幅と高さの設定が可能: ブロック要素は、
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: 高さ
以上、今回は「id, class, div, span」について学びました。
このテキストではCSSについての詳細な解説はありませんが、以下のリンクでサンプルを提供していますので参考にしてみて下さい。
https://saycon.co.jp/portal-for-newcomer/javaweb/webtips#HTML
次回は「リンクを張って回遊性を高める」方法について学びます。