:has()を使ってCSSだけで同意チェックボタンを実装する方法｜BLACKFLAG
CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性（押せる状態）と非活性（押せない状態）を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
CSSで三角形などの図形をclip-pathで作る方法｜BLACKFLAG
CSSで三角形を作る際、これまでは主に「border」プロパティを使って作成していましたが、モダンブラウザで活用できるようになった「clip-path」プロパティを使うと三角形や多角形などの図形がわりと簡単に作成することができます。 今後はCSSで三角形などの図形を作成する際に「border」ではなく「clip-path」プロパティを使う手法にした方が汎用性も高く活用していけるので自分用メモとして紹介してみます。 clip-pathで様々な三角形を作る 「clip-path」プロパティで三角形を作るには「polygon」の値を使用します。 div { clip-path: polygon(50% 0, 100% 100%, 0 100%); } 「clip-path」プロパティの「polygon」でクリッピング領域と座標を指定します。 三角形の場合は頂点が3つになるので、3つのクリッピング
CSSでhoverアニメーションの実行をPCのみに制御する｜BLACKFLAG
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a
CSSのテキストシャドウ（text-shadow）をサクッと生成できる「CSS TextShadow Generator」作ってみました｜BLACKFLAG
ここ最近でCSSのグラデーションやボックスシャドウのジェネレーターを紹介してきましたが、同じようにCSSでテキストに影を付ける「text-shadow」プロパティを手軽にサクッと生成できる「CSS TextShadow Generator」を作ってみたので紹介してみます。 「CSS TextShadow Generator」を別枠で表示 入力項目は「text-shadow」プロパティの値となる「水平方向」「垂直方向」「ぼかし」「色」に分かれていて、各項目の設定については以下のようになっています。 ・「水平方向」はシャドウの水平（左側）方向のから距離。 ・「垂直方向」はシャドウの垂直（上端）方向からの距離。 ・「ぼかし」はシャドウのぼかしの強度。 ・「色」はシャドウの色の指定。 入力した値は即座に画面上にあるテキストプレビューエリアに反映されます。 （デフォルトでは「text-shadow」
アニメーション付きCSSグラデーションをサクッと生成できる「CSS Gradation Generator」作ってみました｜BLACKFLAG
CSSのグラデーションプロパティを自動で生成してくれるジェネレーターは多々ありますが、多機能な故に生成までにいろいろと入力に迷ったり、実行ボタンをクリックしないとCSSが生成されなかったり、もう少し手軽にサクッとCSSグラデーションプロパティを生成できるものがほしくて必要最低限の入力で必要最低限のCSSのグラデーションプロパティが生成できる「CSS Gradation Generator（β版）」を作ってみたので紹介してみます。 「CSS Gradation Generator」を別枠で表示 入力項目は「色数」「向き」「開始」「終了」に分かれています。 「色数」はグラデーションで使用する色の数ですが、指定できる色数は2～4色のみになっています。 「向き」はグラデーションの向きで、縦、横、ななめの3種類。 「開始」「終了」の項目でグラデーションの色を指定をします。 （「色数」を3、4にした場
CSSのボックスシャドウ（box-shadow）をサクッと生成できる「CSS BoxShadow Generator」作ってみました｜BLACKFLAG
先日、アニメーション付きCSSグラデーション生成ジェネレーター「CSS Gradation Generator」を紹介しましたが、同じようにCSSでボックスに影を付ける「box-shadow」プロパティを手軽にサクッと生成できる「CSS BoxShadow Generator」を作ってみたので紹介してみます。 「CSS BoxShadow Generator」を別枠で表示 入力項目は「box-shadow」プロパティの値となる「水平方向」「垂直方向」「ぼかし」「広がり」「色」に分かれていて、各項目の設定については以下のようになっています。 ・「水平方向」はシャドウの水平（左側）方向のから距離。 ・「垂直方向」はシャドウの垂直（上端）方向からの距離。 ・「ぼかし」はシャドウのぼかしの強度。 ・「広がり」はシャドウの広がりの強度。 ・「色」はシャドウの色の指定。 入力した値は即座に画面上のボッ
jQueryで360度写真を使ったスライドギャラリーを作成する方法 | BlackFlag
最近ではTHETAやGoProなどのカメラを使って、360度見渡せる写真を撮影することが簡単になり、Webサイト上にも360度の写真を掲載するコンテンツを見かけるようになりました。 室内の様子やきれいな風景など、ユーザーが自ら画面を操作して360度の世界を見渡せることで、Webサイト上で今までとは違った体験ができ、臨場感のある世界観を表現することができます。 そんな360度写真を複数枚並べたスライドギャラリーをjQueryを使って作成する方法を紹介してみます。 「jQueryで360度写真を使ったスライドギャラリーを作成する方法」サンプルを別枠で表示 360度ビューの部分の動作については、「Pannellum」プラグインを使用させていただいてます。 【プラグイン】Pannellum 画面上の360度ビューアー上をドラッグすることで、写真を360度の方向に回転させることができるほか、マウスホ
JavaScriptで簡単にアニメーションを実装できるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」 | BlackFlag
当ブログでは主にjQueryを使ったアニメーション動作について紹介していますが、jQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを実装できるライブラリも多々あります。 そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを組み込むことができるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」の3つを自分用メモとして紹介してみます。 anime.js 「anime.js」はCSSのTransformを扱う感覚でアニメーションを実装することができ、動作自体もとても軽快です。 ライブラリサイトがそのままデモ画面になっていますが、その動きを見ているだけでいろいろな発想が湧いてきそうです。 「anime.js」の対応ブラウザは以下になっています。 ・Chrome ・Safari ・Firefox ・In
jQueryで入力フォームのコピー＆ペーストを禁止する｜BLACKFLAG
会員登録などの入力フォームでメールアドレスの登録ミスをしないように、メールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー＆ペーストができないようにする仕様がよくあります。 このUIの良し悪しは別として、そのような入力フォーム内でのコピー＆ペーストの制御について、jQueryを使って簡単に実装する方法を紹介します。 「jQueryで入力フォームのコピー＆ペーストを禁止する」サンプルを別枠で表示 サンプル画面では2つの入力フォームを設けて、一つ目のフォームで入力したものをコピー及びカットする動作を禁止させ、二つ目のフォームでは入力する際のペースト（貼り付け）の動作を禁止しています。 この入力フォーム制御の全体構成についてまずはHTMLから。 ◆HTML <ul> <li>メールアドレス
CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法｜BLACKFLAG
情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。 その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。 アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプル この固定ヘッダーを被らないようにするには、スクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど、画面構成において余白の対策が必要になったりするのですが、そのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。 「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示 冒頭で紹
jQueryでマウス動作がストップした時を判別して処理する方法｜BLACKFLAG
jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといった、マウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますが、マウス動作が止まった時「mousestop」のようなものは存在しません。 そんな要素の上でマウス動作が止まった時を判別して判別処理を行うサンプルを作ってみたので紹介してみます。 「jQueryでマウス動作がストップした時を判別して処理する方法」サンプルを別枠で表示 サンプルではページ上にある灰色の四角のエリアを配置し、その上でマウスカーソルの動きがストップした時を判別します。 灰色の四角のエリアの上にマウスを移動させ、移動させている間（マウスカーソルが動いている間）は何も起こらず、灰色の四角のエリアの上でマウスの動きを止めると同時に背景が黒に変わります。 この様にマウス動作が止ま
jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法｜BLACKFLAG
レスポンシブサイトでメニュー等のナビゲーションを扱う際、 PC向けレイアウト時にはボタンをページ上に並べ、 スマートフォン向けレイアウト時にはボタン一式を折りたたんで ハンバーガーボタンでメニューを開閉させるUIにすることで スマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。 そんなレスポンシブ対応のナビゲーションメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったらスマートフォン向けのナビゲーションに切り替わります。 PC向けナビゲーションではボタン類は画面内に横並びですべて表示されます。 スマートフォン向けナビゲ
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」｜BLACKFLAG
jQueryなどでアニメーションを実装した際には アニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。 そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」が とても便利そうだったのでご紹介。 Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis デモページはこちら スクリプトはjQueryで使用するパターンと jQueryに
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
jQueryで特定の要素が存在するかどうかを判別する処理｜BLACKFLAG
スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
jQueryでスマートフォンとタブレットでviewportを切り替える実験（iPhone6 Plus対応）｜BLACKFLAG
Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン［iPhone/Android］とタブレット［iPad/Android］それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン［iPhone/Android mobile］とタブレット［iPad/Android］で そ
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】｜BLACKFLAG
以前に「jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法」 と題して、JSON形式でで外部HTML化したコンテンツ要素を 「もっと見る」ボタンで追加するUIを紹介しました。 当時公開したスクリプトでは「もっと見る」動作は ページ内で１つの設置のみの構成になっていたところ 1ページで複数設置を必要とした場面があったり、同様の要望もいただいたりしたので、 複数設置パターンのサンプルを再度紹介してみます。 サンプルを別枠で表示する ページをスクロールしていくと現れる「もっと見る」をクリックすると そのエリアの続きに追加で要素を読み込みます。 サンプルではページ内に2つの「もっと見る」エリアを設置しています。 左のエリアは28個、右のエリアは20個の要素を 5個ずつ追加表示しています。 全体構成についてまずはHTMLから。 ◆HTML <div class=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
