HTML＆CSS書籍｜メモ｜line-heightと画像関連タグ
作りながら学ぶHTML/CSSデザインの教科書
前回は1~2章
準備とメインの部分のマークアップ。
今回は3~4章。
cssによる装飾と画像の挿入です。
画像が入るとにぎやかになりますね。
新しい知識もいくつか。
line-height
キレイに見せるためには丁寧にデザインしましょう。
と、言う事で
今までそこまで気にしていなかったline-heightにもテクニックが。
今までは行間ちょっと広げたいな、で、様子を見ながらpxで指定していたline-height
なのですが、行間指定の場合はpxじゃなくて文字サイズに対する割合で指定するのが良いとの事。
文中にサイズの大きな文字があった場合にも対応
細かい説明は端折りますが、例えばこんな風に大きな文字があった場合
px指定でいい感じの行間を取っていたつもりでも、上の行と被ってしまうんですね。
割合で指定していればそれを上手くカバーしてくれる。と。
具体的には
line-heightは指定した高さの中心に文字が来るので
20pxの文字で行間を10pxにしたいと考えた場合
上部5px+文字サイズ20px+下部5px = 30px
30/20＝1.5 （小数点は第4位以下を切り上げ）
line-height: 1.5;
と、なる訳です。
ブラウザ間の表示の差異をなるべく減らす
で、HTMLってブラウザによって若干見栄えが違うじゃないですか。
せっかくのデザインだからどんなブラウザでも同じように見えたいよね。
と言うわけで、line-heightも常に指定するように気を付けたほうが良さそう。
フォントを指定しておくのとかもソレですよね。
画像挿入関連
画像を挿入するにあたって
原寸表示だったら単純に<img src=”〇〇.jpg”>で良くない？とか思っていたのですが
そういう事でもないっぽい。
サイズ指定
HTMLで画像を表示させるにあたって
imgタグにサイズも表記していたほうがいいっていうのはなんとなく記憶にありまして。
サイズ表記がないと画像サイズをコンピューターが確認しないといけないのに対して
記述があればその分の時間が浮くと言う事だったような。
あとは例えば違う人がサイトの更新をする際にも記述があった方が親切ですよね。
画像から調べなくていいもんね。
他には、何らかの理由で画像が表示されない場合、サイズ指定があれば画像サイズの枠が表示される為にレイアウトが崩れにくい。とかもあるようです。
alt
代替えテキストを表示するためのaltです
本には必須なので内容を入れない場合でもalt=””で空欄表示するとあるんですが
HTML5では空欄表示なら記述を省いていいそうです
で、らくだ🐫は「代替えテキスト＝写真のタイトル」位のイメージでいたのだけど
音声読み上げソフトや画像を表示しないブラウザの為に写真の内容を文章化したもの。
本文の内容にかかわる画像にはしっかり設定する必要があるようです。
対してaltが必要ないのはリストマーカーを画像で表示している場合とかですかね。
いちいち「リストマーカーです」とかいらないもんね。
figureとfigcaption
これはちょっとややこしくて、まだすんなり理解できていないのだけど
一先ずfigcaption＝画像の説明・見出し
これはfigureの中でのみ利用可
で、figureとは何ぞや
<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。
うーん。
おおざっぱに考えるとaltを付けたほうがいい画像＝figureも必要ってことかしら？
なかなか難しいです。