HTML

img要素のalt属性に設定する適切な代替テキストの考え方

ウェブページで画像を表示させるために「img要素」が使われますが、このimg要素に設定できる属性の1つに、画像の代わりとなる文章「代替テキスト」を設定する「alt属性」があります。

代替テキストを適切に設定することは「SEO」や「ウェブアクセシビリティ」において重要です。しかし、どのような文章を設定すればいいのか分からない方も多いのではないでしょうか?

そこで今回は適切な代替テキストを設定するための考え方を紹介します。

レンダリングを妨げるリソースの除外でPageSpeed改善2019

SEOに力を入れているウェブサイトの制作者や運営者なら、PageSpeed InsightsGTmetrix などを利用して、ウェブページの読み込み時間 (表示速度) をチェックしていると思います。

今回は PageSpeed Insights の診断で「レンダリングを妨げるリソースの除外」という項目に引っ掛かってしまった際に、当ウェブサイトで行った施策をご紹介します。

CSSで段組みと内容の流し込みをするcolumnsプロパティの使い方

PCでAppleのサイトを表示した時のフッターメニュー (フッターサイトマップ) のように段組みして、なおかつ、画面サイズに応じて段の数を調整しつつ、内容の流し込みをする、columnsプロパティという非常に便利なCSSプロパティがあります。

しかし、実際に使ってみると、各ブラウザで意図したとおりに表示されない場合があって四苦八苦したので、意図したとおり表示される場合とされない場合を合わせてご紹介します。