サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
black-flag.net
CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性(押せる状態)と非活性(押せない状態)を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性/非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
SNSやブラウザ、CMS、ソフトウェア、AIなど様々なサービスのロゴをSVGのアイコン形式でコピーまたはダウンロードすることができる「Svgl」がとても便利に活用できそうだったのでメモ書きとして紹介します。 A beautiful library with SVG logos – Svgl A beautiful library with SVG logos – Svgl 各サービスのロゴはSVG形式でコピーまたはダウンロードすることができます。 「Svgl」では下記のジャンルに分かれた形で様々なサービスロゴが400種類以上も提供されています。 ※2024年5月28日現在 ・AI – 人工知能 ・Browser – ブラウザ ・CMS – コンテンツ管理システム ・Community – コミュニティ ・Compiler – コンパイラ ・Crypto – 暗号 ・Database – デ
Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。 dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。(dialogタグでも表示するための指示はJavaScriptを使用しますが) IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。 dialogタグを使ってダイアログ表示 まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。 ダイアログで表示する内容をdialogタグの中に
ブラウザからiPhone(iOS)やAndroidなどスマートフォンやタブレットのカメラを起動するにはJavaScriptであれこれ実装していましたが、HTMLだけで簡単にカメラを起動させることができるcapture属性という便利なものがあったのでメモ用として紹介してみます。 capture属性はinputタグの「type=”file”」に対して指定し、デバイスの背面カメラ、インカメラ(前面カメラ)の選択から、写真と動画(ビデオ)の選択まで細かく指定することができます。 まずはそれぞれの動作サンプルから。 下記の「写真」と「動画」それぞれにある「背面カメラ」「インカメラ」のボタンからカメラを起動してみてください。 ※カメラの起動はiPhone(iOS)やAndroidなどモバイルまたはタブレットデバイスのみで動作します。(PCのカメラは起動しません。) See the Pen HTML c
レスポンシブ対応で大きなサイズで書き出した画像をCSSなどで縮小させてWebページ上に表示させた際に、Google Chromeで表示がぼやけることがあります。 ぼやけてしまった場合は画像に対して「-webkit-backface-visibility: hidden;」を指定する解消方法もありますが、これだけではうまくいかないことが多いです。 そんなGoogle Chromeで縮小表示した際に発生する画像がぼやける現象を解消できるCSSの「image-rendering」プロパティを備忘録として紹介します。 「image-rendering」でぼやけを解消 Chromeで縮小表示した際のぼやけを解消するには、画像に対して「image-rendering」プロパティの「-webkit-optimize-contrast」を使用します。 img { image-rendering: -web
ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ(クリック)動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a
最近では無料で使える写真や動画でも、とてもクオリティの高いものをフリー素材として提供しているサイトがたくさんあります。 そんな中でも会員登録が不要でダウンロードができるフリー素材サイトでよく利用させてもらっているものを自分用メモとしてまとめてみました。 写真や動画が無料でダウンロードでき、著作権表示も不要で商用利用可のものを集めてありますが、サイトによっては規約が変わることもありますので、ご使用の際は各サイトの利用規約を確認するようにしてください。 O-DAN (オーダン)- 無料写真素材・フリーフォト検索 O-DAN 検索すると40サイトほどのフリー素材サイトの検索結果を一覧で出してくれます。 どれも著作権フリーで素材のクオリティも高く、複数のサイトから一度に検索したいときにとても便利です。 2.300万点以上の高品質なフリー画像素材 – Pixabay Pixabay 2000万点以上
HALF SPACE DELETE半角スペース削除 以下のテキストフィールドに文字を入力もしくはコピー&ペーストすると、文章中にある全角文字間の半角スペースがすべて削除されて変換されます。(半角で記述された英文の単語間の半角スペースは残ります。)
当ブログでは主に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を使ってHTML要素の取得をする際には「.html()」メソッドなどを使用することが多くありますが、自分自身を含めた要素を取得したい場合には「.html()」メソッドでは思い通りにいかなかったりします。 そのような場面で自分自身を含めた要素を取得する方法を自分用のメモ書きとしてご紹介してみます。 例として下記のようなHTML構成の要素があったとします。 ◆HTML <div id="example"> <p>このテキストはダミーです</p> </div> このID「#example」に対して、「.html()」メソッドを使って要素を取得する場合は以下のようになります。 ◆SCRIPT var html = $('#example').html(); この「.html()」メソッドを使って取得した結果は、idの中身となる下記の部分しか取得できません。 ◆取得結果 <p>このテキス
Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。 そんな時に使える横スクロールさせるエリアが出現した時に、アニメーション付きのアイコンを表示してそのエリアが横スクロールできることを視覚的に伝えてくれるJavaScript「ScrollHint」がとても活用できそうだったので自分用メモとしてご紹介します。 スマホ表示で横スクロールさせるエリアにアイコンを表示してくれるJavaScript「ScrollHint」 ScrollHint この動作を実装させておくとページ内を上からスクロールした際に、横スクロールさせるエリアが出現した時点で、そのエリアの前面にアニメーション付きのアイコンを表示して、横スクロールができるということを視覚的に伝えてくれます。
会員登録などの入力フォームでメールアドレスの登録ミスをしないように、メールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー&ペーストができないようにする仕様がよくあります。 このUIの良し悪しは別として、そのような入力フォーム内でのコピー&ペーストの制御について、jQueryを使って簡単に実装する方法を紹介します。 「jQueryで入力フォームのコピー&ペーストを禁止する」サンプルを別枠で表示 サンプル画面では2つの入力フォームを設けて、一つ目のフォームで入力したものをコピー及びカットする動作を禁止させ、二つ目のフォームでは入力する際のペースト(貼り付け)の動作を禁止しています。 この入力フォーム制御の全体構成についてまずはHTMLから。 ◆HTML <ul> <li>メールアドレス
以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題して、jQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたが、それを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。 「jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法」サンプルを別枠で表示 ※上記のサンプルでは「WORKS」「PRODUCT」「RECRUIT」の3つのボタンのみにドロップダウンメニュー動作を実装しています。 ドロップダウンメニューのようなロールオーバーの状態を判別して処理するメニューUIでは、ボタンにロールオーバーをして表示されたメニューエリアにマウスカーソルを持って行く際に誤って隣のボタンに少しでも触れてしまうと表示されていたメニューエリアの内容が入れ替わってしま
Webページ上のリンクボタンは四角いものが主でしたが、CSSの進化によっていろいろな形状でのリンクボタンを簡単に作成することができるようになってきています。 そんな中でも最近Webページ上の表現でよく見かける六角形のリンクボタンをCSSを使って構成する方法について、2パターンの形状で紹介してみます。 「CSSで六角形(ハニカム)のリンクボタンを作る方法」サンプルを別枠で表示 リンクの形状を四角でも丸でもなく六角形の形で整形して、クリックできるエリアもその範囲のみとしています。 六角形の形状は頭が尖ったパターンと頭が平坦なパターンがあるので、その2通りの方法を紹介します。 頭が尖った六角形パターン まずはサンプル画面左の頭が尖った六角形パターンから。 HTMLにはクラスを付けたリンクタグを設置します。 ◆HTML <a href="#" class="hexagonA"><span>Link
情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。 その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。 アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプル この固定ヘッダーを被らないようにするには、スクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど、画面構成において余白の対策が必要になったりするのですが、そのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。 「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示 冒頭で紹
jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといった、マウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますが、マウス動作が止まった時「mousestop」のようなものは存在しません。 そんな要素の上でマウス動作が止まった時を判別して判別処理を行うサンプルを作ってみたので紹介してみます。 「jQueryでマウス動作がストップした時を判別して処理する方法」サンプルを別枠で表示 サンプルではページ上にある灰色の四角のエリアを配置し、その上でマウスカーソルの動きがストップした時を判別します。 灰色の四角のエリアの上にマウスを移動させ、移動させている間(マウスカーソルが動いている間)は何も起こらず、灰色の四角のエリアの上でマウスの動きを止めると同時に背景が黒に変わります。 この様にマウス動作が止ま
スクロールすることによってサイドカラムに配置しているナビゲーションメニューを 画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますが だいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多く ブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合には ナビゲーションメニューが見切れてしまうものが多く見られます。 そんなスクロール追従型のナビゲーションで メニューエリアが見切れないようにスクロールに合わせて 画面に固定されつつメニュー部分だけをスクロールさせる 固定型ナビゲーションメニューをjQueryを使って作ってみたのでご紹介してみます。 「jQueryで画面から見切れない固定型ナビゲーションメニューを実装する方法」サンプルを別枠で表示 なかなか文章で説明するのも難しいので サンプル動作からご確認ください。 サンプル画面左側のナビゲ
Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。 単純に並べられた要素がスライドするカルーセルはよくありますが 並べられた要素の中央に位置する要素のみを拡大表示させるという 少し変わった演出を加えたカルーセルパネルUIを jQueryを使って作ってみたので紹介してみます。 「jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法」サンプルを別枠で表示 画面の端から端までめいっぱいに並べられた要素が 一定時間の間隔でスライド移動します。 並べられた要素の中央にあたる要素のみが拡大されていて スライド移動するごとに拡大する要素が入れ替わります。 サンプルでは要素を画面の端から端まで めいっぱいに並べていますが全体を囲う要素の幅を指定することにより 決められた幅の中でスライドさせることも可能になります。 全体構成についてまずはHTMLから。 ◆
以前に「jQueryで数字をカウントアップしながら表示する方法」と題して、 jQueryで数字をカウントアップさせながら表示する方法を紹介しましたが、 数字を表示する別パターンとして、ランダムにシャッフルしたアニメーションによって 一桁ずつ順々に表示する方法でインパクトを与えることもあります。 Webページ上になにかの投票数や実績数またはSNSのシェア数といった数値を掲載する際に そのようなアニメーション演出を加えることによって目を引かせることもできます。 そんな数字をランダムにシャッフルして表示するアニメーションを jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 「jQueryで数字を一桁ずつランダムにシャッフルしたアニメーションで表示する方法」サンプルを別枠で表示 ページが表示されると画面上に配置された数字が 一桁ずつランダムで切り替わるアニメーションで
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。 そんなマテリアルデザインの一種として ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。 その動作をjQueryとCSSを使って実装する マテリアルデザイン風ボタンを作ってみたので紹介してみます。 「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示 画面上にあるボタンをクリックすると そのクリックしたところをポイントとして 円形の波動が広がるアニメーションを実行させます。 クリックしたポイントからアニメーションを実装することで 「ボタンをクリックした」ということと クリックした場所が視覚的に明確に分かるようになる効果があります。 このボタン動作の全体構成について まずはHTMLから。 ◆HTML <div id="linkArea">
Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に 単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることで ユニークな見た目でのインパクトある演出で数字を印象づけることができます。 そんな数値のカウントアップアニメーションを jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 「jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示 Webページ上に配置された数字がページロードと共にカウントアップされ 設定した数値で最終的に止まって表示されます。 数字は開始番号と最終的に表示する値までを指定し、カウントアップアニメーションします。 アニメーションするスピードも設定可能です。 全体構成についてまずはHTMLから。 ◆HTML <p class="count" data-num="100
5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたが、ブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。 【横スライドパターン】 jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法 「横スライドパターン:jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示 まずは横方向にスライドするパターンの実装についてです。 Webページに横に並べられた要素が右から左へ流れ続けます。 動作自体はただひたすら要素が流れ続けるシンプルなものです。 スライド全体にマウスオーバーした際には、スライド動作を一時的に止め、マウスアウトするとスライドが再開します。
古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、 CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。 画像やボタンにロールオーバーした際にCSSアニメーションを使っての さまざまな演出方法についてまとめているサイトも多々あります。 そんなCSSロールオーバーの演出をさまざまなアニメーションを加えるやり方の チュートリアルを紹介しているサイトの中で 個人的に参考になりそうだったものをまとめて紹介してみます。 Some More Subtle Hover Effect Ideas | Codrops Some More Subtle Hover Effect Ideas | Codrops 画像にロールオーバーすることで 重なり合うキャプション等のテキスト情報を さまざまなアニメーションで表示します。 デモは「SET1」
マウスホイールを使ってスクロールした際に 縦にスクロールするのではなく、画面全体を横(水平)にスクロールさせることで ページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。 そんなマウスホイールでの横スクロールに加えて ページ上の要素をレイヤー状に重ね合わせて、 奥行のあるパララックス効果もつけてスクロールさせる動作を jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 「jQueryで横スクロールのパララックスサイトを作成する方法」サンプルを別枠で表示 サンプルではページ上に3つのブロック要素をレイヤー状に重ね合わせて 画面上をマウスホイールでスクロールさせることで 各レイヤーを左右に水平スクロールします。 ※レイヤー状に重ね合わせているブロック要素を「パネル要素」とします。 マウスホイールでスクロールする距離を 各レイヤーによって制御する
少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。 レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなく ハンバーガーメニューボタンを使って、画面のサイドからメニューボタンを スライドさせて表示させるタイプもあります。 今回はその画面横からスライドさせて メニューボタンを展開するタイプのレスポンシブメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルでは前回同様に ウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったら
この度「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」というタイトルにて、本の執筆をさせていただき、2016年2月10日にSBクリエイティブ社さまから出版することになりました。 プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート著者:矢次悟郎 価格:2400円+税 サイズ:B5変/フルカラー 頁数:256ページ 出版社:SBクリエイティブ株式会社 発売日:2016/2/10 ISBN:978-4-7973-8527-4 本書の内容については、jQueryのプラグインを使って実装するようなUIをプラグインを使わずにオリジナルで作れるように、jQueryの構造や仕組みを理解してみましょう、といった内容になっています。 (プラグインの使用を否定するものではありません) jQueryのメソッドの使い方からイベント操作など、当ブログでも紹
レスポンシブサイトでメニュー等のナビゲーションを扱う際、 PC向けレイアウト時にはボタンをページ上に並べ、 スマートフォン向けレイアウト時にはボタン一式を折りたたんで ハンバーガーボタンでメニューを開閉させるUIにすることで スマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。 そんなレスポンシブ対応のナビゲーションメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったらスマートフォン向けのナビゲーションに切り替わります。 PC向けナビゲーションではボタン類は画面内に横並びですべて表示されます。 スマートフォン向けナビゲ
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
次のページ
このページを最初にブックマークしてみませんか?
『BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter e...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く