簡単にシンプルなスマフォサイトを構築できる「iUI」 | スマートフォンサイト制作会社ブログ
iUIとは？ iUIは、ページをiPhoneのUI(ユーザーインターフェース)のように表示させるJavaScriptで作られたライブラリです。 タグの組み合わせで、簡単にiPhoneのUIそっくりにページを表示することができます！ まずはダウンロード 現在のバージョンは0.31です。 http://code.google.com/p/iui/ ↑こちらからダウンロードできます。 解凍したらiUIを使用するフォルダに入れてjsファイルとcssファイルをlinkタグで読み込むだけです。 ※環境によってパスは変えてください。 サンプルコード <html> <head> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <
CSSデザインの実用的な管理画面テンプレート１０個:phpspot開発日誌
10 Free CSS and HTML Admin and Backend Templates :Speckyboy Design Magazine CSSデザインの実用的な管理画面テンプレート１０個がまとまっています。 管理画面も使いやすくしたい場合や商用プロダクトなので管理画面もカッコよくしたいというような場合に参考にできるかもしれません。 普通のテンプレートは多いのですがこうしたテンプレートはそれほど多くはないので助かりますね。 Internet Dreams Admin Skin INADMIN – HTML,CSS & jQuery Admin Panel Adminizio Lite – Admin Template Admin Template For Web Applications Spring Time – Simple Admin Template 全部見る 関連エ
【CSS】孫メニューまでオッケーなCSSのプルダウンメニュー | バシャログ。
以前にご紹介した「CSSで実現するプルダウンメニュー」のコメントで、孫メニューまでプルダウンする方法のリクエストをいただきましたので、ご紹介します。 確認ブラウザは IE7、IE8、Firefox3、Chrome2、Opera9、Safari3 です。 CSS のみでは IE6 対応が不可能ですが、前回同様 IE の独自機能（DHTML）を併用することで IE6 でも孫メニューまでのプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 バシャログ。 バシャログ.biz マニュアル制作 Document_blog ペンペケペン ローカライズ 今日のIT英語 検索エンジン Yahoo! Japan Google 画像検索 動画検索 マップ ニュース グループ Goo excite Biglobe 週刊少年漫画 少年ジャンプ
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
セクシーなドロップダウンメニュー実装サンプル:phpspot開発日誌
Sexy Drop Down Menu w/ jQuery & CSS | Noupe セクシーなドロップダウンメニュー実装サンプル。 次のような、セクシーかどうかはさておき、クールなメニューのサンプルが公開されています。 CSSで綺麗にレイアウトして、jQueryで実装したものです。 マウスオーバーで光る高級感がナイス 矢印↓ボタンを押した時にちゃんと凹むのもいい感じ。 タグ構造も結構綺麗に定義できてレガシーなブラウザ（ＩＥ６）にも対応しているっぽいのでなかなかオススメです。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
リストをデザインするためのCSSプラクティス20+ – creamu
devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS CSSでデザインしたカレンダー。↑のキャプチャはこちら » Simulating a Table Using an Unordered List ul,liでテーブルレイアウトを作る » How to Create a Block Hover Effect for a List of Links リンクのリストにブロックのhoverエフェクトをつける » Turning a list into a navigation bar リストをナビゲーションバーに » FORM elements design using CSS and list (ul and dl) ulとdlを使ってフォームを作成 » Pr
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
第5回 横並びメニューの区切り線をCSSで表現しよう：実践Web Standards Designのススメ｜gihyo.jp … 技術評論社
はじめまして、福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1 画像を使った横並びのナビゲーション（gihyo.jp） gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] 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)
CSSで色指定が可能な立体的でクールなボタン実装サンプル:phpspot開発日誌
Liquid & Color Adjustable CSS Buttons - CSS/XHTML/Photoshop Tutorial When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop.CSSで色指定が可能な立体的でクールなボタン実装サンプル。 次のようなクールなボタンが作れます。background-color の指定でボタンの色が変えられるのでなかなか良いです。 だめかと思われたIE6でも動作してます。 追記） CSSのみでIE6.0対応しているわけでなく、一部ＪａｖａＳｃｒｉｐｔを使用しているみたい。 ご連絡いただきましてありがとうございました。 関連エントリ CSSでクールなボタンを作るまとめ
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
[CSS]複数のカラムのパネルを表示するドロップダウン型ナビーションのスタイルシート
[CSS]要素をボタン風にスタイリングするスタイルシートのテクニック集
Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌
綺麗で立体感のあるサイトメニュー素材:phpspot開発日誌