CSSで変数を使えるようになるかも
去る4月8日に、「CSS Variables」という提案が公開されています。 これが現実になれば、CSSの中で変数を使うことができるようになります。 以下のような書き方が提案されています。 @variables { 変数名: 値; } セレクタ { プロパティ: var(変数名); } 例えば、以下のような書き方ができることになります。 @variables { contents_width: 500px; } #contents { width: var(contents_width); } 現状でも、スクリプト等でCSSを出力するようにすれば、実質的にCSS内で変数を使うことができます。 例えば、上と同じことをPHPで行うなら、以下のようにすることが考えられます。 <?php $contents_width = '500px;'; ?> #contents { width: <?php
heightの%指定で正しく100%のボックスを作成 - bnote
高さの割合を正しく求める場合、その高さの基になる高さが必要になります。 CSSの定義では、パーセントは、生成されたボックスの包含ブロックの高さに 関して計算されるとあります。また、heightの高さが指定されてない場合、 heightの初期値はautoとなります。 (参考: 仕様書(邦訳)) 包含関係のルート要素はUserAgentによって定める事になっているので、 htmlの高さを明示的に100%に指定します。次にbodyの高さを明示的に100%に指定します。 このようにすることによってbody以下の要素に対して高さを指定する基準を明示的に設定します。 CSSの例 *{ margin:0; padding:0; } html{ height:100%; } body{ height:100%; margin:0 30px 0 30px; } #container{ height:100%
Stu Nicholls | CSS PLAY | Professional dropline / dropdown / flyout menu
CSS MENUS › Pro dropline / dropdown / flyout hybrid menu Date : 12th February 2008 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information A further stage in the development of the hybrid dropline / dropwn menu, this adds the extra flyout stage to the dropdown. The flyout can be positioned to the left or the right of the dropdown and continu
[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス
2007年春現在よく使用している、ブラウザがもつスタイルを初期化するスタイルシート「全称セレクタとhtml, body編」です。 CSSのスタイルの初期化が必要な理由 スタイルの初期化 -全称セレクタ（*） スタイルの初期化 -html, body スタイルの初期化 -全称セレクタとhtml, body のメモ スタイルの初期化(後編) -body内の個別タグ編 CSSのスタイルの初期化が必要な理由 HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。 そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。 対象としているブラウザは、最近の僕の受注案件の多くは下記のブラウザが対象にな
![[CSS]スタイルの初期化(前編) -全称セレクタとhtml, body編 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/87951b54617664ea9d0be8bc891f9f6a0842b4fa/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
CSS メニュー横並びボタン - 3ping.org
2007-01/20更新しました。 ソースコードを見直してボタン化の方法を変えました。基本CSSボタンメニューと同じ方法で、floatとfloatによるクリアの問題を解決するためのコードも含めました。これにより、コピペで問題なく使えるようになりました。 変更点は以下の通りです。 floatをクリアするコードも含めた。ページ下部にはMacIEに対応する場合の追加コードも記述 a要素にwidthを指定していたのを、親要素に変更。これにより、a要素には左右にpaddingが指定できるようになった。 HTML側でulとliのセットのみでボタン化できるようにした。 プロパティの記述順序を変更 <ul id="globalNavi"> <li><a href="./">List1</a></li> <li><a href="./">List2</a></li> <li><a href="./">Lis
Jon Tan: Design, code, and prose
Hello. I’m Jon, a chief designer who leads teams that make durable, inclusive, and aesthetic products for screens, hands, and paper. I’ve helped organisations of all sizes, from start-ups to behemoths like the BBC and National Geographic. My work and prose has featured in publications such as I Love Typography, Typographica, TYPE magazine, .Net magazine, 24 Ways, 8 Faces, CSS Zen Garden, a
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でフォントサイズを変更すると 隙間
bmblog: IEでmin-heightらしきことをする
Top Page: メイン Previous Page: 進化論の挑戦 Next Page: 地上ã¯åœ°ä¸Šã€åœ°ä¸‹ã¯åœ°ä¸‹ May 23, 2007 Category: web Tags: css , internetexplorer , min-height IEでmin-heightらしきことをする CSSのお話。 IEはmin-heightに対応してないのでhackが必要。 under score hackとボックスのheightを指定しても内側のコンテンツがそれより長かったら指定したheight以上に伸びてしまうbugを利用 <style type="text/css"> .no_hack{ margin: 8px; background-color: #CDC; min-height:40px; } </style> <div class=
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
Using the Hiragino font with CSS
Testing the Apple Hiragino font Dealing with Apple's Hiragino font-family, and various browsers available for OS X. The key is using the correct font-names for the various browsers. Firefox (upto Fx2.0.0.x), IE Mac and Opera will understand the font–family only if the (Japanese) QuickDraw name is used. Safari and Omniweb (and other applications or browsers using the WebCore rendering engine) need
CSS Text Wrapper
The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
名古屋、岐阜でのホームページ制作 niwadesign(ニワデザイン) » Blog Archive » CSS Firefoxのリンクの線を消す方法
[CSS]チェックしておきたい50のCSSのテクニック | コリス
画像の保存を禁止する 〜CSSテクニック〜
navigation
CSS Spriteを活用しよう - DesignWalker
ちょっと便利なCSS Tips いろいろ - DesignWalker
The Great Website Design Gallery Roundup by CSS-Tricks