DIV要素1つでCSSアイコンを表示出来るOne divをご紹介。 サイト自体は2012年からあるのですが、改めてCSSアイコンを作る際に参考にさせていただきました。 HTMLがDIVタグ1つなのとCSSが簡単にダウンロード出来るようになっています。 プログレスバーや矢印など101個のアイコンが使えるようになっています。 興味のある方は下のリンクからどうぞ One div
![一つのdivタグでアイコンを表示するCSSアイコン101 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/27836be3df12998be47a92c5a227f6621d3a39fb/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F02%2F20150224-01-600x292.png)
ページをスクロールして行ってもずっと画面についてきて 画面に表示されるナビゲーションを作るjQueryプラグイン「stickUp」をご紹介。 ↑最初は画面の中央あたりに配置してあります。 ↑しかし、メニューよりも下にスクロールしていくと、ついてくるナビゲーションに変化 地味に使うプラグインでは無いでしょうか。 興味のある方は下のリンクからどうぞ http://lirancohen.github.io/stickUp/
画像ギャラリーに良さそうなjQueryプラグイン 画像の一部について、詳細に説明したい場合に使える「iPicture」をご紹介。 この写真のこの人が○○でさー、この右下のコレが○○だったんだー。 という説明をマウスオーバーすると表示できるようになります。 Flickrなんかでも、画像の上に説明を載せれたりしますよね。 いつか使うかもしれないので一応メモ。 アイコンにマウスオーバーすると簡単な説明が表示されます。 スライドショーやギャラリーに組み込むと良さそうですね コードは以下のような感じになるそうです。 jQuery(document).ready(function(){ $( "#iPicture" ).iPicture({ pictures: ["picture1","picture2","picture3", ...all pictures' ID], moreInfos:{ "p
HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、 テキストをリッチに表示したりするなどの細かな使い方もできたりします。 CanvasTextというJavaScriptライブラリを使うと、 HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。 使い方 //インスタンスを作成 var CanvasText = new CanvasText; //共通の処理を記述 CanvasText.config({ canvasId: "canvas", fontFamily: "Verdana", fontSize: "14px", fontWeight: "normal", fontColor: "#000", lineHeight: "12" }); //blueクラスを作成して、属性を指定 CanvasText.defineCl
WordPressでサイトを作る際に毎回入れるプラグインを人に教える機会があったのでブログでもご紹介します。 新しくブログを作る時や仕事でカスタマイズする際に参考にしてもらえれば幸いです。 全てのサイトで必ず導入するプラグイン このサイトでも使っていますし、クライアントのサイトを作る際にも毎回導入しています。 セキュリティ関係やSEO対策プラグインが主なものですよ。 All in One SEO Pack サイト全体、個別記事、ページ毎にタイトル、description、キーワードの設定などが出来るようになります。 SEOに必要な最低限の機能はカバーされていますので、マストなプラグインですね。 Akismet スパム対策のプラグイン。 オンラインサーバでコメントの内容をチェックするスパム対策サービスです。 標準でインストールされているので、管理画面から有効化してAPIキーを入力するだけでO
UIを作成するのは非常に時間がかかりますよね。時間を節約しながらクオリティを保ちたいときに使える素材がまとめられていたのでエントリーです。 PhotoShopで使えるUIデータが70点まとめられた「70 Free PSD Web UI Elements For Designers」をご紹介。 Web UI Element Pack ボタンやチェックボックス、ローディングバー、スライダー、ページング用のアイコンなどのフォーム系UIのPSDデータ。商用利用可。 Dark GUI Kit ダーク系のUI。 iPad GUI Kit in PSD iPad風のデザインPSDデータ。モック作成用にも使えます。 PSD Button collection 20個のボタン素材。 Calendars PSD カレンダー作成用。 iTunes replacement GUI PSD iTunesのデザインP
JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。 これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。 var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello' ↑スコープの使い方 $('p').click(function() { console.log('click'); }); ↑イベントの使い方 (function($){ $.fn.showLinkLocation = function() { return this.filter('a').each(function(){ $(this
キーボードで動かす全画面スライドショーが作れるjQueryプラグイン「Jquery.ascensor.js」が良さそうだったのでご紹介。 マップを作成して、次のページの座標を指定する作りになっています。 プレゼンを作る際に、便利そう。 ブラウザ上でスムーズにとスワイプされるのは見ていて気持ちいいです。 動作デモ 使い方 jQueryとscrollToプラグイン、Ascensorプラグインの3つを読み込みます。 <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.scrollTo.js" type="text/javascript"></script> <script src="jquery.ascensor.js" type="text/javascript"></script>
最近知ったHTML5で作られたWordPressテーマをを備忘録的にまとめておきます。 デザイン済みテーマ、カスタマイズ用のシンプルテーマ、IE6でもデザインが崩れないテーマなど色々ありました。 Constellation Theme iPhoneやiPad用に表示が最適化されているHTML5製のWordPressテーマ HTML5Press おすすめ投稿をスライダで表示する事が出来ます。 画面を下にスクロールさせると、ページTOPへ戻るがフェードインしながら表示されるテーマです。 Free Dream HTML5 WordPress Theme IE6でも表示可能なテーマ。 960 pxのワイドレイアウトです。 TwentyTen Five WordPress3のデフォルトテーマである「Twenty Ten」をHTML5に対応させたテーマです。 デザインやスタイルは「Twenty Ten
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました! jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex
「Img to CSS」は、写真やロゴなどのGIF・JPG・PNG画像をCSS化できるオンラインサービスです。 CSS化したテキストは、コピーペーストで使用できるようになっています。 以下に使ってみた様子を載せておきます。 画像を指定 ↑サイトにアクセスすると、画像をアップロードフォームから画像をしてする事ができます。 画像はURLからも指定できるようになっています。 ↑試しにFirefoxの画像をアップしてみました。 画像は拡大表示していますが、ほぼ忠実に再現されていますね。 大きな画像は対応していないようで、250 x 250px以内でなければいけないようです。 これはすごい。 使ってみたい方は下のリンクからどうぞ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く