タグ

cssとCSSに関するmisukeのブックマーク (54)

  • 画像とかの横にあるテキストを上下中央に

    ←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました! display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;

    画像とかの横にあるテキストを上下中央に
    misuke
    misuke 2008/03/17
  • Most used CSS tricks | StylizedWeb.com

    Ann Arbor Michigan Web Design AgencyYou have a split second to make a great first impression on your website See how 3.7 Designs can help you convert more prospects into leads, customers, and members through advanced design psychology and our exclusive Six Layers of Design™ process.

    misuke
    misuke 2008/03/14
  • 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 – creamu

    DiaryTechnology 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下にいくつかご紹介。 » Triadic Background Setting with CSS Silverbackのサイト。シンプルなCSSで3枚の背景画像を重ねて3D効果を出している。ドキュメントはないがソースコードを見るだけでとても刺激的 » Creative Use of PNG Transparency in Web Design We

    misuke
    misuke 2008/02/22
  • Eric's Archived Thoughts: Resetting Again

    I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking.  Here’s the result of that thinking. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul

    Eric's Archived Thoughts: Resetting Again
    misuke
    misuke 2008/02/09
  • hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ

    WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの

    hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ
    misuke
    misuke 2008/01/26
  • ウェブデザイン・ギャラリーサイトまとめ - DesignWalker

    ウェブデザイン・ギャラリーサイトまとめ - DesignWalker
  • デフォルトスタイルの差異を無くす CSS

    2007-01-30更新 Yahoo UI Fonts CSS使用時の各要素のフォントサイズを変更する際の注意点を追加しました。 defalut.cssちょっとだけ修正 2007-01-18 更新 記事の内容も古くなり、Yahoo Libraryなどがでて更に差異を減らすことが簡単になったことから、これを利用し、スタイルも簡潔にシンプルに記述しなおしましました。前よりも使いやすくなったはずです。前回配布していたものとの変更点は次のようになります。 定義グループにアウトライン番号を記述 ベーススタイルのデザインをシンプルに記述し直し 使用していたカラーを一部を除いてモノトーンに変更 Yahoo Library Fonts CSSを組み込み、各ブラウザで文字サイズが同一になるように修正 プロパティ記述順序をhail2u.netCSS2 Specificationでのプロパティの出現順序」に沿

    misuke
    misuke 2008/01/06
  • hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序

    少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt

    hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
    misuke
    misuke 2008/01/06
  • CSSのレイアウト作成に役立つ便利なリソースいろいろ

    最近のページやサイト作成に欠かすことのできない「CSS(カスケーディング・スタイル・シート)」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する

    CSSのレイアウト作成に役立つ便利なリソースいろいろ
    misuke
    misuke 2007/12/19
  • パイプ区切りナビゲーションバーをネガティブマージンで | Takazudo Clipping*

    パイプ区切りのテキストナビゲーションバーが、単純な構造でできた。これなら2行目以降の左や右端に無駄パイプが残らなくてよさげ。 サンプルHTML <div> <ul> <li>HTML</li> <li>Blog</li> <li>XHTML</li> <li>CSS</li> <li>Seminar</li> <li>Usablity</li> </ul> </div> div{ overflow:hidden; _height:0; /* holly hack for ie6 */ min-height:0; /* fix has layout bug for ie7 */ } ul{ margin:0 0 0 -11px; _height:0; /* clear float for ie6 */ min-height:0; /* clear float for ie7 */ } ul:

    misuke
    misuke 2007/11/27
  • Bridge Word

    This shop will be powered by Are you the store owner? Log in here

    misuke
    misuke 2007/10/15
  • font-size指定 | d-spica

    font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは,ブラウザとその設定によってまちまちです。でも,せめてデフォルトの状態では意図したレイアウト,フォントサイズで見てもらいたい,という願いもないわけではありません。font-sizeの指定をどうするか,ちょっと考えてみました。 font-sizeは%で font-sizeをpx,pt,inなどで絶対指定すると,Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem,ex,%で相対指定(基準になるものとの比率で指定)するのがよいとされています。 Win

    misuke
    misuke 2007/10/12
    ブラウザごとのフォントサイズの差違をなくす%指定
  • http://cssglobe.com/post.asp?id=903

    misuke
    misuke 2007/10/11
    サイトマップをツリー状に見せるjs
  • Floatutorial: Step by step CSS float tutorial

    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Some definitions Float basics Floats and "clear" Browser types Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Step 1 - Start with a paragraph

    misuke
    misuke 2007/10/05
  • ウノウラボ Unoh Labs: hasLayoutとは何か

    yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer(以下IE)で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです (上記のままではIE7に対応していませんが…)。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報(=要素の幅・高さなどに関する属性情報)を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo

    misuke
    misuke 2007/09/28
  • [brothercake] Dust-Me Selectors

    Dust-Me Selectors 4.1 is now available from the add-ons directory. Version 4.1 fixes the compatibility issues that arose in Firefox 22 (because several key classes were summarily removed, which broke the extension). Version 4.0 was never released, because of problems with the add-ons review process (bugs in the automated validator that incorrectly rejected the first build, then delays and mistakes

    misuke
    misuke 2007/08/03
    不要なセレクタを削除
  • http://www.s-cut.net/memo/archives/web/070523_fontSizeTable/

  • CSSデザインカタログ

    対応ブラウザは Windows:InternetExplorer6,InternetExplorer7,Firefox2,Opera9 Mac:Firefox2,Opera9,Safari2 ですが,ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7,Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上,分類コード(div011-hp,table010 など)を class名にしてありますが,実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合,既存

    misuke
    misuke 2007/06/16
  • ウノウラボ Unoh Labs: CSSをデバッグしよう

    こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。 ※以下の手順は、下記のサイトをパクッ・・・、じゃなくて、翻訳しつつ簡単にまとめたものです。 参考: http://www.subcide.com/tutorials/debuggingcss/ まず、問題あるって認めましょう。 見なかったフリをしたい気持ちはよくわかります、が。 人的ミスをつぶそう スペルをチェックしよう

    misuke
    misuke 2007/05/31
  • マージンの相殺について:CSS | Tech de Go

    misuke
    misuke 2007/05/23