HTMLでコードを書くとき、なぜたくさんの要素が用意されているのかということを疑問に思う初学者は多いはず、今回はそういった疑問にも答えていこうと思います。
また、HTMLで文字の大きさ・色・背景など、いろいろな装飾ができるのは知っているけれど、どうやってやればいいのかわからない。なんていうのは最初のうちはよくあることです。少しずつ吸収していきましょう。
当サイトでは、テキストエディタは「Visual Studio Code」を推奨していますが、あらかじめ用意しているのであれば無理に変更する必要はありません。
テキストエディタの導入が済んでいない場合は以下を参考にして導入を済ませておいてください。
導入方法はWindows/Mac共通ページで紹介
今回はVSCodeで使うために「element.html」「element.css」というファイルを作成してください。
あらかじめ予告しておきますが、このファイルは次回でも使用します。
要素とは
タグ<>が使われるHTML内の文書の構成単位を要素といいます。
前回記事にて解説した段落pタグを例に解説をすると、開始点<p>と終点</p>のように、タグの開始点から終点までをひとつの要素としてみなします。また、今後学習する終点のないタグも、タグは全て要素として扱います。
タグの種類自体は100種類以上ありますので、「こんなタグあったな」というように頭の片隅にでも記憶しておくことで、いざ使う際にHTMLの辞書本を引けば良いので、辞書を一冊持っておくことをおすすめします。
おすすめはHTML&CSS全事典です。
HTMLの装飾について
もしかしたら一番に「HTMLの装飾のやり方」や「なぜHTML内で装飾をしてはいけないのか」を知りたかった方がいるかもしれませんので、早いところ解説をしておきます。
HTMLの装飾は CSS (Cascading Style Sheets、カスケーディング・スタイル・シート)という、HTMLと組み合わせて使う言語を使います。
なぜHTML内で装飾をしないのか、してはいけないと言われているのかという疑問にもお答えしておきましょう。
HTMLは本来、文書構造などの情報を書き込む部分であり、ここは検索エンジンに評価される重要な構造になっています。そのため、ここで装飾を行ってしまうと、さまざまな情報が入り乱れてしまい、正しい評価がされなくなってしまいます。
そのため、CSSを使って外部スタイルシートを使ってテキストの装飾をしてあげる必要があるのです。
CSSの使い方（実習）
冒頭で「element.html」「element.css」というファイルを作成してください。と指定させていただきましたので、作成したというテイで解説をします。
それではHTMLファイル「element.html」には以下のテンプレートを使って、pタグを使った文章を適当に用意してみましょう。
テンプレート
上手に入れることはできたでしょうか。
それでは次にCSSを記述していきます。
HTMLとCSSを紐づけるためには<head>要素内に <link rel=”stylesheet” href=”CSSのリンク”> を記述してあげなければならないのでした。今回のコードはすでに記述してありますが、紐付けなければCSSは反映されませんので、毎回必ず紐付けは忘れないようにしましょう。
今回はp要素に色付けと背景色の指定をしていきたいと思います。
p要素に色付けをするためには「element.css」ファイルの中に次のように記述します。
文字色を変更するのは「color:」を使います。文字色コードを指定したあとは「;（セミコロン）」で閉じなければ指定が完了されず、適用されません。
文字背景色を変更するのは「background-color:」を使います。文字背景色を指定したあとは文字色と同様に「;（セミコロン）」で閉じなければ指定が完了せず、適用されません。
ここで、ブラウザで確認してみて「あれ？なんか思ってたのと違う。」と思った方もいるのではないでしょうか。
おそらく、その違和感の正体は背景色部分だと思います。通常、我々がサイトを閲覧しているときに見かける背景色は文字の背景色になっていますよね。ですが、ここでは文字以外の部分にも背景色がついてしまっています。
文字部分の背景色としてのみ、背景色を指定したい場合はspan要素を使用します。span要素は「テキスト内の一部の文字色や文字の大きさを変えたい」なんていうときに使う要素です。
今回の場合文字の部分のみ、全て文字背景を指定したいので、<p>の直後に<span>を置き、</p>の直前に</span>を置きましょう。
しかし、これではまだ背景色は文字以外の部分に適用されたままです。
なので、CSSも変更してやる必要があります。
どこが変わったか気付きましたか？
一番最初の「 p { 」の部分が「 span { 」になりました。
これによってspan要素の部分にのみスタイルの変更が適用されることになっています。
次回
次回はクラス・IDの指定の方法をレクチャーしていきます。クラスやIDを指定できるようになると、ここはこういう色にしたいけど、他の部分ではまた違う色をしたいというように色の使い分けができるようになります。
今のままだとサイト内の全てのspan要素にスタイルが適用されてしまいますので、クラスの使い分けによってデザイン性を高めていきましょう。
それでは今回はこのへんで、また次回もよろしくお願いします。
