Clik here to view.
【JS】Split ViewやSlide Overも考慮したiPadの判定【ユーザーエージェント】
こんにちは、ウェブラボクリエイターズメモです。 ウェブサイトを制作するにあたり、大きく分けて PC タブレット スマホ の3パターンの動作を考慮すると思います。 特に、ホバーで展開するナビなど作成する際、タブレットではタップで展開するように改変する必要がありますが iPadはiPadでも、Split ViewやSlide...
View ArticleClik here to view.
【jQuery】指定した個数づつ開くアコーディオン
こんにちは、今回は「指定した個数づつ開くアコーディオン」をjQueryで実装したいと思います。 以前案件で作成する際、意外と面倒だったので使いまわせる形としてここに残しておきたいと思います。 まずはDEMOを作成しましたので挙動をご覧ください。アコーディオンにしたい要素の個数を変えて3パターン（偶数個、奇数個、少ない個数）を用意しました。 →DEMO...
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.
CSSプロパティ「backdrop-filter」で要素の後ろのみにエフェクトをかける
こんにちは、ウェブラボクリエイターズメモです。 今回紹介するのは要素の後ろのみにエフェクトをかけることができるCSSプロパティ「backdrop-filter」です。 以前紹介した記事、CSSの「mix-blend-mode」を使ってみるとは似ていますが、また違ったもので非常に便利です。 対応ブラウザですが、いつも通り以下をご参考ください。 →Can I use...
View ArticleClik here to view.
SVG形式のfaviconをダークモードに対応させる方法
こんにちは、ウェブラボクリエイターズメモです。 OSのテーマカラーを暗くする「ダークモード」。 2020年頃からトレンドになっており、多くのOSやアプリ、ウェブサイトもこのダークモードに対応したものが増えてきています。 詳しくは過去の記事でも触れていますので、気になる方はぜひご覧ください。 【CSS】ダークモードに対応する 2020年のWebデザイントレンド「ダークモード」とは？...
View ArticleClik here to view.
CSSプロパティ「accent-color」でフォームのパーツの色を簡単に変える
こんにちは、ウェブラボクリエイターズメモです。 フォームのパーツの色を簡単に変えることができるCSSプロパティ「accent-color」を紹介していきたいと思います。 色を変えられる要素は「チェックボックス」、「ラジオボタン」、「レンジスライダー」、「プログレスバー」の４つみたいです。 まずは対応ブラウザを以下の参考サイトでご確認ください。 →Can I use...
View ArticleClik here to view.
meta theme-colorを設定して他のサイトと差別化しよう！
こんにちはウェブラボクリエイターズメモです。 最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。 印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。 設定方法 設定は簡単。HTMLのheadタグ内に以下を記載するだけです。...
View ArticleClik here to view.
ページの読み込みを高速化できるCSSプロパティ「content-visibility」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。 まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。 →Can I use ご覧の通り、現状ではFirefoxやiOS...
View ArticleClik here to view.
CSSの「:target」擬似クラスでアンカーリンクの位置を強調する
こんにちはウェブラボクリエイターズメモです。 文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。 ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。 そんなお悩みを持つあなた！ アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。 :target擬似クラスとは 使用例...
View ArticleClik here to view.
ダイヤルで回して値を調整できるプラグイン「jQuery Knob」
こんにちは、ウェブラボクリエイターズメモです。 今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。 早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。 →DEMO このような綺麗なダイヤルの入力欄が作れます！...
View ArticleClik here to view.
【CSS】Flexboxのspace-betweenで3カラム以上でもfleat:leftと同じような左詰めのレイアウトにする方法
こんにちはウェブラボクリエイターズメモです。 この記事のアイキャッチの様なカラムレイアウトを組む際、従来ではfloatを用いたりdisplay:inline-blockを用いて横並びにすることが多かったと思います。...
View ArticleClik here to view.
CSSの「mix-blend-mode」を使ってみる
こんにちは、ウェブラボクリエイターズメモです。 今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。 まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。 →DEMO...
View ArticleClik here to view.
【CSS】記述量と表示速度を意識したCSSの書き方
こんにちは、ウェブラボクリエイターズメモです。 CSSを記述する時、意識せずに書いてしまうとどんどん記述量が増えていきますよね。 記述が多く複雑になるほど、メンテナンス時の手間が増え、ページの読み込み速度も落ちかねません。 そこで、CSSを記述する時に初心者が意識すべき点をまとめました。 初心者の方は是非ご覧ください。 基本的なCSS記述量の減らし方...
View ArticleClik here to view.
slickのフェードがIEでちらつくバグの対処方法
こんにちは、ウェブラボクリエイターズメモです。 先日、表題の件について解消することができたのでメモします。 実際にIE(Internet Explorer11)でのバグを再現したのでまずはDEMOをどうぞ。(2020年5月時点) DEMO IEで見てみると、上のスライダーが切り替わる瞬間にちらついていませんか？...
View ArticleClik here to view.
遅延読み込みの方法を見直してみる
こんにちは、ウェブラボクリエイターズメモです。 過去に「jQueryを利用して画像の遅延読み込みを行う」という記事を書きましたが、今一度遅延読み込みの方法を見直してみたいと思います。 この方法では、スクロールするたびに位置を計算して画像の表示を判断しており、正直あまり良い処理とは言えないものでした。 ですが、今のトレンドはIntersection Observer API（交差監視...
View ArticleClik here to view.
WordPressで画像をアップロードする方法
WordPressでは、記事の本文中に画像などのメディアファイルを挿入できます。 WordPress5.0より、これまでのエディタが廃止され、「Gutenberg」という新しいエディタに変更されました。 管理画面の見た目が変わったことで、操作に戸惑うユーザも増えているかと思われます。 2020年3月現在、最新のWordPressをインストールすると、必ずこのエディタを使用することになります。...
View ArticleClik here to view.
【CSS】蛍光マーカー風の装飾と、グラデーションの仕組み
こんにちは、ウェブラボクリエイターズメモです。 「文章を目立たせる方法」といえば、どんな方法が思いつくでしょうか？紙媒体だと「マーカー」が浮かぶ人が多いのではないでしょうか。 今回はそんなマーカーをWebサイト上でも表現する方法をご紹介したいと思います。それに伴い「CSSでグラデーションを表示する仕組み」についても詳しくご紹介したいと思います。 マーカーをCSSで表示する方法...
View ArticleClik here to view.
マウスカーソルについてくる「マウスストーカー」の作り方とサンプル色々
こんにちは、ウェブラボクリエイターズメモです。 ネットサーフィンをしていると稀に見かける、マウスカーソルからキラキラが降り注いだり、マウスカーソルに何かがついてきたりするやつ。いわゆる「マウスストーカー」。 サイトのデザインにアイデンティティを持たせるだけでなく、マウスカーソルの見失い防止や、押せるボタンの強調などにも役立ちます！...
View ArticleClik here to view.
【CSS】ダークモードに対応する
こんにちは、ウェブラボクリエイターズメモです。 2019年9月にiOS13、Andoroid10がリリースされ、ダークモードが実装されました。 誰もが期待していた機能だと思います。夜間だと目に優しいし、消費電力も抑えられますね。 そこで今回はWebサイトのダークモードに対応について簡単に解説します。 実はCSSで簡単に対応できるので多少知識のある方ならすぐにできると思います。 実装方法...
View ArticleClik here to view.
ボタンごとに印刷エリアを変える
こんにちは、ウェブラボクリエイターズメモです。 ウェブページを印刷する時に「この部分だけを印刷できたらいいのに」と思った事はありませんか？ @media printやprint.cssを用いれば簡単に印刷用のスタイルが設定できます。 しかしこれらはページ全体にかかるスタイルの為、”Aのボタンを押すと任意のAの範囲を、Bのボタンを押すと任意のBの範囲を印刷する”といったような個別指定はできません。...
View Article
