YouTubeなどの動画をウェブページに埋め込む際、よく利用されるiframe要素ですが、img要素のように縦横の比率を維持したまま、様々な画面サイズに対応させる (レスポンシブ化する) ためには、padding-topプロパティとpadding-bottomプロパティの%値が親要素の横幅の相対値であることを利用した、CSSハックに近いコードが広く利用されています。
今回は、iframe要素の、最新で、最も簡単な、レスポンシブ化の方法をご紹介します。
JS
PHPの正規表現でHTML・CSS・JSを圧縮 (minify) する方法
PHPのpreg_replace関数を使用して、HTML・CSS・JS各コードの無駄な空白文字列 (半角スペース・タブスペース・改行) を取り除いて圧縮 (minify) する正規表現を紹介します。
WordPressなどのPHPを使用したCMSでも使用できます。
レンダリングを妨げるリソースの除外でPageSpeed改善2019
SEOに力を入れているウェブサイトの制作者や運営者なら、PageSpeed Insights や GTmetrix などを利用して、ウェブページの読み込み時間 (表示速度) をチェックしていると思います。
今回は PageSpeed Insights の診断で「レンダリングを妨げるリソースの除外」という項目に引っ掛かってしまった際に、当ウェブサイトで行った施策をご紹介します。
CSSとJSでHTMLフォームのファイル入力を柔軟にデザインする方法
HTMLのフォームコントロール要素 (input要素, button要素, select要素, textarea要素, etc…) には、ブラウザ毎に異なったデザインが適用されていて、全てのブラウザで共通のデザインを適用するのは、割とハードルが高めです。
特に、ファイル入力 (input[type=”file”]) は柔軟にデザインするのが困難です。今回はJSを使用してファイル入力を柔軟にデザインする方法をご紹介します。