SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
村上龍「村上春樹がベストセラーを連発できるワケ」
2013年06月30日放送の「爆笑問題の日曜サンデー」にて、村上龍がゲスト出演していた。そこで、村上春樹がベストセラーを連発できるワケについて語られていた。 村上春樹作品のテーマ 爆笑問題・太田「村上春樹とは、デビュー当初から、比べられるというか、並び称されて」 村上龍「今はそんな会ってないですけど、前は仲良くて。海外で御飯食べたりしてたんですけどね」 爆笑問題・太田「仲良かったでしょ？」 村上龍「『お互いに違うタイプの作家だなぁ』って思ってたから、付き合えたんじゃないかなって思いますけどね」 爆笑問題・太田「(村上春樹の本は)現状、スゴイ売れるじゃないですか。あれ、読まれました？」 村上龍「最近のは読んでないですけど、海外で人気あるのは分かりますよ」 爆笑問題・太田「分かる？分かんないなぁ…」 村上龍「ふふ(笑)凄く一般的なことを、春樹さんは書いてるから」 爆笑問題・太田「一般的でしょ？
要素にフィルターを掛けたり、ソート出来るjQueryプラグイン・Isotope
たまたま見つけたjQueryプラグインの 動きが凄かったので反射的にご紹介。 このブログでも何度かご紹介している 要素にフィルターを掛けたり、ソートして くれる、というjQueryプラグインなのです が、なかなか高機能ですよ。ぜひ動きを 見ていただきたいです。 これ系はいくつかありますが、僕が知ってる中では一番良さそうです。 要素をフィルタリングしてくれたりソートしてくれますよ。アニメーションも豊富に用意されています。 触ってみる デモの一つを触ってみます。デフォルトではこのようにバラバラに元素記号が並んでいます。 フィルタをかけてみました。ふわっと要素がアニメーションしながら集まります。 複数の種類も。 フィルタにかけた要素を今度はソートします。上記はカテゴリで並べ替えた状態。 このようにレイアウトも変更できる。 サイズ変更なんかも。 と、いろいろ高機能なんですが、商用ライセンスは有料で
すぐに使えそうなネガティブマージン | d-spica
すぐに使えそうなネガティブマージン 2008-05-15 0 0 XHTML/CSS CSS, margin margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。 あまりむずかしくなく，すぐに使えそうなネガティブマージンを紹介してみましょう。 見出しにネガティブマージン 本文の左に見出しよりも大きな余白をとりたいというとき。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> </div> div.section { padding-left: 15px; } div.section h3
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
PHP で IE 6 の後方互換対策 - Heartfield
PHPでIE 6の後方互換対策 IEネタが続きますが、あまりに感動したので寝ずに書きます。IE6はCSSを自分勝手に解釈しますが、XHTMLもちゃんと読めません。例えば当サイトはXHTML1.1に準拠して構築してますが、お約束としてHTMLファイルの冒頭に <?xml version="1.0" encoding="UTF-8"?> と記述する必要があります。ところが、IE6はこれがあると、なんかよくわからないんですけど「後方互換モード」でそのページを読み込みます。するとまあいろんな不具合が出てきて調整事がたくさんできるわけです。ならばXML宣言を書かなければいいとなりそうですが、そうすると他のブラウザで不具合が出かねません。ましてこっちは正しいことをいているのだ！ と憤っても問題は解決しないので、またまた「@Style」さんの記事「IE6に困ったら」を参考にさせていただきました。おっと、
デザインに使えるちょっとしたCSSのスニペットいろいろ
Webサイトのデザインには、画像が必須といってもいいと思うんですけど、画像を使わずにピュアな CSS でできるデザインにも、とても素敵なものがあったりします。これからはスマートフォンサイトを作ることも増えそう ...。回線の遅いスマートフォン向けのサイトでは、画像を使わないで CSS のみでデザインする ... っていう機会も増えそうですね。 8 になっても CSS3 が使えない IE ですが、CSS3 を使わなくても、工夫しだいでいろんなデザインエフェクトを表現できますよね！記事中 CSS3 を使ったスニペットもたくさんでてきますが、どれも簡単にできて、ちょっとデザインを素敵にする？コード集です。自分のブログなどでやっているものを中心に、少しまとめてみました。 ちょっとした CSS スニペット 目次 ボックスに使うCSSスニペット テキストに使うCSSスニペット 画像に使うCSSスニペッ
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法 - Webデザイナーの為の情報Blog「CSSMAKER」
CSSレイアウト初心者がまずぶつかる壁がおそらくこのバグだと思います。 まずはサンプルソースを見てみて下さい。 サンプルをダウンロード。 HTML <div id="container"> <div id="leftContents"></div> <div id="rightContents"></div> </div> CSS #container { width: 500px; height: auto; } #leftContents { float: left; width: 180px; height: 200px; background: #80A852; margin-right: 10px; margin-left: 10px; } #rightContents { float: right; width: 290px; height: 200px; backgroun
IE6のmin-width、min-heightハックに関して - Webtech Walker
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 という記事を見かけたんですが、min-widthってこれじゃダメな気がするんです・・・ IE6では min-height や min-width が効かないため、それを効かせるためにはいろいろなハックやブラウザごとのスタイルシートが必要だった。 しかし以下のようにすればIE6にも対応したものが実現できる。 min-widthのソースは以下のとおり .bar { min-width: 100px; width: auto !important; width: 100px; } min-widthはIE6で実装されていないので、無視されます。そして、同一ブロック内では!importantが無視されるというIE6のバグを利用して「width:100px」を
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Loading...
Rriver
IE6カラム落ちを防ぐ方法
サービス終了のお知らせ