ブログアーカイブ

meta theme-colorを設定して他のサイトと差別化しよう!

Screenshot_2021-10-06-17-59-31-74_cut

こんにちはウェブラボクリエイターズメモです。 最近スマホをiOS15にアップデートしたのですが、Safariでネットサーフィンをしているとブラウザのバーの色が変わるサイトをちらほら見かけるようになり、気になったので調査しました。   印象が残りますし、メタタグを入れるだけで簡単に設定できるので今回はその方法について解説します。 設定方法 設定は簡単…続きを読む

Permalink | meta theme-colorを設定して他のサイトと差別化しよう! はコメントを受け付けていません
  • このページを共有する

ページの読み込みを高速化できるCSSプロパティ「content-visibility」

tecmemo2109

こんにちは、ウェブラボクリエイターズメモです。   今回は、ページの読み込みを高速化できるCSSプロパティ「content-visibility」を紹介したいと思います。   まず初めに、このプロパティは全てのブラウザに対応しているわけでは無いので、以下の参考サイトをご確認ください。   →Can I use   ご覧…続きを読む

Permalink | ページの読み込みを高速化できるCSSプロパティ「content-visibility」 はコメントを受け付けていません
  • このページを共有する

CSSの「:target」擬似クラスでアンカーリンクの位置を強調する

2108

こんにちはウェブラボクリエイターズメモです。 文量の多いウェブページなどにおいて、目次から特定位置に飛ばす構成よく見ますよね。 ただ、ちょっと複雑なページだとイマイチどこに飛んだのかわかりにくいこともあります。 そんなお悩みを持つあなた! アンカーリンクから飛ばした先を強調して見せることができるCSS擬似クラス「:target」について解説します。 &nbs…続きを読む

Permalink | CSSの「:target」擬似クラスでアンカーリンクの位置を強調する はコメントを受け付けていません
  • このページを共有する

ダイヤルで回して値を調整できるプラグイン「jQuery Knob」

tecmemo2107

こんにちは、ウェブラボクリエイターズメモです。   今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。   早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。 →DEMO   このような綺麗なダイヤルの入力欄が作れます…続きを読む

Permalink | ダイヤルで回して値を調整できるプラグイン「jQuery Knob」 はコメントを受け付けていません
  • このページを共有する

【CSS】Flexboxのspace-betweenで3カラム以上でもfleat:leftと同じような左詰めのレイアウトにする方法

catch

こんにちはウェブラボクリエイターズメモです。 この記事のアイキャッチの様なカラムレイアウトを組む際、従来ではfloatを用いたりdisplay:inline-blockを用いて横並びにすることが多かったと思います。   しかし最近では多くのブラウザでFlexboxへの対応が進み、Flexboxを使えばmatchHeight(横並びの高さを揃える)処…続きを読む

Permalink | 【CSS】Flexboxのspace-betweenで3カラム以上でもfleat:leftと同じような左詰めのレイアウトにする方法 はコメントを受け付けていません
  • このページを共有する

CSSの「mix-blend-mode」を使ってみる

tecmemo2105

こんにちは、ウェブラボクリエイターズメモです。   今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。   まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。 →DEMO   「…続きを読む

Permalink | CSSの「mix-blend-mode」を使ってみる はコメントを受け付けていません
  • このページを共有する

2021年9月1日、Adobeが「Brackets」のサポートを終了!推奨エディタ「VisualStudioCode」に乗り換えよう

2645203_s

こんにちはウェブラボクリエイターズメモです。 Webコーディングを行う皆さま、コーディングの際にはどのエディターを利用されてますか? 今回、Adobeが提供する「Brackets」というエディターのサポートが終了するという悲しいニュースについてお話しします。 Bracketsとの思い出 Bracketsとは、Adobeが提供するテキストエディターです。 We…続きを読む

Permalink | 2021年9月1日、Adobeが「Brackets」のサポートを終了!推奨エディタ「VisualStudioCode」に乗り換えよう はコメントを受け付けていません
  • このページを共有する

制作現場で役立つオススメjavascriptプラグイン5選

tecmemo2103

ウェブラボクリエイターズメモです。   今回は、制作現場で役立つjavascriptのオススメプラグインについて用途ごとに紹介したいと思います。   javascriptのプラグインはとても多く、どれを使用すればいいか悩んでしまうこともありますよね。 そんな方へ、筆者個人の意見になってしまいますが参考にしていただければと思います。 実際に…続きを読む

Permalink | 制作現場で役立つオススメjavascriptプラグイン5選 はコメントを受け付けていません
  • このページを共有する

【jQuery】appendとappendToメソッドの構文、用途、速度の違い

4404610_s

こんにちはウェブラボ技術メモです。 jQueryで要素内の末尾にHTMLを挿入したい場合、代表的なappend()メソッドがあります。 しかし、それと似たappendTo()メソッドというものも存在します。 この2つについて、何が違うのか、どう使い分けるのか、またパフォーマンスに大きな差はあるのか調査しました。 構文の違い 例えば下記のような要素において、#…続きを読む

Permalink | 【jQuery】appendとappendToメソッドの構文、用途、速度の違い はコメントを受け付けていません
  • このページを共有する

サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」

tecmemo2101

明けましておめでとうございます、ウェブラボクリエイターズメモです。   新年一発目は、サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」を紹介したいと思います。   ただ固定するだけならばCSSで簡単に固定できますが、ウィンドウの高さから固定した要素がはみ出た時に下の要素が見切れてしまうので処理に困ると思…続きを読む

Permalink | サイドバーなどの要素を固定するjQueryプラグイン「jquery.frix.js」 はコメントを受け付けていません
  • このページを共有する