ど忘れてしてしまう…HTML基本の「キ」!

HTML

こんにちは。トミーです。

HTMLを書き慣れてくると、突然「あれ?」っと、ど忘れしてしまうことがあります。
先日も、動かない動かない…と困惑していたら、「id」を同じ名前で2つ書いていました(^_^;)

ということで、今回はよくど忘れしてしまう内容をまとめてみました。
単なる自分に向けた備忘録です。。。

「id」の命名は1つ

当たり前のことです。(すぐ忘れてしまいますけどw)
「id」は本来1つしか命名してはいけないというルールがあります。

「id」はJavaScriptなどのプログラムを動かす際に使用することが多いため、CSSなどの装飾ではなるべく「class」を使いましょう。

プログラムを書く時にしか「id」を使用しないため、ついつい忘れてしまう約束事です(´・ω・`)

<a>タグ内に<a>タグは入れない

リンクタグである「<a href=”URL”>〜</a>」内に「aタグ」を入れた場合、ブラウザ側で自動的に「閉じタグ」が入ってしまいます。
デザインによっては、下記のようなコーディングをしてしまいがちですが、「aタグ」の中に「aタグ」が入らないよう、コーディングの際には気をつけましょう!

<a href="url">
 <figure>
  <img src="imageurl" alt="XXX">
 </figure>
 <a href="url">テキスト</a>
</a>

リンクの 擬似クラス について

リンクには「a:link」「a:visited」「a:hover」「a:active」という4つの擬似クラスが存在します。
主に使用するのは「a:hover」とは思いますが、それ以外についても覚えておきましょう。

  • a:link:未アクセス(通常)の状態
  • a:visited:アクセス済みの状態
  • a:hover:マウスでポイントした状態
  • a:active:クリックした時

コメントアウト について

ふと、たまに「HTMLのコメントアウトの記述」と「CSSのコメントアウトの記述」がわからなくなってしまうことがあります。

HTMLとCSSの正しいコメントアウトは下記になります。

【HTMLのコメントアウト】

<!-- コメントアウト -->

【CSSのコメントアウト】

/* コメントアウト */

絶対パス と 相対パス について

リンクの書き方には、「絶対パス」と「相対パス」があります。
理解はしているものの、突然「相対パスで書き換えお願い!」と言われたときに、「あれ?相対パスってどっちだったっけ?」と思うことがたまにあるので、まとめておきます(笑)

  • 絶対パス:「https://〜」のように、サイトアドレスからパスまでの記述になります。
  • 相対パス:「index.html」のように、ディレクトリ階層の記述になります。(1つ上の階層を指す場合は「../」 と記述します)

HTML5の構造化タグ について

HTML5では構造を表す以下のタグがあります。

  • header:ヘッダー部分
  • nav:ナビゲーション部分
  • main:メイン部分
  • article:独立しているコンテンツ部分(記事など)
  • aside:副次的なコンテンツ部分(補足や広告など)
  • section:それ以外の情報コンテンツ部分
  • footer:フッター部分

各々、使用用途に合わせて使い分けましょう。

<section>や<article>では必ず<h>タグをつけましょう

HTML5では、項目に合わせて「section」や「article」などを設定する場面があります。
その際、「section」や「article」内には必ず「h1」「h2」「h3」…タグを入れましょう。
「hタグ」がなくても表示には影響ないのですが、SEO的には問題が生じますので、気をつけておきましょう!

CSSの優先順位

CSSには優先順位があります。
あれ?CSSが効かないという場合は下記を思い出して、落ち着いてコードを見直してみましょう。

  • タグに近いものが優先される
  • コード内で下行に書いてあるものが優先される
  • スタイルがHTML内に直で記述されていると優先される
  • CSS名の階層の深さによって優先度が変わる
  • 「!important」がついているものが最優先される

まとめ

ど忘れとは怖いものです。
この記事だけ読むと当たり前じゃん!と思うかもしれませんが、実際に各々の内容に直面すると、「あれ?」「なんで?」と焦ってしまい、当たり前のことも忘れてしまうのです。

日々、基本の内容も復習しながら、基本を抑えつつ仕事に精進していきたいですね。

タイトルとURLをコピーしました