タグ

CSSに関するnariewのブックマーク (3)

  • グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」

    CSSレイアウト[TIPS] position : absoluteについて 「position : absolute」はpositionプロパティのなかの1つで、ボックス要素を絶対的な位置で配置する。 position:absoluteで指定されたボックスは、他の要素との関係は切り離され別物になる。親ボックス以外の他のボックス要素から影響を一切受けない。 position:absoluteには必ず「親」がいる。これが大事。 親にしたいボックスに「position:static」以外のposition指定をし(たいていはrelativeでOK)、そのなかに子を入れてposition:absolute指定をする。「top」「bottom」「left」「right」の値は、親ボックスからの距離。 親ボックスを指定しなければ「ブラウザウィンドウ」が親になる。 結論から言うと、親ボックスが「ブラウ

    nariew
    nariew 2009/08/14
  • ソースが公開されているcss小技11エントリーまとめ

    cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント ユーザービリティ(見易さ)を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとcssでテキストに影を付けるテクニック

    ソースが公開されているcss小技11エントリーまとめ
  • つくるぶガイドブログ: CSSボタンあれこれ

    こんにちは、HTML+CSS担当の小森です。 Webサービスは、ユーザにアクションしてもらってナンボ。ボタンは、押されてナンボ。 ということで今日のお題は、Webサービスには欠かせない、「ボタン」です。 ボタンのデザインを変えるのに一番ポピュラーなのは、いわゆる「イメージボタン(<input type="image" />)」を使用することですよね。 今回はイメージボタンではなく、たとえばこんなプレーンなinputボタンを、CSSの組み合わせでデザイン変更するところからはじめてみたいと思います。 CSSだけでデザイン変更 まずは、このシンプルなボタンのHTMLを用意します。「button」というclassをつけておきます。 <input type="submit" name="search" value="検索" class="button" / > 画像を使わず、CSSの背景とbor

  • 1