jQueryで発生したエラーの対処法

コンソールでjQueryのエラーが発生した場合の対処法です。エラー発生の有無はjQueryのバージョンやfull版・slim版の違いによっても異なります。1系や…

ajax

JavaScriptライブラリ Web Font Loader（webfont.js）の使い方

デモページはこちら Webフォントの読み込みにWeb Font Loader（webfont.js）を利用します。Web Font LoaderはGoogleと…

Google Fonts

viewportの指定について

レスポンシブでサイトを制作する場合、HTMLでviewport、CSSでメディアクエリ、両方を設定する必要があります。CSSでメディアクエリを記述しても、vie…

iOS

JavaScriptライブラリ layzr.jsの使い方

画像の遅延読み込みができるJavaScriptライブラリlayzr.jsの使い方です。ウィンドウ表示領域外の要素や画像は非表示もしくは代替画像にしておいて、スク…

Illustratorの環境設定で単位変更

Illustratorで単位を変更する場合、環境設定で変更したい単位を選びます。 編集→環境設定→単位 環境設定の単位を変更しても単位が変更されない場合、ドキュ…

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

アイコンフォント

Google Fontsの使い方

Google Fontsのサイトで使用したいフォントを全て選択します。複数のフォントも一度に読み込めます。Google Fonts Embedタブの<li…

Google Fonts

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合の注意点

マウスオーバー時にCSSのみでフェードイン・フェードアウトを実装する場合、display: none;で非表示、マウスオーバー時にdisplay: block;…

CSSアニメーション

iOS Safariのツールバーと表示エリアの挙動

iOS Safariで表示される画面下部のツールバーは、下にスクロールすると非表示になります。正確には上部のアドレスバーが小さくなり、下部のツールバーが消えます…

iOS

loadメソッドでhtmlファイルを読み込み

jQueryのloadメソッドはajaxの機能を限定的にした簡易版のような位置づけで、htmlファイルを読み込んで出力するだけの機能に特化しています。空のdiv…

ajax

CSSアニメーションで画像を横スクロール無限ループ

CSSアニメーションで画像を横スクロール無限ループさせます。まずhtmlのコードです。同じ画像を2つ配置して、クラス名loop_wrapのdivタグで囲います。…

CSSアニメーション

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

jQueryプラグイン、jquery.cookie.jsの使い方です。まず前提としてcookieはhttp通信でサーバー側からクライアント側に渡されるため、ロー…

cookie

rubyタグでテキストにルビ（ふりがな）を振る

rubyタグとrtタグの二つを使ってテキストにルビ（ふりがな）を振ります。rtタグはふりがな、rubyタグはテキストとふりがな（rtタグを含む）の両方を囲います…

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表…

iOS