タグ

*web制作に関するjnzmのブックマーク (9)

  • ウノウラボ Unoh Labs: hasLayoutとは何か

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

    jnzm
    jnzm 2010/09/09
    hasLayout = trueの仕方
  • Designers Toolbox Web Safe Area

    Design tools for creative professionals. Print resources, online guides, legal forms, and much more.

    jnzm
    jnzm 2010/04/01
    ブラウザを全面にしたときの可能表示サイズ一覧
  • DummyImage.com

    by Russell Heimlich (@kingkool68) 600x400/000/fffSize / Background Color / Foreground Color . Format & Text DocumentationSizewidth x height Height is optional, if no height is specified the image will be a square. Example: https://dummyimage.com/300Must be the first option in the urlYou can specify one dimension and a ratio and dummyimage will calculate the right value. Example: https://dummyimage

    DummyImage.com
    jnzm
    jnzm 2010/02/23
    ダミー画像
  • [CSS]背景が透けるカラムを実装するスタイルシート | コリス

    Bits & Pixelsのエントリー「Cross-browser transparent columns」から、背景が透けるカラムを実装するスタイルシートを紹介します。 <textarea name="code" class="html" cols="60" rows="5"> null<div id="column-1" class="container"> <div class="overlay"></div> <div class="content"> <h2>Content</h2> </div> </div> </textarea>

    jnzm
    jnzm 2010/01/21
    半透明のbox(block)を載せる
  • IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org

    HTMLCSSJavascript、デザイン、絵を描いたり。 このページの先頭へ戻る

    IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org
    jnzm
    jnzm 2009/11/24
    自分のソースの場合、dtにmargin-right: -13em;だけで大丈夫だった
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    jnzm
    jnzm 2009/11/02
    リスト(li)の最初だけborderを消す、 img要素の横幅に左右されずに横並び、見出しとかマーカーが食いこまないようにする
  • これからゆっくり考L +α

    先日から提供が開始されたAdobe Creative CloudのCCシリーズ。 とりあえず色々インストールしてみました。 まだそんなにガッツリと使い込んではいないのですが、Photoshop CCでぐっときた機能をご紹介。 透過pngで書きだしたい画像に乗算やオーバーレイや焼きこみカラー...などなど、描画モードが「通常」以外のものが使われていること、ありますよね? 書きだしてから 「あれ...なんかデザインと違う...まさか...。あーやっぱり乗算だったー(泣」 っていうこと、ありますよね?(私だけですか...) 自分でちょちょいと修正できるときはいいんですけど、どう考えても無理な時とか、あまりに色々なところに乗算などを使われていると、 「次からはできればもうちょっと気をつけていただけるとありがたいです!」 と言いたい。 がしかし、なんで描画モード変更しちゃいけないの?と言われるとうま

    jnzm
    jnzm 2009/10/31
    携帯サイトをコーディングする場合のTipesなど
  • bookma! - 404

    リダイレクトします

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

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

    画像とかの横にあるテキストを上下中央に
    jnzm
    jnzm 2008/03/17
    ポイントはdisplay: table-cell;とvertical-align: middle;
  • 1