WAI-ARIAのaria-current属性で現在位置を指定

デモページはこちら ナビゲーションメニューにWAI-ARIAのaria-current属性で現在位置を指定します。jQueryでページのURLを判別し、対象のa…

WAI-ARIA

Photoshop・Illustratorで最近使用したファイルの一覧表示を削除

PhotoshopとIllustrator起動時に表示される最近使用したファイルの一覧表示を削除します。「一覧の情報を維持したまま、一時的に非表示にする方法」と…

jQueryのeachメソッドの使い方

デモページはこちら jQueryのeachメソッドの使い方です。eachメソッドには関数を指定します。関数の引数として「index（インデックス番号）」と「el…

Koalaで発生したコンパイルエラーの対処法

Koalaで発生したコンパイルエラーの対処法です。発生したエラーはログから確認できますが、Koalaの起動を終了するとエラーログは消去されます。 Argumen…

PC表示でページの途中からスクロールに追従するナビゲーション

デモページはこちら PC表示の場合、ページの途中に配置したナビゲーションが画面の一番上に来たタイミングで固定され、スクロールに追従する動作を実装します。 ナビゲ…

jQuery Migrateの使い方

デモページはこちら jQueryはバージョン1.9と3.0で大幅な仕様変更があり、jQuery Migrateはその仕様変更を補助するためのパッチです。jQue…

Illustratorでアートボード中央にオブジェクトを配置

Illustratorでアートボード中央にオブジェクトを配置します。整列パネルを利用します。 ウィンドウ→整列→整列パネル右下の「整列：」の下にあるボタンをクリ…

Illustratorの画像書き出しで画像サイズが1px大きくなる場合の対処法

Illustratorのスクリーン用に書き出しでアートボードを書き出しする場合、書き出した画像のサイズがアートボードのサイズよりも1px大きくなる場合があります…

ページ最下部でトップへ戻るボタンを表示

デモページはこちら ユーザーがページ最下部までスクロールしたタイミングで、トップへ戻るボタンをフェードインで表示します。ボタンをクリックまたはページ最下部よりも…

jQueryで要素の幅と高さを取得（width・innerWidth・outerWidth・height・innerHeight・outerHeight）

デモページはこちら jQueryで要素の幅と高さを取得するメソッドのまとめです。まず幅ですが、対象要素の幅を取得するwidth、対象要素のpaddingを含めた…

jQueryで要素を追加または移動（before・insertBefore・after・insertAfter・prepend・prependTo・append・appendTo）

デモページはこちら jQueryで要素を追加または移動するメソッドのまとめです。対象要素の直前に追加するbefore、insertBefore、対象要素の直後に…

jQueryで親要素を取得（parent・parents・closest）

デモページはこちら jQueryで親要素（親要素の親要素である先祖要素を含む）を取得するメソッドのまとめです。対象要素の親要素を取得するparent、対象要素の…

jQueryで子孫要素を取得（children・find）

デモページはこちら jQueryで子孫要素（子要素と子要素の子要素である孫要素）を取得するメソッドのまとめです。対象要素の子要素を全て取得するchildren、…

jQueryで兄弟要素を取得（next・nextAll・prev・prevAll・siblings）

デモページはこちら jQueryで兄弟要素（同階層の要素）を取得するメソッドのまとめです。対象要素の直後の要素を取得するnext、対象要素の直後以降の要素を全て…

jQueryプラグイン drawer.jsでヘッダーを固定

デモページはこちら jQueryプラグイン、drawer.jsでヘッダーを固定してグローバルナビゲーションを追従させます。 まずhtmlですが、ハンバーガーメニ…

YouTubeの動画からサムネイル画像を取得

YouTubeの動画からサムネイル画像を取得します。取得には半角英数11桁の動画IDが必要です。サムネイル画像は下記の通りサイズ別に分かれていますが、最大サイズ…

Youtube

metaタグのformat-detectionで自動リンクを無効化

デモページはこちら metaタグのformat-detectionを設定して、スマホのブラウザで電話番号、メールアドレス、住所の表記がリンクに自動変換されるのを…

AndroidiOS

Illustratorのsvg書き出し形式の詳細設定

Illustratorでsvg書き出し用に、書き出し形式の詳細設定をします。最適な設定は以下になります。 スタイル「内部CSS」、「インラインスタイル」、「プレ…

jQueryのDeferredオブジェクトを利用した同期処理

デモページはこちら svgロードアニメーションをフェードアウトする処理を、jQueryのDeferredオブジェクトを利用して同期処理（非同期処理を待つ処理）で…

localStorageを利用してメインビジュアル切り替えデータを保持

デモページはこちら HTML5から導入されたWeb Storageの一種localStorageを利用して、メインビジュアルを切り替えた際のデータをブラウザに保…

localStorage

jQueryのCDN読み込み

コンテンツ・デリバリー・ネットワーク（CDN）は、アクセス元から一番近くのキャッシュサーバーへ接続してファイルが提供される仕組みです。jQueryのCDNはjQ…

svgロードアニメーションの実装【円を一周】

デモページはこちら 円を一周する動作のsvgロードアニメーションを実装します。画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded…

JavaScriptライブラリ imagesLoaded（imagesloaded.pkgd.js）の使い方

デモページはこちら 画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded（imagesloaded.pkgd.js）の使い方です。…

animation-fill-modeの指定について

animation-fill-modeプロパティはCSSアニメーション実行後、対象要素にどのようなスタイルを適用するか設定します。animation-fill-…

CSSアニメーション

jQueryプラグイン drawer.jsの使い方

デモページはこちら ハンバーガーメニューが実装できるjQueryプラグイン、drawer.jsの使い方です。使用にはjQuery以外にdrawer.css、is…