コーディングの際に頻出するHTMLタグ・CSSプロパティ集(2)

コーディングの際に頻出するHTMLタグ・CSSプロパティ集 No.1』に引き続き、コーディングをする上で欠かせない、
HTMLタグ・CSSプロパティ、そして今回はそれにプラスして擬似クラスというものも紹介していきます。
今回はより応用的な内容も含まれているので、ゆっくりと理解を深めていきましょう!

コンテンツ内で使用するタグ

1.特定の要素を指定するタグ

<img>
画像を表示する。
属性として

  • 『src=〇〇』に画像のパス
  • 『alt=〇〇』に代替テキスト
  • 『width=〇〇』、『height=〇〇』に要素の大きさ

などがある。
特にalt属性は普段、直接見えないからと忘れがちだが
SEOなどに大きく関係してくるので気をつけよう。

<a>
リンクを示す。
『src=〇〇』にパスを書くことでそのパスが指すページ、サイトに移動するリンクを作成できる。
また、『target=”_blank”』と記述することでページが遷移するのではなく、
現在のページを残したまま、別のタブにリンク先を表示することができる。
主に外部サイトを開く際に使用される。

<small>
著作権・注釈などを示す。

<time>
日付や時刻を正確に示す

2.フォーム用タグ

<form>
入力・送信フォームを作る。

<input>
入力部品を作成する。

<select>
セレクトボックスを作成する。

<option>
セレクトボックスや入力候補リストの選択肢を指定する。
<select>と一緒に使用される。

<textarea>
複数行のテキスト入力欄を作成する。

<label>
フォーム部品と項目名を関連付ける。

 

頻出するプロパティ

display
要素の表示形式を指定する。
主な指定として

  • block→ブロック要素
  • inline→インライン要素
  • none→非表示

などがあるが
後述するfloatプロパティの代わりに
『flex』というものも非常によく使われる。

position
要素の配置方法を指定する。
relative,absolute,fixedなどがあり、
これを使いこなすことで様々な配置が可能になる。

float
左または右に寄せて配置する。
clearプロパティと共に使用しないとレイアウトが崩れてしまうので注意。

overflow
はみ出た要素の表示方法を指定する。

box-sizing
ボックスサイズの算出方法を指定する。

text-decoration
テキストの下線・上線・打ち消し線・点滅を指定する。

 

擬似クラス

タグの状態や詳細を示す。
ある要素にマウスを乗せた時に、ある要素内の一番最後の要素に
といった特定の条件下でのCSS,JSでの指定が可能となる。

1.リンク関連疑似クラス

a:link
未訪問のリンク
a:hover
カーソルが乗っている要素
a:active
クリック中の要素
a:visited
訪問済のリンク
a:focus
フォーカスされた要素

2.n番目系擬似クラス

:first-child
要素内で最初の要素

:last-child
要素内で最後の要素

:nth-child(n)
要素内で最初からn番目の要素
数字を入れる以外にも
2n→2の倍数
odd→奇数
など、様々な指定ができる。

:nth-last-child(n)
要素内で後ろからn番目の要素

まとめ

2回に渡ってHTMLタグ・CSSプロパティについて紹介してきました。
コーディングをする上で、使える技術が多いに越したことはありません。
クライアントの要望に答えるため、自分の思うままにコーディングをするために沢山のHTMLタグ・CSSプロパティを使いこなしましょう!

関連記事