Google Chrome 75から、HTML側にloading属性を追加するだけで、画像やiframeの遅延読み込みが実装可能になる予定です。 ※2019/08/19追記 Google Chrome 76から公式にサポ…
Google Chrome 75からサポート予定のloading属性による画像やiframeの遅延読み込みを実装する方法
ハンバーガーボタンのコードをサクッと生成できる「ハンバーガーボタンジェネレーター」
ハンバーガーボタンジェネレーターは、その名の通りハンバーガーボタンを作成できるジェネレーターです。サイズや色を設定するだけで、サクッとハンバーガーボタンのコードを生成できます。 ジェネレーターの制作者は、ザリガニデザイン…
スマートフォンのブラウザでツールバーの色を変更する方法
スマートフォンのブラウザでツールバーの色を変更する方法です。 ブラウザの種類によって指定方法が異なるので、それぞれご紹介いたします。 スマートフォンのブラウザでツールバーの色を変更する方法 Google Chrome ツ…
CSSだけでカルーセルっぽい横スクロールを実装する方法
CSSだけで、カルーセル風の横スクロールを実現する方法をご紹介いたします。 以下のように右側に要素が続いていることを示しつつ、横スクロールできるようにCSSでスタイリングします。 特にスマホなどで横幅を超えてしまうけどレ…
タイトルやOGPなどのメタタグを生成してくれるWEBサービス「Meta Tags」
Meta Tagsは、タイトルやOGPなど、head内に記述するためのメタタグを生成してくれるWEBサービスです。 各種SNS用のメタタグも一括して生成できるので便利です。 Meta Tagsの使い方 Meta Tags…
URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」
HEY METAは、サイトのURLを入力するだけで、OGPタグを自動生成してくれるWEBサービスです。 HEY METAの使い方 HEY METAにアクセスして、URLを入力します。ブログの場合は、記事ページのURLを入…
HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」
DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。 コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。 Dir…
ブラウザによる電話番号への自動リンクを無効化する方法
ブラウザによっては、テキストでサイト内に記述している電話番号を認識して、自動的に電話発信用のリンクを付与します。この機能は、テキストとして表示したい箇所がリンクになってしまい、思わぬデザインの崩れを引き起こしてしまう可能…
PCとスマホで別々のスタイルシートを読み込む方法
PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。 PCとスマホで別々のスタイルシートを読み込む方法 スタイルシートを読み込むlink要素のmedia属性に…
CSSをHTMLにインライン化してくれるWEBサービス「HTML email inline styler」
HTML email inline stylerは、HTML内の<style>～</style>に記述したCSSをインライン化してくれるWEBサービスです。ページのURLを指定するか、ソースを入れ…