問題 IE10になって、フォームのテキスト入力欄に「×」ボタンや、パスワード入力欄に目のマークが出るようになったんだけど、これ消せますか。 答え CSSで消せる（-msプレフィックス付き）。 「×」マーク（クリアボタン）は、::-ms-clear 擬似要素で。 input::-ms-clear { visibility:hidden } 目のマーク（パスワード表示ボタン）は、::-ms-reveal 擬似要素で。 input::-ms-reveal { visibility:hidden }
問題 Rewriteでパラメータをつけると、%エンコードされていたものがデコードされたりする？ 答え エンコードさせたり、させなかったりできる。 .htaccess で以下のようになっているとき RewriteEngine On RewriteRule ^index.php\x3F(.*)$ ./?$1 [L] 以下のようなURLにアクセスすると、 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%252BGcNb%252B%252BlgqN7I9Pv2LjMTQm8%253D $_GET はこうなりました。 ["code"]=> string(44) "XXXXXXXXXXXXX+3XkFG+GcNb++lgqN7I9Pv2LjMTQm8=" アドレスバーに入力 /index.php%3Fcode%3DXXXXXXXXXXXXX%252B3XkFG%
当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部ファイトとして記述するだけなので簡単！ REM unit polyfill REM unit polyfill -GitHub CSS3からの新単位「rem」とは REM unit polyfillのデモ REM unit polyfillの使い方 CSS3からの新単位「rem」とは まずは、「rem」のおさらいを簡単に。 サイズの単位には「px」「pt」などの絶対単位、「em」「%」などの相対単位
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
JavaScript で要素のクラス属性を操作してスタイルを変更するような場合、IE8 には :before/:after 擬似要素のスタイルが再描画されないというバグがある。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> HTML5も！というときは、こちら。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecod
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
max-widthプロパティ（最大幅）/min-widthプロパティ（最小幅）で指定する、最大幅と最小幅を固定したCSSレイアウト解説です。 当サイト内で解説しているリキッドレイアウトは、コンテンツ部分がブラウザの拡大縮小に合わせ可変し続けるのに対し、max-widthプロパティ/min-widthプロパティで指定するレイアウトでは、最大幅と最小幅を固定してしまいます。 max-widthプロパティ（最大幅）/min-widthプロパティ（最小幅）はIE6以前のバージョンでは未対応です。よってIE6以前のブラウザ対策が必要です。（IE独自拡張スクリプト） 以下のサンプル解説では、最大幅を900px、最小幅を500pxとします。 サンプルソース 当サイト内の リキッドレイアウト2カラム左サイドバー を使用しています。 #wrapper { text-align: left; margin:
By Louis Lazaris / November 21, 2012 / 71 Comments Updated: August 7, 2022 Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks. But without conditional comments in IE10
こんにちは、溝上です。 今回はちょっと便利なfloatの使い方をご紹介したいと思います。 以前紹介したfloatを使う際の注意点に反してしまいますが 幅が決められない（決めたくない）要素をfloatさせたいときってありますよね。 例えばフッターにテキストリンクを多数並べたい場合などが考えられます。 | 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ | ↑こんなリンクです。 「それなら以前紹介したこの方法でいいんじゃない？」 と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。 まずは前回の先輩のサンプルを応用（拝借）してみます。 （htmlコーディング） <div class="list"> <ul> <li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テスト
…or… <html>’s conditional classes From what I’ve seen a good number of developers these days are split between conditional stylesheets and css hacks. You’re used to seeing this: <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]--> <!--[if IE 6]><link rel="stylesheet" type
最近font-familyの指定で悩んでます。少し前までは、下記エントリーのような理由で、ヒラギノ→メイリオ→MS P ゴシックみたいな感じで指定していました。 CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 ヒラギノを指定しなくなった理由 わけあってヒラギノをwindowsにインストールする必要がありまして、しばらくインストールしたまま使っていたのですが、windowsでヒラギノの表示は少々汚くて見づらいものがありました。 しかも、ヒラギノで表示されるサイトがかなり多いんです。それに耐えられなくなり、ヒラギノは使うときだけインストールするようにして、いったんアンインストールしました。いくらwindowsにヒラギノを入れているユーザーが少ないといっても、自分でそういう経験をしたので、ヒラギノの指定はしづらくなりました。あと、自分の周りのデザイナーさんとか
IE7/IE8 The selectors and properties below should all work according to the W3C specifications. IE7.js CSS Selectors
IE では Web fonts を使うことができます。ただし、現在は Microsoft WEFT などで作成した .eot のファイルにしか対応していません。また、この記事で紹介する手順中の Enter ther URL address of your Web page and click ‘Add’ で入力した URL 配下でしかこの eot ファイルを使うことができませんのでご注意ください。 IE の Web fonts を確認するための demo を用意しました。Windows の IE 5.5 以降で確認することができます。 WEFT についてをまとめたドキュメントはほかにも存在しますので合わせてお読みいただくとよいと思います。 一松書院 : Webページでのいろいろな한글フォントの利用について 雛形倶楽部情報データベース : eotファイルの作成方法（フォント埋め込み技術） R
早く死なないかなIE6。寿命後どれくらいかな。 いろいろ解決方法は提示されてるけど、どれもこれもわかりにくいというか説明が長い！ のでメモ。 結論 ◎IE6、IE7の仕様では、positionにrelative、absoluteなどを使うと重なり順が自動で設定される。（たぶん初期値0） ○親要素にz-indexを設定している場合、その中の要素でz-indexを指定しても親要素内でしか効果が無い！（これはどのブラウザでも同じ） （↑第一階層z-index:0 > 第二階層z-index:2000 よりも 第一階層z-index:1 > 第二階層z-index:0 の方が重なり順は上になる） ○z-index要素なしよりz-index:0のほうが強い。どちらも同じz-index:0の場合はソース順で下に書かれたものが強い。（これも他ブラウザと同じ） ×IE6、IE7では親要素positionに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
