CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
[CSS]シンプルなHTMLで画像ギャラリーを実装するスタイルシート
クリックで画像がかわる、軽快な画像ギャラリーを実装するスタイルシートをdevirtuosoから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <ul> <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li> <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li> <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li> <li><a href="#image4" id="t
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」
TOP > WebDesign > クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 WEBを制作されている方は日々工夫をこらしているCSS。多々あるブラウザ環境の中で、統一した見た目を保つ為に色々な努力を積み重ねている事かと思います。今日紹介するのはクロスブラウザのためのCSSのテクニックを紹介するエントリー「10 astonishing CSS hacks and techniques」を紹介したいと思います。 Cross browser inline block ツールチップやギャラリー表示、選択したテキストのカラーを変える等、様々なテクニックがソースコード付きで紹介されています。今日はその中からいくつか気になったテクニックを紹介したいと思います。 詳しくは以下 ■Cross browser mi
[CSS]IE8までのブラウザを対象としたCSS Hack/Filterのまとめサイト
Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。 Browser CSS Hack/Filter support Browser CSS Hack/Filter supportは、dithered.comのCSS Filterをバージョンアップしたもので、CSS Hack/Filterの対応を検証しているのは下記のブラウザになります。 ※バージョン表記は省略。 Internet Explorer (Windows)：4.0.1～8beta Internet Explorer (Mac OS)：4.0～5.2.3 Pocket Internet Explorer (PocketPC)：4.0.1～5.2 Gecko(Firef
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 | 100SHIKI
CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』 February 27th, 2009 Posted in その他 Write comment かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。 SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。 しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。 使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。 次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色
[CSS]フロートしたナビゲーションを中央に配置するスタイルシート
リスト要素をフロートさせて作成したナビゲーションをブラウザの中央に配置するスタイルシートをCSSplayから紹介します。 ナビゲーションのwidthは指定無しの成り行きです。 Centering Float Left Menus デモでは、CSSハックやinline-block, table/table-cellを使用せずに実装されています。 下記に、それをシンプルにしたデモをアップしました。 シンプルにしたデモ IE6/7/8beta2, Fx3, Op9.5, Safari3, Chrome1で正常に動作しました。IE5.5, Fx2はダメでした。 追記：その1 リストを内包するdivに「text-align:center;」をしたら、上記ブラウザ＋Fx2に対応できました。 なんで、きくのだろう、、、？ シンプルにしたデモ（Fx2対応） 追記：その2 「ふ」さんのコメントにより、Saf
モビットってどんな返済方法があるの？ | 現金が必要な時に一番便利なネットキャッシングで即日借入【ネポ】
カードローンって最近よく耳にするようになったのではないでしょうか。カードローンというのは消費者金融や銀行に申し込んでカードを発行してもらい、そのカードを使って提携のATMなどからお金を借りるというものです。金額は人によって決まっていますが、特に目的について制限されるわけではなく、1万円からなど比較的少額からの借り入れも出来るという便利な個人ローンなんです。 でもカードローンって本当にたくさん種類があります。各銀行でもそれぞれカードローンがありますし、消費者金融だってそれぞれの商品としてカードローンを取り扱っています。モビットもカードローンの1つですね。モビットは三井住友銀行系の会社ですので、三井住友銀行のATMからの借り入れ・返済であれば手数料無料になるんですよ。 実際お金を借りたら返さなければいけないのですが、モビットはどのような返済方法があるのでしょうか。返済方法は3つ！口座引き落とし
画像の下にテキストが回りこまないレイアウト | ヨモツネット
概要 画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。 さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。 また、画像がない場合でも画像分が詰められて表示されます。 これを応用すれば柔軟に対応できるコンポーネントをつくることができます。 動作確認用の demo 動作確認用の demo (左右逆版) 説明 display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えて
[CSS]画像に枠線やウォーターマーク、キャプションをつけるスタイルシート
TORRANCE WEB DESIGNのエントリーから、画像に枠線やウォーターマーク、キャプションをつけるスタイルシートを紹介します。
CSS本「The Art & Science of CSS」のPDFが2週間に限りダウンロード無料 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers SitePointにおいてCSS書籍「The Art & Science of CSS」の無料配布が実施されている。 The Art & Science Of CSSはCameron Adams氏、Jina Bolton氏、David Johnson氏、Steve Smith氏、Jonathan Snook氏らデザイナおよび開発者によるCSSデザイン書籍。全編カラーページでイノベーティブなデザインを簡単に作成できる。 The Art & Science Of CSSのPDFデータ閲覧例 注意してほしいのは、無料ダウンロードが提供されるのは2週間だけということだ。書籍の正規価格は39.95米ドルで、日本への配送を含めると50米ドルほどになる。無償P
[CSS]大きい画像を背景にする時のスタイルシートの３つの実装例 | コリス
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの３つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像（background image）の端と背景色（background color）に同じ色（#f8f7e5）を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
メディアクエリー
この文書「メディアクエリー」は、W3C の CSS ワーキンググループ による「Media Queries (W3C Working Draft 15 October 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、最終草案 (Last Call Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2009-04-23 公開日: 2008-10-17 翻訳者:
サイトタイプ別class名管理方法 | Takazudo Clipping*
PHP/CSS書いてて、最近思ったことと、自分CSSデザインパターン解説。class名のつけ方の続き的内容。 オブジェクト指向を勉強してるとこ 最近、XSLTでCMS作る！って思っていろいろPHP書いてます。それで、すっごいclassが増えまくってしまって、継承とかいうものがある！ということで使ってみたら、すっきり。ほほーこれは便利だ！と思いきや、またしてもごちゃごちゃ。どこをどうしたらいいのやら。どーしたもんかと思ってネットをうろうろ見てたら、どうやら、デザインパターンってのを覚えた方がよさそうだということに気づき、この本を買いました。 これがすごい良かったです。継承とかinterfaceとか、こういうためにあったんだ！というのを学びました。すべてをまだ理解できてないけど、大きいものには大きいものの作り方があるんだ！と。結果総作りなおしｗｗｗ CSSのデザインパターン？ そんでCSSの話
class名のつけ方 | Takazudo Clipping*
デカいサイトでのclass名のつけ方って、すごい難しいと思う。 だけど、CSSいじったりし始めたりした人は、その、すごい難しいってことに気付かないと思う。 別にCSSだけの話じゃなくて、プログラム書くときの関数名とか構造も同じだと思うんだけれど。 ベストなclass名のつけ方は、完全にサイトの構造を把握してないと無理だと思う。 そして、そのサイトに要素が追加されたときにも柔軟に対応できるルールを持ったclass名のネーミングルールが必要だ。 破綻が起きて、CSSが混沌になってしまわないように。 今自分がこれがイケテルーと思うのは、こんなかんじ。 まず、ページで使われる要素を、モジュール化する。 （みんなやっていることだとは思うが） このモジュールの中で使われるclass名は放っておくとして、この、モジュール単位のクラス名が超重要。具体的には、見出しとかリストとか、ナビのリス
直書きライクな、HTML+CSSコーディング。 | kimihiko Tech
直書きライクな、HTML+CSSコーディング。 【追記】これは、ネタです。 以下の内容は、良いHTML+CSSコーディングを推奨するものではありません。 こんなに反響があると思ってなかったので追記しておきます (´-ω-｀)ｺﾞﾒﾝﾅｻｲ CSSはHTMLから切り離して外部ファイルとして保管され、 その外部CSSファイルを修正すれば、HTMLファイルに触れずとも、 HTMLページの見た目を柔軟に変更できる、ということが 近年のHTMLページ制作におけるスタンダードになっています。 ですが、 私はHTML+CSSコーディングをする際に、 この外部CSSを作るのが非常に億劫でなりません。 idやclassなどのネーミングはもちろん、 どこに、どう設定を書くのか、などに非常に繊細な技術を要するからです。 かといって、styleを使って htmlに直書きするのも面倒だなと思っていました。 そこで
XHTML+CSSサイトデザイン : LINE Corporation ディレクターブログ
どうも、ユティです。 直接ディレクションには関係しないのかもしれませんが、ウェブトレンドと技術的な理解ということで、HTML マークアップについて書きたいと思います。あと、以前も書きましたが、自分が理解していないことを依頼しちゃダメですよね。自戒もこめて。 それと、超基本的なことをマークアップの人じゃない人が書いてますので、その辺りご理解ください。 【01】HTML ご存知とは思いますが、ウェブページというものは、基本的にHTML（HyperText Markup Language）という言語で書かれたファイルを、ブラウザが読み込み、内容を解釈して表示しているわけです。で、そのファイルの中身と言うのは 例1.HTML記述例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict
[CSS]Hack無しで実装する、中央に配置するタブ型ナビゲーション | コリス
Matthew James Taylorのエントリーから、リスト要素でマークアップしたタブ型ナビゲーションを中央に配置するスタイルシートの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a></li> <li><a href="#" class="active">Tab two</a></li> <li><a href="#">Tab three</a></li> <li><a href="#">Tab four</a></li> </ul> </div> </textarea>
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"ＭＳ Ｐゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
