サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
black-flag.net
今までもハイクオリティなフリーアイコン素材など何度か紹介してきましたが、 フラットなものやロングシャドウ等々、様々な種類の中からデザインを選択し とても簡単にカスタマイズしながらアイコンを作成することができるツール 「Iconion : Free Icon Maker」がとても便利だったので自分用メモとして紹介してみます。 Iconion : Free Icon Maker 「Iconion」はインストールタイプのツールになっており Webサイト上にはWindows版とMac版の両方用意されているので 環境に合わせてダウンロードします。 起動すると以下のような画面が表示されます。 まず、画面右上の「Add Style」からアイコンの形状(デザイン)を選択します。 その後、選択エリア下にあるオプションパネルにて アイコンの背景色や角丸の角度など、 細かな設定をすることが可能になっています。
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ|Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
先日、AllAboutさんの記事でWebページ上のテキストに対して 「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題した jQuery+CSS3を使って1文字ずつ装飾を変える方法を解説していましたが これをCSS3未対応ブラウザでも実装できるように jQueryのみで文字単体に個別で指定を与える実験をしてみたので紹介してみます。 jQueryでテキストを一文字ずつ装飾を変える実験 まずはHTML上に下記の様な段落テキストを配置します。 ◆HTML <p class="split">jQueryでテキストを一文字ずつカットするサンプルテキストです。</p> そしてこのテキストに対して、jQueryを使って一文字ずつ個別に 任意のクラスの付けたinline要素(<span>)で囲うようにします。 スクリプトの記述は以下の様になります。 ◆SCR
Facebook上にWebページをシェアした際に表示されるOGP画像。 最近では様々な表示パターンがあり 実際にどう表示されるか、画像を作成する際に悩みどころだったりします。 そんな際にFacebook上でOGP画像がどう表示されるか ブラウザ上でシミュレートできるサービス「og:image Simulator」が この先便利に使えそうだったので自分用メモとして紹介してみます。 OGP画像シミュレータ | og:image Simulator OGP画像シミュレータ | og:image Simulator ページ上部の画像ドラッグエリアに 作成したOGP画像をドラッグ&ドロップするだけで 複数パターンのFacebookのOGPサンプル枠に作成した画像がはめ込まれ、 Facebook上でどの様に表示されるかが一目で分かるようになります。 推奨画像サイズも明記されていてとても親切。 当ブログ
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール(ダウン)してそれぞれのコン
jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので、試しに作ってみたのを紹介してみます。 レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので、まずは別枠表示で動作サンプルから。 「jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、最大幅を「800px」最小幅を「320px」としてブラウザ幅によってスライドショー部分が拡大縮小します。(どちらの値も変更可) 簡単な動作仕様については以上になります。 全体構成についてまずはHTMLから。 ◆HTML <div class=
Webページ上のテキストや数値を表示する演出で スロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かあり その度に苦労していたのですがとても簡単に同様のアニメーションを実装することができる スクリプトがあったので自分用メモとして紹介してみます。 Odometer – Transition numbers with ease Odometer – Transition numbers with ease 開始値と終了値とアニメーション時間を設定するだけで 簡単にスロットマシンのような回転アニメーションを実装できる「Odometer」 (jQueryを使わずに使用できます) デモページでは様々なテーマパターンが紹介されていて CSSを切り替えるだけで簡単に見た目を選択することが可能なようです。 数字だけでなくテキストも回転させることが可能になっているので スロットマシン
これらの設定値を変更することでもろもろ調整が可能になっています。 追加される要素は一つひとつが <div>で囲われるようになっており 個々にID名が付与されるようになっています。 ※実行後のHTMLソースをFirebug等の開発ツールで見てもらえると分かるかと思います。 (ID名に関してはJSONファイルに記述) スクリプト14行目の「url: ‘js/include.json’」が 読み込むJSONファイルの指定になるので パスやファイル名を変える際にはここを変更します。 そして読み込むJSONファイルは以下の様になっています。 (ちょっとムダに長いです・・・) ◆JSON [ { "itemNum": "1", "itemSource": "<img src='img/photo1.jpg' alt='' />【photo1】<br>これは追加要素1つ目のダミーテキストです。これは追加
× MODAL WINDOW【01】 JavaScriptを使用しないCSS(CSS3)のみでのLightBox風モーダルウィンドウです。 モーダルウィンドウ内は通常のテキストや画像の配置の他、 リンクテキストなどの配置ももちろん可能です。 ≫BlackFlagトップページへ(同枠) ≫BlackFlagトップページへ(別枠) モーダルウィンドウを閉じる際は、ウィンドウ外をクリックするか、 下記の様に配置して閉じるボタンをクリック。 【×】CLOSE
Webページ作成時にリストやdivなど連続したブロック要素を並べた際に 中の要素量によって高さがまちまちになってしまった場合 個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。 Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、 ここ最近新たに話題になった高さを揃えるプラグインもいくつかあったので 自分用メモとしてまとめて4つほど紹介してみます。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R 言わずと知れた「to-R」さんの「jquery.heightLine.js」ですが 先日バージョンアップによってレスポンシブ対応され 今まで以上に便利なものになりました。 オプションでは ————————
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス(少々今さら感も感じますが・・・)効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト&jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
コーディングする上で今では当たり前となっているfloatを使って回り込みをした際の解除指定の「clearfix」。 この記述方法についてはいくつかパターンがありますが、うちでは —————————————– .clearfix:after { content: “.”; height: 0; clear: both; display: block; visibility: hidden; } .clearfix { display: inline-block; } —————————————– の記述を基本としています。 ですが、この記述方法では「IE8」では、ページ上にJSを使って高さが可変する動きをつけるとブロック要素ごとに重なりあったりする不具合が生じることがちらほら。 そんな際にはIE8のみ“display”要素を“inline-block”から“block”に変えることで解決でき
Googleさんの画像検索で使われているサムネイルをクリックすると すぐ下にアコーディオン形式で詳細エリアが広がるUI。 このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが 画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので 実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。 レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応) サンプルでは25枚の画像を一覧で並べて ウィンドウサイズに合わせて、 1行に並べられる画像数等がリキッドレイアウトされます。 サムネイルをクリックすると すぐ下に詳細エリアが展開されます。 詳細エリアにはNE
ちょっと前に話題になっていた、YouTubeやGoogleマップやInstagramなどの ページ内に埋め込む際のURLや埋め込みコードを 簡単にレスポンシブ化してくれるサービス「embedresponsively.com」が 便利に使えそうだったので自分用メモとして紹介してみます。 embedresponsively.com 使い方は簡単で貼り付ける媒体を選択して 画面内の入力フォームに、動画ページのURLや埋め込みコードを入力して 「Embed」ボタンをクリックするだけ。 (入力するURLの内容は媒体によって違います。) クリック後は画面の下にレスポンシブ用のHTMLやCSSのコードが生成されるので それを張り付ければいいだけ。 実際にYouTubeでコードを生成した場合は以下のような画面になります。 手軽に使えることと、CSSでどの値をどのようにすればレスポンシブ化できるか、 といっ
計算する[dp(dip)]の値をフォームに入力してください。 ピクセル密度ごとに [px] に変換された値が下記に表示されます。
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 (最後は3つ表示) 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID(もしくはクラス)を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
先日ここで、レスポンシブ対応のスライドショーとして、 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」 と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたが フェード切り替えばかりじゃおもしろくないと思い 同様の構成で切り替わる際に、画像を分割してアニメーションするパターンを 実験的に作ってみたので紹介してみたいと思います。 今回のスライダー動作はなかなか言葉では説明しずらいのでまず動作サンプルから。。。 「jQueryでレスポンシブ対応の画像を分割して切り替えるスライドショーを作る実験」サンプルを別枠で表示 サンプルでは6枚の画像を使用し、 切り替えの際には縦に20等分ストライプ上に分割した動きで切り替えています。 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
jQueryなどを使ってページ遷移をしない構成で画面切り替えを作る際 通常ではURLは変わることなく一つのURLみとなり ブラウザの「戻る」や「進む」が効かなかったり 直接、切り替え後の特定の画面へ遷移することができなかったりします。 その様なページ遷移無しの切り替えの場合でも ブラウザの「戻る」や「進む」を有効にし 切り替え画面ごとに個別のURLを持たすことができるようになるプラグイン 「jQuery hashchange event」と「Navi.js」を自分用メモとしてご紹介。 Ben Alman ≫ jQuery hashchange event デモ画面はこちら この「jQuery hashchange event」を使用すると タブ切り替えなどの際に、 切り替え画面ごとにURL末尾に「#」を付けた形で 個別のURLを持つことが可能になります。 jQueryファイルとプラグインフ
Android(アンドロイド)開発では通常のWebサイト制作では聞きなれない dp(dip)という単位を使用することがあります。 Androidでの基本的な5つの解像度 【ldpi】【mdpi】【hdpi】【xhdpi】【xxhdpi】の 各画面で表示する際の共通単位になるようですが、 このdp(dip)の値をpxに変換する必要に駆られることがあり計算用ツールを作ったので、 ここで紹介するまでもないかもしれませんが、メモとして紹介しておきます。 dp(dip) → px 変換 [dp(dip)] → [px] Conversion dp(dip) → px 変換 [dp(dip)] → [px] Conversion 計算させる「dp(dip)」の値をフォームに入力すると 下部の表に画面解像度(ピクセル密度)ごとの 【ldpi】【mdpi】【hdpi】【xhdpi】【xxhdpi】 それぞ
レスポンシブ対応を求められるWebサイト制作では ナビゲーションメニューの構成について 何かと気を使わなくてはいけない点が出てきます。 ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが 便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルが そこそこ溜まっていたので11種類ほどまとめて紹介してみます。 Responsive Nav – Responsive Navigation Plugin Responsive Nav – Responsive Navigation Plugin jQueryなどライブラリファイルを使わずに 1.7KBという軽量スクリプトで構成された 「Responsive Nav – Responsive Navigation Plugin」。 PCサイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
先日ここでレスポンシブ対応のスライドショーの試作品として 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題して jQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを 紹介しましたが、操作面に関してフリック操作には対応していなかったので、 メイン部分にフリック動作を追加してみたパターンを試しに作ってみたので紹介してみます。 レスポンシブ動作部分はブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでレスポンシブ対応のフリックスライダー(サムネイル付き)をシンプルに作る方法 サンプルでは6枚の画像を自動でスライド切り替えしています。 メインビジュアル部分をフリックすることで左右に移動させることができ 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り
以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 (左右のNEXT/BACK透過ボタンで画像を切り替えることも可。) サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。
スマホサイト制作の実機検証する際などでQRコードを使うことがよくあるのですが、さくっとQRコードを作れる手軽なツールがいまいち見当たらなかったので、jQueryを使って簡単にQRコードを作成できるツールを作ってみたので紹介してみます。(ただ自分で使うために作ったものになりますが・・・) ※QRコードはデンソーウェーブの登録商標です。 QRコード作成 [QR CODE GENERATOR] 変換するURLを画面上にあるフォームに入力すると下記にQRコードが表示されます。 (入力フォームの値を変えるごとにリアルタイムにQRが変換されます。) ちょっとしたオプションとして「▼」ボタンを押すとQRコードのサイズ(デフォルトでは200×200)や色、CANVASモードで生成するかTABLEモードで作成するか、 それぞれ選択できます。 (HTML5に対応していないブラウザではTABLEモードでQRを表
以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、 一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、 同様のパターンで、フェードインさせる順番をランダムにするパターンを できるだけシンプルな構成で作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像がランダムによって順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/
以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】」と題して、 CSSアニメーションの実行パターンをいくつか紹介しましたが、 アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が 簡単でいろいろとこの先使えそうだったので紹介してみます。 構成としてはCSS側でアニメーション設定をしておいて jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで その要素に対してアニメーション制御をする形になります。 例えばHTMLには 以下のようなidを付けたdivを用意して、 ◆HTML <div id="action"></div> CSS側では 以下のようにアニメーションをセットします。 ◆CSS #action{ top: 0; left: 0; width: 50
Webサイト制作の際にクライアントからの要望などや 画像を簡単に保存させたくない時など、 右クリック動作を禁止させることがたまにあるかと思います。 右クリック禁止はJavaScriptで簡単に実装できますが jQueryを使うと、より簡単に実装することができたので メモ書きとして紹介してみます。 まずは単純にページ全体に対して 右クリック禁止させる方法は以下のような記述になります。 ◆SCRIPT $(function(){ $(document).on('contextmenu',function(e){ return false; }); }); もしくは、 ◆SCRIPT $(function(){ $('body').on('contextmenu',function(e){ return false; }); }); 「contextmenu」が右クリック動作にあたるようなので
jQuery FullWide Slider COPYRIGHT © BLACKFLAG.NET ALL RIGHTS RESERVED.
以前ここで「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 それぞれのデバイスごとに振り分ける方法を紹介しましたが Androidはモバイルとタブレットの振り分けはできていなかったのですが iPhoneとAndroidモバイル、iPadとAndroidタブレットのそれぞれを振り分ける状況が やはり増えてきそうなので追加版として紹介してみます。 サンプルとしては、AndroidタブレットとiPadは「/tb/」ディレクトリへ AndroidモバイルとiPhoneは「/sp/」ディレクトリへ、リダイレクト処理をする構成にしてみます。 ◆SCRIPT <script type="text/javascript"> var userAgent = window.navigator.userAgent.to
次のページ
このページを最初にブックマークしてみませんか?
『BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter e...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く