Clik here to view.
meta theme-colorを設定して他のサイトと差別化しよう！
こんにちはウェブラボクリエイターズメモです。 最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。 印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。 設定方法 設定は簡単。HTMLのheadタグ内に以下を記載するだけです。...
View ArticleClik here to view.
CSSプロパティ「accent-color」でフォームのパーツの色を簡単に変える
こんにちは、ウェブラボクリエイターズメモです。 フォームのパーツの色を簡単に変えることができるCSSプロパティ「accent-color」を紹介していきたいと思います。 色を変えられる要素は「チェックボックス」、「ラジオボタン」、「レンジスライダー」、「プログレスバー」の４つみたいです。 まずは対応ブラウザを以下の参考サイトでご確認ください。 →Can I use...
View ArticleClik here to view.
SVG形式のfaviconをダークモードに対応させる方法
こんにちは、ウェブラボクリエイターズメモです。 OSのテーマカラーを暗くする「ダークモード」。 2020年頃からトレンドになっており、多くのOSやアプリ、ウェブサイトもこのダークモードに対応したものが増えてきています。 詳しくは過去の記事でも触れていますので、気になる方はぜひご覧ください。 【CSS】ダークモードに対応する 2020年のWebデザイントレンド「ダークモード」とは？...
View ArticleClik here to view.
CSSプロパティ「backdrop-filter」で要素の後ろのみにエフェクトをかける
こんにちは、ウェブラボクリエイターズメモです。 今回紹介するのは要素の後ろのみにエフェクトをかけることができるCSSプロパティ「backdrop-filter」です。 以前紹介した記事、CSSの「mix-blend-mode」を使ってみるとは似ていますが、また違ったもので非常に便利です。 対応ブラウザですが、いつも通り以下をご参考ください。 →Can I use...
View ArticleClik here to view.
2022年6月「IE」のサポートが終了。その後はどうなる？
こんにちは、ウェブラボクリエイターズメモです。 長きに渡ってコーダーの頭を悩ませてきたInternet Explorer11が今年2022年6月15日に廃止されます！ それ以降はどうなるのか？IEは起動できるの？ブラウザチェックはどうしたらいいの？などなど Microsoft Tech Communityの記事Internet Explorer 11 desktop app retirement...
View ArticleClik here to view.
【jQuery】指定した個数づつ開くアコーディオン
こんにちは、今回は「指定した個数づつ開くアコーディオン」をjQueryで実装したいと思います。 以前案件で作成する際、意外と面倒だったので使いまわせる形としてここに残しておきたいと思います。 まずはDEMOを作成しましたので挙動をご覧ください。アコーディオンにしたい要素の個数を変えて3パターン（偶数個、奇数個、少ない個数）を用意しました。 →DEMO...
View ArticleClik here to view.
【JS】Split ViewやSlide Overも考慮したiPadの判定【ユーザーエージェント】
こんにちは、ウェブラボクリエイターズメモです。 ウェブサイトを制作するにあたり、大きく分けて PC タブレット スマホ の3パターンの動作を考慮すると思います。 特に、ホバーで展開するナビなど作成する際、タブレットではタップで展開するように改変する必要がありますが iPadはiPadでも、Split ViewやSlide...
View Article
