HTML&CSS 学習メモ

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>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

<figure>-HTML5タグリファレンス

うーん。

おおざっぱに考えるとaltを付けたほうがいい画像=figureも必要ってことかしら?

なかなか難しいです。