Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[HTML][CSS]ワンカラムページの制作

はじめに

f:id:akatonbo_web:20150328020324j:plain

今日はHTML+CSSを使い、画像を多く使うワンカラムのWebページを制作しました。

ポイント
  • ブロック要素とインラインレベル要素を使い分ける
  • 画像ボタンを横に並べる
  • 画像のalt属性を有効に使う
  • backgroundとimgの違いを意識する


適切に画像を配置するために

Virtical-alignとベースライン、ディセンダ

f:id:akatonbo_web:20150327221655j:plain f:id:akatonbo_web:20150327221700j:plain

でぃせんだ 【ディセンダ】 descender
書体のデザインに関する用語。ベースラインから下へはみ出た小文字の一部分のこと。
(※はみ出ない高さ分は「ミーンハイト」)
デジタル用語辞典

間断なく縦に画像を並べるには?

前提として、img要素はインライン要素であることを理解する必要があります。
段落や見出しでは、画像はひと文字として扱われます。
そのため文字スタイルが画像の位置に影響します。厳密な位置に表示をするためには、ディセンダやベースラインの理解が必須となります。

まず、img要素に対して、CSSのvirtical-align(水平方向の位置揃え)プロパティをbottom(top)に設定します。
すると画像はディセンダーの端を基準として配置されるため、すきまなく縦に画像が並べることができます。

また、インライン要素であるため、 段落などのブロック要素中に、続けて記述するだけで画像は横並びされます。
さらに、ブロック要素に属性TextAlign=centerを設定すれば、文字を扱うように画像の中央揃えができます。

縦の並びを極めるには、Vertical Alignを理解しなけば始まらない | CSSPRO


img要素のalt属性について

alt属性には、画像が表示できない環境で閲覧したとき代替として表示されるテキストを記述します。

SEOとalt属性

altの記述内容は、画像検索時に参照されます。
画像検索は現在の主流のため、重要な要素といえます。
しかし、テキスト検索にひっかからないため注意が必要です。

background-imgの使い方

backgroundは背景として扱われます。

  • リピートが簡単に指定できる
  • alt属性は設定できない
  • 通常、印刷されない
  • 説明図など意味のある画像には不向き

※参考:背景画像を印刷する方法 « DevJamMemo