jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。
テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する jQuery のプラグインをご紹介します。 jquery.fieldtab.js 導入はとても簡単です。 まずは上記のサイトから「jquery.fieldtag.js」をダウンロード。 次に HTML の head 内に以下のコードを。#hoge のところは適用したいテキストフィールドの id を入れます。 <script type="text/javascript" src="jquery.fieldtag.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("#hoge").fieldtag(); }); /* ]]> */ </s
![[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
【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で色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
![[使える 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)
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
