見出し画像

継続は力なり＃２４

うちやましょうたろう/成り上がり

インライン要素の縦位置の指定

以下の例は、HTMLでは h1要素の中にimg要素を、CSSではh1要素に背景色を指定しているだけのソースコードです

例

HTML

<h1>
<img src="images/sky.jpg" alt="空の画像">
</h1>

CSS

h1 { background: #fc0; }

画像1

ここで注目すべき点は、画像の下の隙間である
（どのブラウザでも同じになる）

これが仕様通りの表示である


インライン要素の「ディセンダ」に注意

この隙間は「ディセンダ」と呼ばれるもので、アルファベットの小文字の「 g 」や「 j 」のようにテキストのベースラインよりも下にはみ出す部分がある文字の、はみ出す部分を表示させるために用意されている領域

img要素はインライン要素なので、普通のテキストと同じように行の中に表示されているため、今回で言うと、黄色い背景で表示されている領域は普通のインラインの１行であるため、ディセンダの領域も表示される

もしh1要素の内容がテキストだけなら何の違和感もないが、画像だけの場合は、ディセンダ要素が目立ってしまう

画像2


vertical-alignプロパティ

CSSには、このようなインライン要素の縦方向の表示位置を調節するためのプロパティが、「vertical-alignプロパティ」である

vertical-alignに指定できる値

・baseline
ベースラインを親要素の行のベースラインに揃える
画像のようにベースラインがない要素の場合、その下をベースラインに揃える

・top
上を揃える

・middle
中央を揃える

・bottom
下を揃える

・super
上付き文字の表示位置に表示

・sub
下付き文字の表示位置に表示

・単位付きの実数
親要素のベースラインからの距離を単位付きの実数で指定
正の値は上方向、負の値は下方向への距離

・パーセンテージ
親要素のベースラインから距離を、行の高さに対するパーセンテージで指定
正の値は上方向、負の値は下方向への距離


このプロパティの初期値は「baseline」のため、特に指定のない場合、最初の例のように表示される

先程の画像に、「vertical-align: bottom;」を指定すると、画像の下の隙間を消せる

例

CSS

h1 { background: #fc0; }
img { vertical-align: bottom; }

画像3

文字コードを指定しているのに文字化けするのか

文字コードは、HTMLの場合
「<meta charset="文字コード">」
CSSの場合
「@charset "文字コード"」
のように指定する

このように文字コードの指定をしても文字化けする可能性がある

例
実際に保存されている文字コードと、HTML・CSSで指定した文字コードが　違う場合

環境により、ファイルをサーバーに転送される際、文字コードが自動的に変換されてしまう場合

などの場合に文字化が発生する


文字コードを指定しても文字化けする場合は、指定している文字コードと、保存されている文字コードが一致しているかの確認をする