Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

タグ

CSSに関するTadakiのブックマーク (141)

  • CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用 - builder by ZDNet Japan

    今回から、CSS 3の草案「Selectors」で新しく追加されたセレクタについて紹介していきたい。これまでCSS 3のセレクタに十分に対応しているのはOperaだけだったが、FirefoxがFirefox 3.1(ベータ版)で、SafariもSafari 3.1で対応を進めたことにより、Internet Explorerを除く主要なブラウザで利用できるようになった。 今回は、「:first-child」と「:last-child」、「:nth-child()」と「:nth-last-child()」を紹介する。これらのセレクタを利用すると、最初と最後の要素や、指定したナンバーの要素、さらには奇数と偶数の要素に対してスタイルシートを適用することができる。そのため、これまでのように余計な やクラス名を追加することなく、さまざまなデザインを設定できるようになる。 たとえば、こうしたセレクタを利

    CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用 - builder by ZDNet Japan
  • @マークで始まる文

    @ルールとは、@キーワード(@charset @importなど)から次に出現するセミコロン[;]あるいは、ブロック({...})終端子"}"までを指します。 /* @ルール */ @import "foo.css";    /* セミコロン[;]まで */ @media print { body {font-size:10pt} }                     /* ブロック終端子"}"まで */

  • [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 | ヨモツネット

    概要 商品写真と説明文のリストなどのためのスタイルです。 1行ごとに div などでくくる必要がなく、自然なマークアップを行うことができ、運用時にもアイテムの挿入、削除が容易に行えて便利です。 動作確認用の demo float プロパティを使って横に並べる場合は、高さが違うアイテムがあると変な風に回り込んでしまうため、1行ごとに div などでくくる必要がありました。 inline-block を使えばそれを解決することができます。 inline-block は幅、高さといった、block のような性質と、行の中で並べることができたり、vertical-align を設定できたりといった inline のような性質を併せ持っています。 このサンプルはこの性質を利用しています。 inline-block は Opera, Safariで既に利用でき、Firefox 3 からも利用することが

  • [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>

  • MOONGIFT: >> RoR用。CSSでグラフを描く「CSS Graphs Helper for Ruby on Rails」:オープンソースを毎日紹介

    最近はWebアプリケーションを構築しようと思うとRuby on Railsを使うようになっている。慣れれば慣れる程開発の効率が良くなり、さらに便利なものになっていく。 そんなRailsの魅力をさらに増してくれるのが数多いプラグインの存在だ。その中から一つ、グラフ作成のプラグインを紹介しよう。 今回紹介するオープンソース・ソフトウェアはCSS Graphs Helper for Ruby on RailsCSSを使ってグラフを作成するRailsプラグインだ。 CSS Graphs Helper for Ruby on RailsはインストールはRailsのプラグインコマンドからでき、さらに設定らしい設定もせずに利用できるのが魅力だ。 描けるグラフは三種類だ。縦型の棒グラフ、横型の棒グラフ、そして複合型だ。どれも手軽に利用でき、Webアプリケーションをさらに魅力的なものにしてくれるだろう。

    MOONGIFT: >> RoR用。CSSでグラフを描く「CSS Graphs Helper for Ruby on Rails」:オープンソースを毎日紹介
  • [CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス

    Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel

  • CSS擬似クラスを使うべき理由 | エンタープライズ | マイコミジャーナル

    A List Apart - For People Who Make Websites HTMLCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント

    Tadaki
    Tadaki 2008/02/08
    前半のは当たり前。後半のは知らなかったし、いつも困ってた。しかしこういう補完jsを使うのも避けたいなー。
  • CSSレイアウト時のよくやる失敗と対処法|WEB制作(html,css(スタイルシート) )|プログラムメモ

    ■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する(top 又は bottom) ■ <td>内のフォントが正しく指定したとおりでない(Win IE Mac IE) →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間

  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
  • hover時の背景画像ちらつきに対処する - Archiva

    Make a note of it: Web tech, montaineering, and so on. ナビゲーション等で画像を切り替えたい場合、CSSを用いて a:hover の背景画像をずらしたり消したりして実現する方法が良く取られます。この時、Internet Exploler 6 において背景画像のちらつき(砂時計のアイコン表示)や動作の遅延が発生する(ローカルでは確認しにくいので、注意)。サンプルは以下。 »IE6 background flickr この問題はIE6固有の問題であり、他のモダンブラウザやIE5等では発現しない。背景画像のキャッシュに関わる問題。hover時のbackgroundに変更を加えると再読込が起こるようです。したがって転送速度やファイルサイズによって程度が変わる。ブラウザの設定によっても回避できるみたいですが、Web屋としてそこはスルーしたい。解決

  • IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル

    Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動

    Tadaki
    Tadaki 2008/01/09
    軽く使えるのなら便利っぽいが、以外に冷静なコメントが多い。IE8の時につかえそう。
  • [CSS]気をつけたいIE 7のバグ -CSS-Discuss

    CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意: バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例: body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small

    [CSS]気をつけたいIE 7のバグ -CSS-Discuss
  • [CSS]高さの異なるカラムを揃えるスタイルシート | コリス

    Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

  • flashを設置した際に出来る、下辺の余白

    ここ最近エントリーさぼり過ぎてたんで、ちょいネタでも上げていこうっていうスタンスで。 発生条件がイマイチわかってないんですけど、フラッシュを設置した際に、下にpaddingっぽい余白っていうか隙間っていうかが5px~10pxほど空くことがありませんか。IE以外のブラウザで。 こんな風に↓ 図みたく、分かりやすい枠線が有ると露骨に気づくわけですが。 で、まぁコレは画像でも発生するベースラインのアレと同じなんで、解決方法は以下のように。 object, embed { vertical-align: top; } 値は、bottomでもダイジョブです。 embed に指定が無いと、Firefoxで余白が発生して、object に指定が無いとSafariで発生するんで、どちらも指定すると良さげです。

    flashを設置した際に出来る、下辺の余白
  • CSS レイアウト切り替えスイッチ | WWW WATCH

    Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら (zip ファイル / 10KB) デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択

    CSS レイアウト切り替えスイッチ | WWW WATCH
  • TableとCSSいろいろ - DesignWalker

    TableとCSSいろいろ - DesignWalker
  • IEで固定座標を指定する方法

    さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。 まず、1.CSSのみの方法から 1.基的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。 html { overflow: hidden; } body { height: 100%; overflow: auto; } 次に、固定表示したいDIVタグ(タグは何でも良い

  • 3カラムサンプル18種

    題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S

    3カラムサンプル18種
  • Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消

    中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね? すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。 html { overflow-y:scroll; } 簡単っすね。 で、コレOperaじゃ解決出来ないのが難点。 overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。 height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。 んーこの辺まで解決したかった... Track Back [1] スクロールバーを表示

    Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消