HTML5用のリセットCSS（正式版？） - IT-Walker on hatena
今年も明けましておめでとうございます。 白石です。 正月明けからイッパイイッパイです。 で、いきなり本題。 HTML5用のリセットCSS（どのブラウザでもデフォルトの見た目が同じになるよう、強制的に表示を調整するCSS）と言えば、昔HTML5Doctorで紹介されたやつが有名です。Google Codeでプロジェクトがホスティングされてもいます。 でもこのCSS、ちょっと悩ましいことに中途半端なんですよね。例えば、HTML5ではあらゆる要素にhidden属性を指定することができるのですが、「hidden属性のついた要素は非表示にする」と言ったスタイル指定が行われていなかったり。 で、完全なものはないのかというと、あります。それも仕様書の中に。これは、HTML5仕様が正式に「提案」しているものです。 でもどう見てもHTML5DoctorのCSSのほうが有名ですよね。 で、みんながその中途半端
%26utm_content%3DGoogle%252520International)
【CSS】IE6では実現できない点線（1px borderのdotted）を画像を使って表現する | バシャログ。
こんにちは。 カップ焼きそばの湯切りのタイミングは、表示時間の30秒前が一番おいしいと考えているishidaです。最近のおすすめは、「ピザーラ焼そば ニュースパイシーイタリアーナ風」でございます。 さてさて、IE6ではborderプロパティに「1pxのdotted」を指定しても点線ではなく以下のように破線が適用されてしまいます。 今回は、IE6でも1pxの点線を実装する小技の紹介です。 画像を使って点線を実装する場合 まず、以下のような幅2px 高さ1pxの透過 GIF 画像（bg_dotted_01.gif）を作成します。 格子模様になっている箇所が透過部分となります。 この画像を背景画像として読み込ませ、横方向に繰り返し指定をします。 以下がそのサンプルです。 サンプル 点線です。点線です。点線です。点線です。点線です。 ソースコード HTMLとCSSでの指定は以下のようになります。
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
norah'# : CSS でグラデーション
Firefox 用の拡張機能を公開するサイト兼駄文(目指せ!! 打倒 真鍋かをり)Trunk に -moz-linear-gradient が入ったので試してみた。-moz-linear-gradient というのは CSS でグラデーションを実現するもので、Chrome の Beta 版なんかでも使える -webkit-gradient と同じもの。 実際に使ったものが上のスクリーンショットなんだけど、片方はグラデーションした画像を貼り付けている物で、片方は CSS を使ってブラウザにレンダリングさせていて、画像と違ってブラウザがレンダリングするので多用すると動作が遅くなる場合もあるみたいだけど、今まで簡単なグラデーションのためにわざわざ画像を貼り付けているようなケース（例えば Mac 版のコンテキストメニューの選択表示とか)なら CSS で代用できるレベルだと思う。 ちなみにスクリ
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
『CSSだけで文字列を省略して「・・・」を付けて表示する方法』
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
[CSS]印刷用のスタイルシートがグッとよくなる、3つのポイント
既存の印刷用のスタイルシートや新規に作成する場合でも有用な、印刷用のスタイルシートの3つのTipsをLine25から紹介します。 Handy Tips for Creating a Print CSS Stylesheet 印刷時のテキストをデザインする 見出しやパラグラフ、リンクなどのテキスト箇所を印刷用にデザインします。 下記の例では、見出しを中央寄せにし、斜体にしています。 また、リンクのカラーをパラグラフと同じにし、下線を削除するのもよいでしょう（リンクのスタイルについては後述）。 <textarea name="code" class="css" cols="60" rows="5"> #header h1{ text-align: center; font-size: 42pt; font-style: italic; margin: 0; } #header h2{ text
Slot5000 yang mempersembahkan korban dari situs resmi.
Jika kamu ‘re mencari sebuah kasino online yang menerima beberapa metode, deposit dan penarikan slot5000 mungkin. satu untuk anda Slot5000, memiliki banyak manfaat termasuk bonus yang mulia dan telefon kompatibilitas. selamat datang Anda dapat bermain di real-time dari setiap perangkat, dan sesuai dengan turnamen dan aman adalah deposito yang besar ditambah.Selain itu, anda dapat menikmati pengala
CSS Layout - 100% height
CSS layout: 100% height with header and footer Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach. Min-height The #container element of this page has a min-h
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
@-moz-document - 徒委記
@-moz-document 書式 例 利用可能なブラウザ 参照 Mozilla / Firefoxでサイト別にCSSスタイルを適用することを可能とする@-moz-documentルールについて。 書式 W3CのMLに投稿された、per-site user stylesheet rulesより。 docrule ::= "@-moz-document" S+ url-list "{" S* ruleset* "}" url-list ::= url-item ( "," S* url-item )* url-item ::= ( "url(" | "url-prefix(" | "domain(" ) URL ")" S* S は空白類。( [ \t\r\n\f]+ ) domain() の場合、括弧内に入るのは、正確にはURLでなくホスト名(ドメイン名)になるようです。 例 以下のような
ORG(8)：サイト用テンプレート - AZ store
取扱説明書 XHTML 1.0 Transitional、div要素未使用のテンプレート。文書構造がシンプルです。ソースのダイエットをしたい方、サーチエンジンフレンドリーなサイトを作りたい方におすすめです。 WordPressのテーマのblog(3)と着せ替えができます。WordPressで使う場合はcss/style.cssをaz-store.cssにリネームしてテーマフォルダに入れてください。 サンプル スタイルシート ダウンロード テンプレートをダウンロード 配布開始 2008年8月28日 配布元：AZ store 戻る 案内 メインナビゲーション sample(1) sample(2) sample(1) sample(2) sample(3) sample(4)
CSS Sprites2 – It’s JavaScript Time
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that
RedLine Magazine : Firefox3とFirefox2のselectの幅
Firefox3とFirefox2のselectの幅 そんなこんなで共存することにしたFx3とFx2なんですが、さっそく共存させてよかったと思った事がありました。 今コーディング中のサイトでこういう見た目にしたいデザイン部分があったんですよ。単純にリストをfloatさせてselectを横並びにしたいーみたいな。 幅違うやん！って気づいた。 これ、Fx3とFx2でselectの幅、若干違うんですね。知らなかった。CSS関連のネタは見たけど部品の違いなんて気にもしてなかった・・・。上のできあがり見本の画像はサンプルだからアレなんですが、実際のデザインにはその部分にも背景画像が入ってて、セレクト周りの幅でうまくコントロールしないと背景からはみ出てアワワ・・・みたいな感じになっちゃってました。一瞬びっくりした。 >>一応確認用のサンプルはこちら 最初もしかしてフォーム周りのmarginだかpadd
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"ＭＳ Ｐゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
re:マルチシートアプローチとかクラス名とか
re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
HugeDomains.com
Captcha security check extype.com is for sale Please prove you're not a robot View Price Processing
東京下町WEBクリエイターのおぼえがきBlog
普段の業務ではがっつりコーディングすることが多い私です。 TOPページのトピックス部分を制作していたら、こんなトラブルに見舞われました。 [症状] liやdt・ddなどの、要素が複数縦ならびするページを制作時。 <img>の入った行だけ高さがずれる。 （IE6、IE7での検証時。Firefox2、safari3では問題なし） [修正方法] li { line-height: 1.8; layout-grid-line: 1.8; } layout-grid-line要素はIEのみに適用される行の高さを指定するスタイルで、 これにline-heightと同じ値を入れておけば、imgが入ってもズレません。 よく文頭・文末についている「New!」などのアイコンを入れるには便利だと思います。 line-heightを入れずにpaddingやmarginを設定する方法もありますが、それだと要素内が複
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Gift of Giving Advent Calendar - Market Blog
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
