タグ

CSSとDesignに関するshozzyのブックマーク (30)

  • デフォルトスタイルの差異を無くすCSS

  • CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase

    Hint: due to my provider's problems this option was deactivated. Sorry for inconvenience. Aqua & Chrome by M.Samy Silva Orange, Blue by Daniel Constantin Blue & Red by V. Friedman Blue, Black, Pink by V. Friedman Make the world prettier! If you'd like to share your css navigation designs with other web-developers, use this template for creating the menus. Please make sure that your css-code valida

  • CodeWeb: [CSS]クロスブラウザな半透明フィルタ

    IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。 しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。(クロスブラウザってJavaScript以外でも呼んでよかったけ?) [Internet Explorer対応] 0~100の数字で制御します。0に近づくほど薄くなります。 MacIEだと確か動きません。 img{ filter: alpha(opacity=20); } [Mozilla / FireFox / Netscape 対応] 0~1の数字、または0~100%で制御します。0に近づくほど薄くなります。 こちらは最新版のMozilla FireFox Netscapeで動作します。 -moz-opa

  • 旧Windowsのメニューに似たリンク - CSS Dencitie

    今回は、XP以前のWindows、つまり2000、Me、98や95などのバージョンで見られるようなメニューに似たリンクを作る技法をご紹介いたします。完成図は、以下のようになります。 例によって、サンプルだけ欲しい人は、リンク先のソースをテイクアウトして、お帰りはこちら~(どこ) 作ってみよう まず、HTMLソースから書いてみましょう。キーボードからの入力なので、それっぽいkbdのタグを使います。番では、アクセスキーの指定は忘れないように! <div id="x"> <a href="">ファイル(<kbd>F</kbd>)</a> <a href="">編集(<kbd>E</kbd>)</a> <a href="">表示(<kbd>V</kbd>)</a> <a href="">ヘルプ(<kbd>H</kbd>)</a> </div> これでは、改行が余白になってしまって空きすぎますので

  • スタイルシート例文辞典

    Last Update:2011/10/1 PM 4:57 このページはスタイルシートの用例を載せています。このページはCSS3例文辞典に移行しましたのでメンテナンス等は行われません。→CSS3例文辞典へ 現時点で ・Internet Explorer 3.x, 4.x ・CSS Version に関しては未チェックですので信用しないでください。 このページに目的のものがない場合はJavaScript例文辞典、ホームページ例文辞典の方も参照してみてください。 HTMLタグリファレンス、スタイルシートリファレンスも用意してありますので、ご利用ください。 ■基/定義 [01]スタイルシートのコメント [02]スタイルシートの設定(<style>タグの場合) [03]スタイルシートの設定(style属性の場合) [04]スタイルシートの設定(別ファイルを読み込む場合<link>) [05]スタ

  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

  • Collection & Copy - 画像 CSSを使った角丸

    画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.

  • スタイルシート生成ページ

    サイドメニューの折りたたみ(v4.0) └ test1 07/03 └ test2 08/11 └ test3 09/25 Firefox・Netscapeで連続した半角文字を折り返す └ test1 09/27 └ test2 09/27 └ test3 09/27 このページで公開テンプレートのスタイルシート(styles-site.css)の配色を変更することができます。 下記のフォームのそれぞれの項目について配色(RGB値または色の名前)を設定し、「配色を確認する」をクリックと、このページの配色が指定したスタイルに変わります。 配色が決まったら「CSSを生成する」をクリックしてください。設定が反映されたスタイルシートが下のテキストエリアに生成されます。 「設定を全て戻す」をクリックするとデフォルトの設定状態に戻ります。 カラム横の背景 *固定カラム/1カラムのみ有効 背景 *エント

    shozzy
    shozzy 2005/09/30
    CSSによる配色をその場で確認できる
  • CSSの謎