こんにちは。トミーです。
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」がついているものが最優先される
まとめ
ど忘れとは怖いものです。
この記事だけ読むと当たり前じゃん！と思うかもしれませんが、実際に各々の内容に直面すると、「あれ？」「なんで？」と焦ってしまい、当たり前のことも忘れてしまうのです。
日々、基本の内容も復習しながら、基本を抑えつつ仕事に精進していきたいですね。