ウェブデザインの幅をひろげる20のキーワード | コリス
20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.
jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」
twitter facebook hatena google pocket かっちょよくシリーズ第２弾。。。 jQueryを使用してメニューのマウスオーバーを印象的にしてみます。 via：jQuery Background Position sponsors 使用方法 jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。 次にこんな画像を用意します。 次に以下のようにjsを記述します。 <style> ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;} li a {background
短縮 URL を自前で提供してみる
Twitter キッカケで急速に広まった感のある、いわゆる短縮 URL サービスですが、無駄なリクエストを増やすとか、本当のリンク先がわかりにくくてスパム業者に悪用されるよだとか、色々と言われています。 つい最近も 「短縮URLは必要悪か、単なる悪か。 （原文：Are URL Shorteners A Necessary Evil, Or Just Evil?）」 なんて議論で盛り上がったり。 そんな一連の議論の中で、色々問題もあるけど、短縮 URL 自体は便利だし、だったらサイト管理者が自前で短縮 URL を提供して、それをみんなが使いやすくする仕組みがあればいいんじゃないの？という流れが生まれ、それが link 要素に 「rev="canonical"」 を組み合わせた方法として広がりそうな気配をみせています。 ちなみに、「rel="canonical"」 という記述は最近検索エンジン
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
SoHaya.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
MOONGIFT: » Web開発者は必須！様々なバージョンのIEを収録した「Internet Explorer Collection」:オープンソースを毎日紹介
Webサイトを構築する際に、どのバージョンのブラウザまでサポートするかが問題になりやすい。最新のバージョンだけであれば良いのだが、不特定多数へのサービス提供となればそうもいかないだろう。 様々なバージョンのIEが立ち上げられる IEの場合で言えば5.5以降を対象とする場合が多いように思う。だがそんなバージョンのIEを簡単に用意できるだろうか。そこで使いたいのがこのソフトウェアだ。 今回紹介するフリーウェアはInternet Explorer Collection、様々なバージョンを収録したIEだ。 Internet Explorer Collectionで提供されるバージョンは1.0/1.5/2.01/3.0/4.01/5.01/5.5/6.0/7.0/8.0となっている。8.0β版まで収録されているので、今後を見越した上でのテストが実行できるようになる。 なぜかインストーラーはVista
MOONGIFT: » JavaScriptで画像をズーム「Magic Zoom」:オープンソースを毎日紹介
※ 画像は公式サイトデモより Eコマースサイトでは数多くの写真を使うが、それだけでは詳細が分かりづらいということは多々ある。そのため、各部を拡大した画像をリストアップして対応しているサイトもあるだろう。だが、それはユーザが本当に希望する場所とは限らない。 バイクの画像（左）とその拡大画像（右） そこで画像の拡大をユーザに任せてしまうのはどうだろう。サイト側は極力大きな画像を用意するだけで良い。 今回紹介するフリーウェアはMagic Zoom、JavaScriptによる画像拡大ライブラリだ。個人の非商用利用に限り無料なのでご注意をいただきたい。 Magic Zoomは画像の上にマウスを乗せると、右側に拡大された画像を表示してくれる。マウスを動かせば、拡大される場所も変更される。複数画像を切り替える機能もあり、例えば色違いやパターンが違う商品の表示に使える。 複数の画像を切り替える機能も便利だ
miniturbo.org - Safari 3.1のWebインスペクタが便利
昨日、Safari 3.1がリリースされたようです。 「パブリックベータ」もいつのまにかなくなり、メニューなども日本語表示となりました！ で、早速使ってみたのですが、「開発」メニューにあるWebインスペクタが便利すぎてたまりません。 こんな感じで、ドキュメントをDOMツリーで展開しながら、要素の詳細を見たり、 こんな感じで、コンソールから直接JavaScriptを実行できたりします。 ちなみに、Firebugと同じくconsole.log関数などが使えるみたいです。 Selectors APIも動くみたい。これ便利すぎる。 ファイルのやりとりをグラフィカルに表示。とてもキレイでいいですね。 ファイルの種類によって色分けがされていて、とても見やすいです。 まるでSafari版Firebugですね。みなさんもぜひ使って見てください！
MOONGIFT: » JavaScriptだけで画像イフェクト「Bevel.js」:オープンソースを毎日紹介
サイトの画像を角丸にしたり、影をつけたりするのは良くあることだ。単なる画像も、多少の変化をつけるだけで見栄えがずいぶん変わってくる。だが、一つの一つの画像にそうした変化をつけるのは面倒で、徐々にやらなくなってしまう。 そこで自動化を考えたい。とは言ってもサーバサイドではない。クライアントサイドで行うのだ。 今回紹介するフリーウェアはBevel.js、JavaScriptで画像にイフェクトを行うライブラリだ。元々Public Domainだったが、変わったようで、非営利の個人利用に限りフリーとなっている。 Bevel.jsを使うと、画像の角を丸くしたり、そこにさらに影を付けたりと言ったイフェクトをJavaScriptのみでできるようになる。ふちを暗くしたり、別な色にすることも可能だ。まるで画像編集したかのようだ。 対応しているブラウザはFirefox 1.5以上、Opera 9以上、IE 6
Movable Typeにフォームをドラッグ＆ドロップでデザインして簡単に追加できるプラグイン「A-Form」
Movable Typeに自由度の高いフォームを簡単に複数設置することができ、なおかつフォーム作成はドラッグ＆ドロップによる直感的なレイアウトが可能なので、カスタマイズの専門的な知識は不要。また、控えメール送信機能や、受付データをCSVファイルでダウンロードする機能もあり、さらにはアクセス数やエラーログのアクセスレポート機能、そしてフォームの稼動状態を定期的にチェックして管理者にメール通知する死活監視機能までが付いているというかなり高機能なフォーム作成プラグインがこの「A-Form」です。 詳細は以下から。 A-Form：MovableTypeにフォーム設置できるMTプラグイン｜Web制作のアークウェブ http://www.ark-web.jp/movabletype/ 以下からダウンロードできます。 A-Formダウンロードフォーム：MovableTypeにフォーム設置できるMTプラグ
MOONGIFT: » JavaScriptを使ってCSSを拡張「MoreCSS」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。 そしてこのソフトウェアはそれをさらに発展させてくれる。 今回紹介するオープンソース・ソフトウェアはMoreCSS、CSSを拡張するJavaScriptライブラリだ。 JavaScriptでCSSを拡張とはどういうことだろうか。例に出すと、例えばテキストボックスにデフォルトで「Search...」という文字を出したいとする。通常、JavaScriptを使ってonClickなどを定義すると思うが、MoreCSSを使えば「default-value:"Search …";」という定義をCSSに書いて、そのIDを当てはめるだけで良い。 他にも同じサーバ内の文字列を拾ってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超クールなタブインタフェースをjQueryで作成するチュートリアル:phpspot開発日誌
IDEA * IDEA
アンテナハウス「書けまっせ!!PDF Webサービス」を8月から開始 | NEWS | Macお宝鑑定団 blog（羅針盤）
楽してiPhone対応サイトを仕立てる方法 | ライフハッカー・ジャパン
ハイパフォーマンス Web サイト フロントエンドのパフォーマンスの重要性
http://kengo.preston-net.com/archives/003630.shtml
よく使われているCSSハック12選（＋おまけ） | IDEA*IDEA
