InfoGrid
Superman View Image Super Power Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Costume Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
WordPressのコーディングテクニック10 – creamu
Smashing Magazineで、WordPressのコーディングテクニックが紹介されています。 これは自分的にもタイムリー。ざっとご紹介しますね。 エントリーごとのスタイルを変える post_class()を使って、「.henry」「.sticky」「.category-tutorials」「.tag-wordpress」といったクラスにCSSを指定できるようにする。post IDでは例えば「#post-876{} 」にCSSを適用できる 関連するエントリーをサムネイル付きで表示する PHPの画像リサイズスクリプトであるTimbThumbを使って、画像を40 x 40pxにリサイズ トップページの見せ方を変える 新着3件のエントリーを、他と違ったデザインで見せるテクニック 複数のループを使う WPの標準機能である「rewind_posts()」を使って、1番目のループをリセットし、2
【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="#">
Using Opacity to Show Focus with jQuery Example
When you hover over an image below, every image except the one you are hovering over will fade out. Example 1: Images
HTMLとJavascriptによるドロップダウンメニューの作り方│Web制作の現場から 〜入院、退院、そしてつまはじき〜
まず、HTMLはulの入れ子でつくります。 サンプルでは4階層目まで作成しました。 <ul id="menu"> <li> <a href="#">メニューですよ</a> <ul> <li><a href="#">メニュー2階層目ですよ</a></li> <li><a href="#">メニュー2階層目ですよ</a></li> <li><a href="#">メニュー2階層目ですよ</a> <ul> <li><a href="#">メニュー3階層目</a> <ul> <li><a href="#">メニュー4階層目</a></li> <li><a href="#">メニュー4階層目</a></li> </ul> </li> <li><a href="#">メニュー3階層目</a></li> <li><a href="#">メニュー3階層目</a></li> <li><a href="#">
[CSS]HTML 5用のブラウザのスタイルをリセットするスタイルシート
HTML 5用のブラウザのスタイルをリセットするスタイルシートをHTML5 Doctorから紹介します。 <textarea name="code" class="css" cols="60" rows="5"> /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl,
[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応
[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート
New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。 仕組みはシンプルで、下記が最小の構成になります。 HTML マルチカラムの場合は、「id="main"」のdivに配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrap"> <div id="main" class="clearfix"> </d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ashikunep.org
[CSS]ドロップラインとドロップダウンを併用したナビゲーション
http://www.designwalker.com/2009/01/speedup.html
[CSS]ボタンやナビゲーションを実装するスタイルシートのチュートリアル集