HTML/CSS

【HTML初心者向け】周りに聞けない!基本的な疑問を解決【part 1】

更新日:

【HTML初心者向け】周りに聞けない!

HTMLやCSSを学び始めたばかりの初心者の方で、ちょっとした事が聞けずにひとりで悩んでしまっている方は意外と多いのではないでしょうか?

「よくわからなかったけど前に1回聞いたし、もう1回は聞きにくい・・・」

「質問内容が当たり前のことすぎて聞くのが恥ずかしい・・・」

こんなこと、考えていませんか?

上のコメントは、私がWebデザイナーの実務で新人Webデザイナーさんの質問に答えた後、教えた方が実際に発した言葉です。こう思ってなかなか言えなかったと。

 

HTMLやCSSなど、Web制作を学び始めたばかりの方は、「検索力」が身についていないと苦労します。

 

初心者がつまづきやすい「検索力」

何がいけないのかわからない = 何を調べればいいのかわからない

 

もし周りに質問を投げかけられる人がいる環境ならば、はじめのうちはどんどん聞くべきです。

知識が足りないことに恥ずかしさを感じる必要はありませんよ。初心者でなかった人などいませんから。

とはいえ、調べて自分で解決する力は今後もずっと必要ですので、少しずつでも身につけていきましょう!

 

今回は実際の経験を基に、HTML初心者の方が「あれ?」と疑問に感じる部分を解決していきたいと思います。

意外と小さなことが気になったりしますよね!

 

ここからは、初心者の方に理解して次のステップへ進んでもらう事を目的としていますので、細かい説明や必要以上の機能の説明などは省略している場合があります。

 

 

HTMLのソースコードの書き方(HTML5)

まずはHTMLのソースコードの書き方についてです。

 

DOCTYPE宣言<!DOCTYPE html>と<html>の違い

HTML文書を書くと、出だしに

と「html」が2回書かれますね。

 

DOCTYPE宣言

<!DOCTYPE html>の部分は、ブラウザなどに正しく表示してもらう為のバージョン宣言です。タグではありません。HTML5ではDOCTYPE宣言は必須ではありませんが、この宣言がないとブラウザの表示方法が変わって意図しない表示になることがありますので、記述しておきましょう。

DOCTYPE宣言は大文字・小文字の区別がありませんので、どちらで書いてもOKです。

不要なスペースなどを入れることはできません。

 

<html>

<html>タグは、<html>~</html>タグ内がHTML文書の内容ですよ~ということを表している要素です。

<html>タグがないと、ただのテキストファイルになってしまいます

 

役割が違う

<!DOCTYPE html>と<html>はそれぞれ役割が違うので、どちらも記述しましょう

 

コードを書く時は改行しなきゃいけない?

HTMLのソースコードを書いていると、だんだん長くなってきてスクロールが面倒ですよね。改行が多ければ更に長くなって煩わしく思うかもしれません。(※<br>の改行ではなく、エディタ上のEnterによる改行)

それでも改行をする一番重要な理由は「メンテナンス性」です。

Webサイトやページが完成した!公開した!あっここ間違ってた、直さなきゃ!うわっこれどこの部分だろ・・・探すのめんどくさっ!

とならない様にするためです。

 

ページが増えれば増えるほど、メンテナンス性は重要になってきます。これは作業時間に直結しますので、メンテナンス性が悪ければどんどん自分の時間が削られていくことになりますね

エディタには検索で指定した箇所への移動が簡単にできる機能もありますので、面倒でも改行はきちんとしましょう。

「見やすい・わかりやすい」は今後発生する更新や修正作業を快適にします。

 

見やすいHTMLコードの書き方例

下記は一般的な見やすいコードの書き方例です。

head要素、body要素とそれぞれの内容が区別しやすいように、インデントをとっています。基本、同じ階層の要素は垂直位置を揃えると見やすいし、構造を把握しやすいです。

ここで1点、上記のコードは見やすいですが、「修正しやすさ」をさらに上げる為には下記のような書き方をします

 

メンテナンス性を良くするHTMLコードの書き方例

どこが違うか気づきましたか?

