CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
2008年4月24日 14:11 (X)HTMLCSS IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を
tikeda::Diary - 今更だけどAqua風デザイン分解
OSXアイコンやWidgetなんかでは定番となってるAqua風のデザイン。ちょっと遅い感じですが、今更ながらAqua風を突っ込んでみました。 Photoshopを使った簡単な作り方のTIPSなんかは時々目にしてたので、自分はIllustratorでやってみた。現物は以下のドロップと矢印です。 簡単なパスで作られたデータです。これだと印刷物なんかでも大丈夫。色々な応用も可能です。実際CMYKカラーで作りました。Photoshopでアルファやレイヤースタイルをいじらなくても、コツを見つければなんとなく作れます。拡大するとこういう感じ どちらも、単なる単体のシンプルなグラデーションで塗られたオブジェクトを３つ・４つ重ねているだけです。 今の所感じてるポイントとしては以下２つ 面をはっきり出すこと お互いのグラデーションの終わりと始まりがはっきりしていることで面がはっきりして「パリ」っとした硬い質
jQueryだけを使って右クリックを禁止する | チバのブログ
画像などを右クリックから保存することができないようにするjQueryのプラグインが右クリックなどの画像ダウンロードを防止するjQueryプラグインで紹介されていたので、自分も書いてみようと思う。 ブラウザの画面上で右クリックを禁止するためには、禁止したい画像などにoncontextmenu="return false;"と書けばよいのですが、全部の画像に書いているととても面倒なので、この部分をjQueyを使って実装してみるという方法。 ドラッグとか、画像のURL直うちで保存されたらもうどうしようもないですが、ある程度だったら防げるかなと思います。 bind()を使う 右クリックを禁止するためにjQueryのbind()という関数？を使います。 一番単純な例だとこんな感じ。 $(document).ready(function(){ $(document).bind("contextm
右クリック禁止の実装 - まさにゲーム感覚なデジタルネイティブblog
とりあえず集めた http://java.misty.ne.jp/click.html http://homepage2.nifty.com/BASH/WWW/JavaScript/java3.html http://www.red.oit-net.jp/tatsuya/java/event.htm http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_026.html http://5five.net/entry/-javascript.html http://blog.chibatch.jp/javascript/prohibition-contextmenu-jquery.html(jQuery) 実際に使用されている例 Mステブログ 掲示板 - http://wws.tv-asahi.co.jp/apps/free_bbs/mu
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
CSS - col要素に有効なプロパティ | Try | d-spica
tableの列を示すcol要素について，CSSのどんなプロパティがあてられるかのテストです。 Tried at 2007-06-10 まず，tableのマークアップは次の通り <table> <col class="col1" /> <col class="col2" /> <col class="col3" /> <col class="col4" /> <col class="col5" /> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> </tr> <tr> <td>data11</td> <td>data21</td> <td>data31</td> <td>data41</td> <td>data51</td> </tr> ...... </table>
Google、クロール＆インデックスのタイミングを指定できる「On-Demand Indexing」
米Googleは11月13日、サイト内検索サービスSite Searchに、新たな情報やページを迅速に検索結果に反映できる新機能「On-Demand Indexing」を追加した。無料版のCustom Search Engine（CSE）でも有料版のGoogle Site Searchでも利用できる。 サイトオーナーは、コンテンツを新規で追加したり更新したりした場合、コントロールパネルのIndexingタブにある「Index Now」ボタンを押すことで、新情報を検索結果に反映させることができる。通常数時間以内、遅くとも1日以内には、検索結果に反映されるようになるという。 On-Demand Indexingで指定できるページの数は、CSEが10ページまでで、Google Site Searchは契約料金により、年額100ドルの場合250ページまで。
「Google Chrome」の隠し機能とイースターエッグ - builder by ZDNet Japan
Googleのブラウザ「Google Chrome」のユーザーインターフェースは、可能なかぎり簡素化されている。しかし、Chromeは「Omnibox」を入り口として、更なる詳細を見ることができる。 Chromeのアドレスボックスにコマンドを打ち込んで、普段は隠されている詳細な情報や楽しいイースターエッグを呼び出すことができるのだ。 「Firefox」では、アドレスバーに「about:config」など「about:」で始まるコマンドを入力すれば、さまざまな細目を表示して微調整を行うことができる。Googleはそれに倣った。 これは多くの人にとってはどうでもいいことかもしれない。しかしプログラマーにとっては注目すべき機能であり、それはウェブページを作るプログラマーであっても、Chromeの基になっているオープンソースプロジェクトの「Chromium」で遊んでみたいというプログラマーであって
The CSS-Only Accordion Effect - CSS Reset
The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript. First off, what is an “accordion” effect? Gene
pre 要素のスタイル定義とマークアップ - 2xup
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
CSS の画像置換で画像にリンクを設定する
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。 このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 １．サンプル１ h1 の後方に img を置く場合は、CSSハックを使います（h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…）。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。 画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
今日のXHTML+CSS：IE6の後方互換モード対策: 世界中の１％の人々へ
「XHMLはXMLなんだからXML宣言をいれるべき」という文章を１ヶ月前に目にしてから、寝ても覚めても、この言葉が頭から離れなかった。 ところが、XML宣言をHTMLコードに入れると、IE6が後方互換モード(古いブラウザへの互換性を保とうとするモード)になりレイアウトが崩れる。 対策をあれこれ試していたが…、本日、ふとしたことで最後の課題が解決した。 ※マイクロソフトがいかに言い訳しようが、これはIEの致命的なバグだ。 ◆対応するためのポイント widthとpadding、borderを一緒に指定しない。ピクセル単位で合わせるところではborderを使わない。 通常、CSSファイルの先頭行にmargin: o; padding 0;と書くが、これが各IDでもきっちり継承されるので、位置を制御するクラスには、margin、padiingを手を抜かずに入れる。 上記で対応できない場合はIE6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moto-mono.net/2008/12/03/inline-block.html
Web ページを高速化する
Welcome to Dezinerfolio | Dezinerfolio
PSwish.com - all the photos you need, to get inspired!
HisasAnn.com is for sale | HugeDomains
アクセスアップ研究所:javascript - livedoor Blog（ブログ）