こんにちはウェブラボクリエイターズメモです。 最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。 印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。 設定方法 設定は簡単…続きを読む
こんにちは、ウェブラボクリエイターズメモです。 今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。 まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。 →Can I use ご覧…続きを読む
こんにちはウェブラボクリエイターズメモです。 文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。 ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。 そんなお悩みを持つあなた！ アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。 &nbs…続きを読む
こんにちは、ウェブラボクリエイターズメモです。 今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。 早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。 →DEMO このような綺麗なダイヤルの入力欄が作れます…続きを読む
こんにちはウェブラボクリエイターズメモです。 この記事のアイキャッチの様なカラムレイアウトを組む際、従来ではfloatを用いたりdisplay:inline-blockを用いて横並びにすることが多かったと思います。 しかし最近では多くのブラウザでFlexboxへの対応が進み、Flexboxを使えばmatchHeight(横並びの高さを揃える)処…続きを読む
こんにちは、ウェブラボクリエイターズメモです。 今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。 まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。 →DEMO 「…続きを読む
こんにちはウェブラボクリエイターズメモです。 Webコーディングを行う皆さま、コーディングの際にはどのエディターを利用されてますか？ 今回、Adobeが提供する「Brackets」というエディターのサポートが終了するという悲しいニュースについてお話しします。 Bracketsとの思い出 Bracketsとは、Adobeが提供するテキストエディターです。 We…続きを読む
ウェブラボクリエイターズメモです。 今回は、制作現場で役立つjavascriptのオススメプラグインについて用途ごとに紹介したいと思います。 javascriptのプラグインはとても多く、どれを使用すればいいか悩んでしまうこともありますよね。 そんな方へ、筆者個人の意見になってしまいますが参考にしていただければと思います。 実際に…続きを読む
こんにちはウェブラボ技術メモです。 jQueryで要素内の末尾にHTMLを挿入したい場合、代表的なappend()メソッドがあります。 しかし、それと似たappendTo()メソッドというものも存在します。 この2つについて、何が違うのか、どう使い分けるのか、またパフォーマンスに大きな差はあるのか調査しました。 構文の違い 例えば下記のような要素において、#…続きを読む
明けましておめでとうございます、ウェブラボクリエイターズメモです。 新年一発目は、サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」を紹介したいと思います。 ただ固定するだけならばCSSで簡単に固定できますが、ウィンドウの高さから固定した要素がはみ出た時に下の要素が見切れてしまうので処理に困ると思…続きを読む
