上記の属性は、HTML 4.01では定義されていません。 境界線の消え方の違い frameborder属性で境界線を消した場合は、ブラウザにより次のような違いが出てしまいます。 IE … 2ピクセル程度の隙間が空いてしまいます Firefox … 境界線は完全に消えます IEでも完全に消したい場合（隙間をなくしたい場合）は、border属性を使用します。
HTMLタグ/フレームタグ/フレームの境界線を消す（frameset） - TAG index
上記の属性は、HTML 4.01では定義されていません。 境界線の消え方の違い frameborder属性で境界線を消した場合は、ブラウザにより次のような違いが出てしまいます。 IE … 2ピクセル程度の隙間が空いてしまいます Firefox … 境界線は完全に消えます IEでも完全に消したい場合（隙間をなくしたい場合）は、border属性を使用します。
ime-mode | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers (en-US) ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題:
Firefoxでテーブルのthとかtdにはposition:relativeが効かない件 - 主に技術的なことを書くブログ
Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるか th内の右上とかに小さいボタンを置くときにわざわざthの中で、ブロックを2つに分けてフロートとかさせるのはちょっとしんどい。なので、positionでやろうとすると、thにposition: relative;をかけることになるので、起こる。という具合です。 解決方法 単純にdivをかまして、そっちにposition: relative;をかける。 th.inBtn { padding: 0 !important; /* table全体でかけてる内側パディングとる */ } th.inBtn > div { position
画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
HTMLをUTF-8にしたらフォントが明朝体になった！どうしよう。 at softelメモ
答え body { font-family:sans-serif; } HTMLをUTF-8にすると、IEでフォントを指定しないとき、勝手に明朝体で表示されます。 スタイルシートで font-family:sans-serif; を指定すれば、ゴシック体になります。 font-family で「ＭＳ Ｐゴシック」など指定してもよいのですが、 次のような理由から、私はsans-serifと書くだけにしています。 ヒラギノやメイリオを指定するつもりはない。閲覧環境に合わせて表示してもらえばよい。 スタイルシートに日本語を書くのは、なんとなく抵抗がある。 簡単。 ちなみに、 serif はひげありフォントのこと。日本語ならハネ、ハライがある明朝フォントのこと。 sans-serifがひげなしフォント。ゴシックフォントのこと。
IE8をレスポンシブ、HTML5やCSS3、rgba角丸に対応させる場合の注意点まとめ - 京都のお墨付き！
IEでHTML5やCSS3を使う場合、いくつか補助プログラムを読み込んだり、制作上の注意点があります。これは、きちんとHTML5やCSS3の仕様を身につけていないと「動作しない」などのトラブルに見舞われることがあります。 この記事では、「なぜ、そうする必要があるのか」をキチンと書いて、仕様・仕組みを理解した上で使いこなすことができるようになる事を目標に書きました。 IE8で、HTML5のSectionsタグを使えるようにする「html5shiv.js」 「Sectionsタグ」とは以下のタグです。これはHTML5で定義されていますが、IE8では使えないもの(HTML5で追加した分)があります。これを使えるようにするのが「html5shiv.js」です。 section (HTML5から追加) nav (HTML5から追加) article (HTML5から追加) aside (HTML5か
IEでtd,thの幅指定（width）が効かないときにするべきこと - TechNote
table内のtd,thに対してcssできちんと幅指定をしているはずなのに、効かないことがあります。本件、遭遇する度にイヤ気がさす自分がいるので、今回はきちんと忘備録に残しておくことにしました。 自分の場合、以下のようにヘッダ行を２行にしている場合などにwidthが効かない現象に遭遇しているような気がします。 htmlの記述 <table class="sample"> <tr> <th width="350px" colspan="2">大ヘッダ</th> </tr> <tr> <th width="150px">子ヘッダ１</th> <th width="200px">子ヘッダ２</th> </tr> <tr> <?php foreach{$dbh->query($sql) as $rows}:?> <td><?php echo $rows['staff_id']; ?></td> <
スタイルシート［CSS］/ページ全般/水平線の表示位置を指定する - TAG index
text-align は水平方向の揃え方を、margin-*** は上下左右のマージンを指定するプロパティです。これらのプロパティをhr要素に対して設定すると、水平線の表示位置（左寄せ、右寄せ）を指定することができます。 指定方法はブラウザにより異なります。Firefoxなどでは、左または右のマージンを0にすることで表示位置を指定できますが、IEなどでは text-align プロパティで指定する必要があります。どちらにも適用させたい場合は、この2つを同時に指定しておきます。 表示位置を指定する場合は、同時に水平線のサイズを指定しておく必要があります。（長さの初期値が100%なので） hr { width: 50%; text-align: right; margin-right: 0; }
borderで背景画像を表示する border-image - シンプルシンプルデザイン CSS
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという印象。プログレッシブエンハンスメントを適用してうまく見せるのは結構難しそうだなー、という感触。 とはいえせっかく調査したので備忘録。 border-image を使ったサンプル 仕様 border-image-source none（初期値）/ url(画像パス) border-image-slice 100％（初期値）/ 数値 / ○○% / 数値 fill / ○○% fill border-image-width 1（初期値）/ ○○px / ○○% / auto border-image-outset 0（初期値）/ 数値? px? border-image-repeat stretch（初期値）/ repeat / rou
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
あらゆる環境でアスキーアートを快適に閲覧出来るCSSはコレ！ – b4log
現在自分はやる夫之書のほか、やる夫 Wiki・やる夫AA録2と3つのアスキーアート(AA)関連のサイトを運営しています（あれ、いつのまにこんなに増えた？）。 AAをブラウザ上で適切に表示させるには、スタイルシート(CSS)でフォントと文字の大きさ・行間を指定する必要があります。ウィキペディアには以下のようにするように書かれています。 主に2ちゃんねるおよび、その影響を受けた電子掲示板で使用される。数行?十数行であることが多いが、巨大なものでは50行に達する場合もある。 2ちゃんねる黎明期に普及していたInternet Explorer5.0での表示を基準としたMS Pゴシック16ピクセル(12ポイント)、行間2ドットを標準として作られている。 W3C勧告のCascading Style Sheetsを利用してアスキーアートに適した表示を行う場合は、以下のように指定することが望ましい。 fo
IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル:phpspot開発日誌
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Uka-p.com is for sale | HugeDomains
テーブル - table-layoutプロパティ + fixed - CSSプロパティの詳細とデモ | ねこだまのCSSリファレンス&デモ
http://to-developer.com/blog/?p=777
CSSで影のない(noshade)水平線 - bnote
IE9用のCSSハック？Webページのフォントサイズ指定で今後注意する事
[IE6] input type="password"の場合の表示バグ？ [IE6,バグ] - BlurBlue-Note