Why “variables” in CSS are harmful
Why “variables” in CSS are harmful – an essay Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added. Introduction There are certain kinds of extensions to CSS that people have r
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、ダウンロード可能なフォントです。(大概インストールされているが、必ずではない) macOS Tahoe 2
IE6のCSSバグを視覚的にチェック
IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container { width:100px; position:relative; } div1 { width:50px; } .d
IE6でmin-width,max-widthを実装する：CSS | Tech de Go
漬物は料理において重要なアクセントを提供します。 その酸味が、食事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、食べ手の口の中をさっぱりとさせるだけでなく、食欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、食事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の食材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、食事の一部としてその重要性を増
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
CSS Generator（CSS自動生成ツール）
思い通りのスタイルを実現するCSSジェネレーター 従来からWEB上でCSSを生成するツールはありますが、その多くは入力する項目がたくさんあって面倒だったり、必要のないCSSまで一度に設定する必要がありました。 CSS Generatorはちょっとマニアックだけど自由度の高いCSS自動生成ツール。 あらかじめ必要なCSSを選んでから、そのCSSにあったカスタマイズ項目（入力補助機能付き）が現れるため、非常に効率よくCSSを設定できます。 CSSをある程度理解されている方、CSSを効率よく作成する必要のある方、CSSにどっぷり浸かったWEB業界の方向けのツールとなります。 特徴 『CSS Generator』は以下のような特徴を持っています。 約60種のセレクタから自由に選択。組み合わせは無限大。 必要なCSSセレクタ（スタイル）を選び、それにあった入力フォームが生成されるため、効率よくCSS
David Baron's weblog: Some new CSS features in Firefox 3
Our developer documentation already has a list of the new CSS features in Firefox 3. I'd like to talk in some more detail about some of the more interesting or useful ones. inline-block and inline-table We now support the inline-block (CSS 2.1) and inline-table (CSS 2.0) values of the display property. These values map to formatting objects that are like blocks or tables on the inside, but partici
CSS Variables
This version: http://disruptive-innovations.com/zoo/cssvariables/cssvariables-20080408.html Latest version: http://disruptive-innovations.com/zoo/cssvariables/ Revision: Revision: 1.0 Authors: Daniel Glazman (Disruptive Innovations) David Hyatt (Apple, Inc.) Copyright © 2008 Apple, Inc. and Disruptive Innovations. Abstract Since the release of CSS Level 2 Recommendation ten years ago in may 1998,
Dreamweaver用拡張機能でCSSプロパティを並べ替える | かたつむりくんのWWW
昨日、Adobe Dreamweaver CS3 10 周年記念 イベント - 夢を紡ぐ者たちへ -に参加してきました（レポートのエントリーを後日掲載します）。 そこで紹介されたTipsやCS4に関する最新情報は、どれも興味深く、自分にとっては役立つ情報ばかりでしたが、その中ですぐに試せて、かつ大変便利そうで、さらに自分が今までずっと欲しかった機能があったので紹介します。 それは、Dreamweaverの拡張機能を使って、CSSプロパティの記述順序を自動的に並べ替えることができる、というものです。 以前の「CSSプロパティの指定順序」というエントリーでも書いたとおり、これまでは「自分が作ったプロパティの指定順序と、Dreamweaverの「CSSルール定義ダイアログボックス」からはき出されるコードのプロパティの指定順序が全く違う」ということに非常に不便を感じていました。今回の拡張機能は、そ
JavaScriptでCSSを動的切り替え
JavaScriptでCSSを動的切り替え 2005-03-24-3 [Programming] 「JavaScriptによるCSSの動的切替」のすぐ設置できる簡単なサンプル。 多分説明不要。 <link id="basicStyle" rel="stylesheet" href ="diary.css" type="text/css" /> [...] </head><body> [...] Change CSS <input type="button" value="diary.css" onclick="document.getElementById('basicStyle').href=this.value"> <input type="button" value="debug.css" onclick="document.getElementById('basicStyle').
なごみ佑 Text Works
Home About アクセス解析『Lunalys 5.0.0』リリース！ 【アクセス解析 Lunalys 特設サイト】 というわけで過去最大級のアップデート。 例によってログデータのフォーマットを変えたので、 念のためバックアップを取ってからアップデートしてください。 ログデータは古いフォーマットから新しいフォーマットへ 自動で変換されますが、万が一失敗してどうにもならなくなった場合は 「data」フォルダの「～.sqlite」ファイルを全削除して 最初からやり直せばいけると思います。 あとログイン時のIDとPWの暗号化部分を変更したので 再入力が発生すると思います。お手数ですがよろしくお願いします。 PHP8.4で非推奨になった機能の置き換えです。 あと紹介記事をnoteに書いたのでご覧頂けると幸いです。 『Lunalys 5.0.0』の新機能を紹介！（note） 環境解析に分布グラフ
JavaScriptを使ったCSSの切り替え
JavaScriptを使ったCSSの切り替えのテクニックは結構有名なのですが、この前読んだJeffrey Zeldmanの著書に、フリーで配布されているCSSの切り替えスクリプトがあったので紹介します。転載の転載という奴でアレですが。 A List Apartというサイト（英語ですよ）のhttp://www.alistapart.com/articles/alternate/のページで配布されております。 一番下の近くに"Download styleswitcher.js"という項目があるので、それをクリックしてダウンロードしてください。 設置方法 使い方は、ものすごく簡単で、head部分に、 <head> <link rel="stylesheet" type="text/css" href="style1.css" title="standard" /> </head> という感じ
CSS-SSV // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with UpdateCheck out CSS Server-side Constants for an improved, “more-better” stab at the same idea. A few of the comments on Andy Budd’s most recent article got me thinking again about variables in CSS. Remember Jeff Croft’s first stab at the idea? His approach didn’t sit well with me for one reason: it
CSS の値に変数を使用する - lucky bag
例えば、サイトに使用しているカラーとかが決まっていたとして、CSS で色を要素等に指定していくわけだけど、指定する値に変数が使えれば便利じゃね？ってのを実現したのが CSS-SSV 。 CSS-SSV // ShaunInman.com 上記サイトより css-ssv.php をダウンロードして、CSS ファイルを置いてあるディレクトリにアップ。.css の拡張子でも php と認識させられるように .htaccess で下記のように設定。 AddType application/x-httpd-php .css php_value auto_prepend_file /CSS ファイルを置いてあるディレクトリへのローカルパス/css-ssv.php 準備はこれで完了。変数を定義するには下記のような感じにする。 @server variables { BaseColor: #86B933;
CSS Message Boxes for different message types : Janko Jovanovic
Can you believe this: Few days ago I went to my bank to check my credit score with the Credit Bureau. The bank official typed in my personal data and sent a request. Web application responded by displaying a yellow message box with an exclamation icon saying that data processing is still in progress. He checked several more times, but he didn't notice that at one moment the message changed to "Acc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.xml.vc/html/block-inline.html
HTMLタグボード - HTMLタグ一覧、CSSリファレンスなど
Style links in Flash with CSS | technology | nuff-respec.com
CSSによる段組（マルチカラム）レイアウト講座
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