HTML/CSS中級講座でWEBのトレンドを知る

千貫りこのHTML/CSS中級講座」では、HTMLはもちろんCSSを中心に覚えます。中級講座単体の受講も可能ですが、「千貫りこのHTML/CSS初級講座」の初級から段階を踏んで習うことで結びつけて考えられるため、より深く理解できるようになっています。

新しく追加されたcssを使ってみる

少し前まで、ワードをたくさん並べればSEOが上がる仕様になっていましたが、現在ではそう簡単にはいきません。ではなぜHTMLの品質を上げる必要があるのか?それはアクセシビリティのためにあります。
アクセシビリティとは、近づきやすさ、アクセスのしやすさのことです。webアクセシビリティが高いとは、高齢者や障害者などの誰もが支障なくサービスを利用できることを指します。アクセシビリティの高いwebサイトを作成できることはビジネスでもアドバンテージになる重要なものです。

見た目じゃない、意味のある順序を

HTMLを書いているとどうしてもデザインを重視してしまい、その順にタグを置くことがあると思います。アクセシビリティを意識して配置し、デザインはCSSで直すようにしましょう。
ただ、importantタグで強制的に優先度をあげると、後から別のものを優先したい場合に混乱する恐れがあります。それぞれのセレクタに割り当てられている数字が大きいほど詳細度・優先度ともに高くなります。 日頃からセレクタの詳細度による優先度を気にすると良いと先生は説明されました。

セレクタごとの詳細度の高さ

セレクタ名   詳細度
IDセレクタ 100
クラスセレクタ 10
タイプセレクタ 1

ボックスに文字を流し込んだとき、高さを固定すると文字数が増えたときにボックスからはみ出すことがあります。その場合、min-heightで高さの最低値を設定しておくと安心です。このような陥りやすい注意点をみながら、実際にサイトを作っていきます。 技術は日々変わるもので、これだ!とやり方を固定するのは難しく、HTMLもCSSも、現在のバージョンと対応するブラウザや閲覧するターゲットを考えることが大切です。

千貫りこ

アクセシビリティのポイント

  • ・見出し(h1〜h6)でマークアップされている
  • ・リンクテキストでリンク先がわかる(「こちら」だけなど曖昧はNG)
  • ・色の違いがわからなくても理解できる(文字色と背景色のコントラスト比は4:5:1)

上記のようなアクセシビリティは特に重要なポイントです。制作で気をつけることのガイドラインも公開されていますので一度目を通されることをおすすめします。

2017年4月

関連する他の講座