Webデザイン

シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js

フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こう...

Webサイト内の電話番号が勝手にSkypeの番号ボタンに置換されるのをmetaタグで制御する

少し気になったので調べたんですが、 ブラウザにSkypeのアドオンとかエク ステンションを入れていると、Web サイトやGoogleの検索結果の電話番号 が勝手にSkype用の起動ボタンに置換 されます。

画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイト

CSSのみでOperaやIEのロゴを作成したり、 というのを以前はよく見かけましたが、 インスパイアされたようでTwitterや、 Apple、マクドナルドやナイキなど様々 なロゴをCSSのみで作成、コードを公開 してるサイトがあ...
Ads

ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと

個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。

軽量で、シンプルなCSSフレームワーク・Atatonic

結構前からあるみたいですけど、なかなか 良かったのでメモがてらご紹介。軽量で シンプルなCSSフレームワークです。有名 なフレームワークは使いやすく、高性能 な傾向ですが、結局無駄が出てしまうので 場合によってはこういうシンプルな...

jQueryで手軽にサクッとシンプルなニュースティッカーを作る

今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。

ミニマルなアイコンやシンボルをWebフォントで表現するために作られたフリーフォント・Web Symbols typeface

ちょっと面白かったのでメモ。 ミニマルなアイコンやシンボル をWebフォントとして使えるよう にしてくれたフリーフォント、 Web Symbols typefaceのご紹介 です。割と嬉しいかもw

様々なデバイスにレイアウトを最適化するレスポンシブWebデザイン対応でタブやフォームなどのリッチUIもセットにしたフレームワーク・Foundation(と、サーバー移転のお知らせ)

iPadやiPhoneなど、様々なデバイスにもレイアウトを最適化するレスポンシブWebデザイン対応で、タブやグリッド、フォームデザインなど、UIをリッチなデザインに変更可能なマルチフレームワーク・Foundationのご紹介。

タブで切り替え可能な地図をGoogleMapで実装する為のjQueryコードサンプル

勉強用にメモ。タブで複数のGoogleMap をjQueryで切り替え可能にするコード です。わりと簡単なコードでユーザーに とって使いやすい地図を実装出来るの でちょっと覚えておきたい。仕組みは 結構単純です。

CSS3のハードウェアアクセラレーターを使ったビジュアルエフェクト生成用jsライブラリ・Alice.js

気になったので備忘録的に触って見ました。 ハードウェアアクセラレーターを使った CSS3の新機能を実装出来るjsライブラリ・ Alice.jsです。と、分かったような事を 書きましたが、まだちょっと勉強不足で いろいろ調査中です。...

jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする

jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みた...

jQueryで動作する開閉パネル式をWordPressのショートコートで作れるようにする基本的なチュートリアル

よく見かける、クリックで開閉するパネル をショートコードでサクッと作れるように するためのカスタマイズ法です。jQueryを 使います。どこにでも手軽に追加できる ので覚えておくと結構重宝します。FAQ 以外でも応用できそうですね...

Webサイトツアーを手軽に実装出来るクロスブラウザ対応のjQueryプラグイン・Joyride

何度か似たようなの見かけてますが、 サイト内ツアーを実装出来るjQuery プラグイン・Joyrideです。高機能で はありませんが、シンプルでなかなか 使い勝手も悪く無さそうでしたので 少し触ってみました。

Webフォントを上手くWebデザインに取り入れたサイトを収集しているギャラリーサイト・the WEB FONTS gallery

ありそうでなかったWebデザインギャラリー だったのでご紹介。Googleでも提供して くれている、Webフォント。日本語では なかなか難しいですが、英語圏ではかなり 一般化してきている印象です。そんな Webフォントを上手く利用...

iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW

iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト に...

全体をドラッグで動かせるグリッドレイアウトのイメージギャラリーをjQueryで構築するチュートリアル

画面いっぱいに広がったグリッドレイアウト のイメージギャラリーをドラッグで動かす 事ができるコンテンツをjQueryで実装する 為のチュートリアルです。かなり良く出来 てます。iPhoneでも一応可能でしたので 工夫すればスマート...

覚えておくと地味に便利だと思える日が来るかもしれないjQueryのコードスニペット何個か

これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。

CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js

久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを...

表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL

ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保...

iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design

いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。...

アコーディオンとグローバルメニューを併せたコンテンツを実装出来るjQueryプラグイン・facets

ユニークだったのでご紹介。グローバル メニューに連動してアコーディオンが 連動して開閉するコンテンツを実装する jQueryプラグイン。使いどころはあまり 無さそうですけど、もしかしたら、とい うことで・・

iPhoneやiPadにも対応の、ページをめくるようなエフェクトを実装出来るjQueryプラグイン・FlipPage

面白そうなアイデアが生まれそうな気がして なんとなくメモ。よくあるページめくりの エフェクトを実装するjQueryプラグインで、 iPadやiPhoneにも対応しているので個人的 にはむしろ、タッチデバイス向けに使いたい という気...
Ads