SEOに力を入れているウェブサイトの制作者や運営者なら、PageSpeed Insights や GTmetrix などを利用して、ウェブページの読み込み時間 (表示速度) をチェックしていると思います。
今回は PageSpeed Insights の診断で「レンダリングを妨げるリソースの除外」という項目に引っ掛かってしまった際に、当ウェブサイトで行った施策をご紹介します。
CSSで段組みと内容の流し込みをするcolumnsプロパティの使い方
PCでAppleのサイトを表示した時のフッターメニュー (フッターサイトマップ) のように段組みして、なおかつ、画面サイズに応じて段の数を調整しつつ、内容の流し込みをする、columnsプロパティという非常に便利なCSSプロパティがあります。
しかし、実際に使ってみると、各ブラウザで意図したとおりに表示されない場合があって四苦八苦したので、意図したとおり表示される場合とされない場合を合わせてご紹介します。
画像不要！模様をリピートさせた背景画像をCSSだけで作る方法
ウェブページの表示速度を少しでも速くしたいと思っている方は多いと思います。その一つの施策として、画像ファイルなどの外部ファイルをなるべく使用しないという方法があります。
単純な模様であれば、画像ファイルを用意しなくても、CSSのbackgroundプロパティのグラデーション (gradient) だけで作ることができます。今回は、その一例をご紹介します。
CSSでチェックボックスとラジオボタンのデザインを変更する方法
チェックボックスとラジオボタンは、1つ前の記事のファイル入力 (input[type=”file”]要素) と同様に、ブラウザ毎にデザインが決まっていて、CSSでデザインすることができない要素です。
今回は、このチェックボックスとラジオボタンのデザインをCSSで変更する方法をご紹介します。コピペで使用できるHTMLコードとCSSコードを併記しています。
CSSとJSでHTMLフォームのファイル入力を柔軟にデザインする方法
HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。
特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。
CSSセレクタの優先順位を自由自在に上げる方法
CSSは簡単なようで難しいです。設定した覚えのないスタイルが適用されているっていうのはウェブサイト制作者なら誰でも経験があるはず。CSS設計をきちんとしていれば起こりづらくはなるのですが、それでも、ごくまれに「あれっ、おかしい」ってなります。
そんなときに役立つ、CSSセレクタの優先順位を自由自在に上げる方法をご紹介します。
Microdataのスコープを参考にしたCSS設計・命名規則
Microdataの構造を参考にしたCSS設計・命名規則、名付けて「S2CSS」を紹介します。