Clik here to view.
ダイヤルで回して値を調整できるプラグイン「jQuery Knob」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。 早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。 →DEMO このような綺麗なダイヤルの入力欄が作れます！...
View ArticleClik here to view.
CSSの「:target」擬似クラスでアンカーリンクの位置を強調する
こんにちはウェブラボクリエイターズメモです。 文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。 ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。 そんなお悩みを持つあなた！ アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。 :target擬似クラスとは 使用例...
View ArticleClik here to view.
ページの読み込みを高速化できるCSSプロパティ「content-visibility」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。 まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。 →Can I use ご覧の通り、現状ではFirefoxやiOS...
View ArticleClik 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