プロの「引き出し」を増やす HTML+CSSコーディングの強化書 (草野あけみ/エムディエヌコーポレーション(MdN))

書籍プロの「引き出し」を増やす HTML+CSSコーディングの強化書(草野あけみ/エムディエヌコーポレーション(MdN))」の表紙画像

購入価格:3190

評価:

この記事は約2分45秒で読めます

視覚に障害のある方のためのアクセシビリティ、WAI-ARIAによるスクリーンリーダー対応の方法まで踏み込んである書籍はなかなかない。

どれも深すぎるのではないかと思えるほどの知識とテクニックの宝庫で、HTML/CSSの初心者であればついていくのは不可能なレベルの高度な内容である。しかも単著であるというのは、まったくこの著者のスキルには頭が下がる思いである。

clamp()関数は画面幅に応じて動的に変化する値に対してあらかじめ最小値・最大値ともに設定しておく時に使います。
width:clamp(150px, 50%, 800px);
※親要素の50%で伸縮するが、150px以下、800px以上にはならないようにする
これはwidth:50%; min-width:150px; max-width:800px; と書いたものと同じ挙動です。
clamp()関数は特に見出しなどのテキストをvwで指定して画面幅に応じて動的に拡大縮小させる際、最小値・最大値を設定しておきたいような場面で特に威力を発揮します。

1行の高さ(行送り)を表すline-heightの値には、通常1.5とか1.8といったような形で単位をつけない倍数で指定します。 (中略) 単位をつけてしまうと親要素で計算された行の高さ(font-size × line-height)が子要素の行の高さにも継承されてしまう仕様となっています。
例えば親要素のfont-sizeが16px・line-heightが1emとすると計算された行の高さは16pxとなりますが、仮に子要素の一部にfont-size:32pxと指定してもその箇所の行の高さは16pxのままで、結果として行の高さより文字サイズのほうが大きい状態となるため、一部のブラウザでは行の高さからはみ出した分の表示が切れてしまう問題が発生してしまうのです。

装飾パーツやイメージ画像、同内容のテキストを伴うアイコンなど、視覚的な効果のみを意図したもので情報として伝達する必要のない画像については、alt=””のようにalt属性の値を空にしておきましょう。alt情報が不要だからといってalt属性そのものを削除してしまうのはNGです。スクリーンリーダーの中にはファイル名をそのまま読み上げてしまうものがあり、情報の読み取りに支障が出る恐れがあるからです。

記事カテゴリー: WEB