<title>タグや<h1>タグのあとにも改行を入れ、</title>、</h1>など閉じタグの前にも改行を入れています。

こうすることで、タグ以外のテキスト部分が孤立し、選択しやすくなります

試しに、上記の2つのコードでテキスト部分をトリプルクリックして比較みてください。トリプルクリックは行選択ができるので、「テキスト部分だけを修正したい!」といった場合に便利です。

ここでタグと同じ行にテキストがある場合、タグごと選択されてしまうので、自分で範囲選択するしかなくてやや面倒です。

また、タグの前後に改行を入れることで、閉じタグ(終了タグ)の見落としもなくなります。

 

HTMLの要素と属性

ここも混乱しがちなのではないでしょうか?

要素 = タグで囲まれたひとまとまり

要素とは、開始タグと終了タグで挟まれたひとまとまりの事です

 

これはh1要素です

<h1>タイトル</h1>

これはp要素です

<p>文章が入ります</p>

一部、終了タグがなくタグのみで完結する要素のことを「空要素」と呼びます。img要素やinput要素などがこれにあたります。

img要素は閉じタグがなく、「空要素」とも呼ばれます

<img src="url" alt="">

 

属性 = 要素の付加情報

要素の付加情報としてタグ内に記述するものを「属性」と呼びます

下記のimg要素の場合、「src」「alt」がそれぞれ属性にあたります。

また、属性で指定する値のことを「属性値」と呼びます。上記でいうと、「./images/sample.png」の部分ですね。

 

属性には、2種類あります。

  1. 要素固有の属性(a要素のhrefなど)
  2. どの要素にでも指定できるグローバル属性

です。

 

グローバル属性

グローバル属性はどの要素にでも指定できる属性の呼び名です。

グローバル属性は多くの種類が存在しますが、全部を覚える必要はありません。(違うところに脳のリソースを使いましょう)

ここではよく使用する属性の一部をご紹介します。

 

id属性

id属性は要素に固有の名前をつける時に使用します。「固有」なので、同じページ内では他の要素に同じid名を使うことができません

CSSでスタイルを設定する時にもよく使う属性ですので、使い方や条件をしっかり覚えましょう。

CSS以外にも、a要素でページ内の任意の個所に移動する手段としても使われます。

属性値に指定できる文字は、アルファベットから始まり、アルファベット、半角数字、ハイフン(-)、アンダースコア(_)、コロン(:)、ドット(.)です。

 

class属性

class属性は要素に分類・種類名をつける時に使用します同じページ内で複数の要素にclass名を使うことができます

CSSでスタイルを設定する時にもよく使う属性ですので、使い方や条件をしっかり覚えましょう。

属性値に指定できる文字は、アルファベット、半角数字、ハイフン(-)、アンダースコア(_)で、先頭の文字は数字とハイフン以外でなくてはなりません。

 

2018年11月現在、Googleは、HTML要素名、属性、属性値(text/CDATAを除く)、CSSセレクタ、プロパティ、プロパティ値(文字列を除く)には小文字を使用するとしており、ID・クラス名の接頭辞にはハイフン(-)を推奨しています。また、英単語は繋げず、単語毎に区切ることを推奨しています。

google-html-css-style-guide

google-html-css-style-guide

google-html-css-style-guide

参照元:Google HTML/CSS Style Guide

 

style属性

style属性は要素に直接スタイルを指定する時に使用します。属性値にはCSSのプロパティとプロパティ値を使用します。

直接指定できるので便利ですが、CSSは外部ファイルで定義する事が推奨されているので、必要以上に使用しないようにしましょう。

 

title属性

title属性は要素に補足情報を付け足す時に使用します。リンク先のタイトルや説明、画像の情報、引用元の情報など。マウスを乗せた時に表示するブラウザもあります。

属性値には文字列を指定できます。

 

あとがき

Part 1はここまでで、今後も続けていきたいと思います!

「こんな疑問を持っている」とお困りの方は、Twitterからご連絡くださいませ~!

 

-HTML/CSS
-, , ,

Copyright© Webjo blog , 2020 All Rights Reserved.