タグ

2013年1月17日のブックマーク (13件)

  • 背景色をrgbaとrgbで2重指定するときのIE地雷

    はじめに結論 CSSで背景に透過色を指定する際に,来のrgbaとIE6-8用のrgbを2重で書いたりしますが,うっかりハマるポイントがあるので紹介. 結論から言うと背景プロパティは,background-colorではなく,backgroundを利用しましょう,ということになります. Goodパーツ こう書くことを鉄の掟としておけば,特にハマることはないとおもいます.きっと. .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが,rgb側はbackground-colorでも大丈夫です. Badパーツ こうやるとIE6-8で背

    背景色をrgbaとrgbで2重指定するときのIE地雷
  • アンダースコアハック

    CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 記述方法はいたって簡単。 プロパティの前に _ を置くだけ。 使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。 例えば、 .hoge { border-top:1px solid #CCC; margin:1px 10px 20px 0; _margin-top:0; } などのように、記述すればIEだけmargin-topが0になります。 IEには、互換モードの時に、 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう というバグがあるので、バグにはバグ

    アンダースコアハック
    ihok
    ihok 2013/01/17
  • IE 7以下で背景画像が表示されない場合の対処法

    IEで変な現象が起きてしまったのでメモ。 Internet Explorer 7以下で背景画像が表示されなくなるといったもの。 その原因となった部分と対処法。 背景が表示されなくなったページこういうページを作ってました。 背景画像が表示されなかったページ このページの「タイトル」と書かれている部分ですね。 (実際に作ったページとは画像を変更しています) この部分のHTMLCSSは以下。 <div id="main"> <div class="article"> <div class="head"> <h2>タイトル</h2> </div> <div class="body"> <p>テキスト。テキスト。テキス...</p> </div> </div> </div>/* ここが表示されない */ #main .article .head { background: url(img/main

    IE 7以下で背景画像が表示されない場合の対処法
  • [ CSS ] Internet Explorer で見出しの文字が欠ける場合の対処法

    HTML の一番上に h1 要素を書いて、CSS で、 body { line-height: 150%; } と言った記述をすると、Windows Internet Explorer 7 で見出しの文字が欠けてしまいます。 こんな感じ。 そんな時は、 body { line-height: 1.5; } のように line-height を単位の無い値にすると解決します。 一応、文字欠けのサンプル を置いておきます。

    [ CSS ] Internet Explorer で見出しの文字が欠ける場合の対処法
  • ie6で文字が欠ける | helog - Webに悩む人のネタ帳

    ie6で文字が欠けることがある。 「文字が欠ける」というのは、テキスト上部と下部で1pxぐらいのラインが表示されないという現象。 例えば、私の場合はブラウザ間で見た目を統一するために、line-heightプロパティを設定したり、リストのマークの位置を揃えようとする場合によく発生する。 webで調べてみると、line-heightとfloatの組み合わせが悪いような記述を見かけますが、実際に検証してみたところ必ずしもそうとはいえないみたい。 いじくり倒した結果、line-heightは1.2がボーダーラインということは分かりました。つまり、ie6ではline-heightを1.2より小さな値を設定すると、文字が欠ける現象が発生する可能性があるということです。 またie6かよ!早くなくなってしまえ!と言いたい気持ちを抑えつつ。 あまり好ましい対策とは言えないかもしれませんが、とりあえず

  • IEで文字が欠ける時の対処法 | Katt Weblog

    上の画像みたいに、IEで文字が欠ける時の対処法です。 IE7、IE6のバグ(というか、もはや仕様)により、見出し文字の上部が欠けて、富が冨に見えたりしちゃうことがあります。一応文字欠けサンプル 原因は、CSSで以下のように行間を%指定しているため。 body { line-height: 140%; } なので、以下のように単位なしの行間指定してやれば解決します。 body { line-height: 1.4; } なんでこれで解決するんだろう?わかりません。 関連するかもしれないその他の投稿 CORESERVER(コアサーバー)のレスポンス、早くなった? (0) Kattのブログデザイン変遷(カスタマイズ)の過程をつづる Vol.1 (0) Webデザインに便利なオンラインジェネレータ集 (0) 【Dreamweaver CS4】いいと思います(ショートカットも便利) (0) リンク画

    ihok
    ihok 2013/01/17
  • IE6.0で文字が消える :: Webデザイン

    IE6.0で文字が消える現象について。 以下の項目に該当したら、IE6.0のCSSバグです。 ・文字が消えるブロック要素に背景色を指定している ・文字が消えるブロック要素内にフロート配置した要素がある <div style="background:aqua;"> <div>A</div> <div style="float:right; width:3em; background:blue;">B</div> <div style="clear:right;">C</div> </div> 上記のソースをIE6.0で見ると、「A」という文字が消えると思います。マウスなどで選択するとあぶり出しのように「A」という文字が浮かび上がります。 対策 ブロック要素の幅をwidthプロパティで明示することで回避できます。 <div style="width:99%; background:a

  • 【CSS - zoom:1 - ★★★】 - hasLayout問題を解決するzoom:1;の落とし穴 ― Like@Lunatic

    IEのヘンテコなCSS解釈の原因と言われるhasLayoutプロパティ。 どうやらこのhasLayoutプロパティの値がfalse(デフォルト値)の場合に、いろいろとまずいことが起こるようです。IEだけfloatした要素周辺のmarginやpaddingがおかしかったり、相対配置/絶対配置した要素がどこかに消えてしまったりする・・・という経験はcssレイアウトの際に誰もがぶつかる問題です。 また、hasLayoutがTrueとFalseの要素が混在している場合には、IE7のズーム機能を利用した際に、隣あった要素が重なってしまったりします。 この辺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明があります。 このhasLayoutの問題を解決するためにzoomプロパティが利用されることがあります。(zoomプロパティはIEの独自拡張であるため、これを使うこと自

    【CSS - zoom:1 - ★★★】 - hasLayout問題を解決するzoom:1;の落とし穴 ― Like@Lunatic
  • overflow:auto(scroll) 要素内の position:relative(absolute) 要素 注意点 - Cyokodog::Memo

    すぐ忘れるのでメモ こう書くと・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #a { height: 80px; overflow: auto; } #b { position: relative; border:solid 1px blue; height: 50px; } #b span { background: red; position: absolute; top: 30%; left:50%; } </style> </head> <body> <div id="a"> <div>text</div> <div>text</div> <div>text</div> <div>text</di

    overflow:auto(scroll) 要素内の position:relative(absolute) 要素 注意点 - Cyokodog::Memo
  • のび太を成長させたドラえもん式教育法 - sadadadの読書日記

    子供の頃、ドラえもんを見ていて不思議に思ったことがあります。なぜ、ドラえもんが頭が良くない怠け者なのび太を、成長させることが出来たのかです。ドラえもんに頼るばかりで自分では何もせず、毎日をダラダラと過ごすのび太が生まれ変わるターニングポイントはどこにあったのでしょうか。今更ながら、思い起こして見直してみると、ドラえもんが行っていたことは、まさに伸ばす『教育』の原点だったのだと思います。 ドラことば心に響くドラえもん名言集 作者: 小学館ドラえもんルーム出版社/メーカー: 小学館発売日: 2006/09/01メディア: 単行購入: 18人 クリック: 260回この商品を含むブログ (67件) を見る ドラえもんは受身 ゆっくり着実にのび太を成長させたドラえもんの教育法は、のび太が自分から『夢や目標に失わない』ように、そして『寄り添いながら促している』ところにポイントがあります。ドラえもんは

    のび太を成長させたドラえもん式教育法 - sadadadの読書日記
  • 子供を褒めるときに絶対にしてはならない、たった1つの逆効果な褒め方 | びーおーぷんどっとねっと

    子供は褒めて伸ばしてあげる。なんて世間一般では良く聞きます。 子供を持つお父さん、お母さんは一度は聞いたことがあるでしょうし、実践されている方も多いかと思います。 僕はなかなか実践・・・となると、「このクソガキャー」と言いたくなるのを何度こらえて、一体どこを褒めたらいいだよ・・・なんてビールを飲みながら嘆く日々が続いていたわけですが、最近になって色々、気づくところもあり、こうして記事にしてみました。 さてどうでもいい前置は置いておくとして、「褒める」ことが、子供の将来にとって逆効果になることがあるそうです。 どうして子供を褒めるのがいいの? もともと子供褒めて育てるのがオススメされる理由は「自信をつけさせる」事にあります。 マイナスの発言はせずに、なんでも出来たことをちゃんと褒めてあげることで、子供は自分のやっていることに自信を持って取り組めるようになります。 だからここは逆に叱って伸ば

  • 初めての賃貸で気をつけること教えろ下さい : ぶる速-VIP

    初めての賃貸で気をつけること教えろ下さい 初めての賃貸で気をつけること教えろ下さい 1 名前:以下、名無しにかわりましてVIPがお送りします :2013/01/16(水) 10:47:20.49 ID:Z/4+MYZ40 ・レオパレスは回避 ・2階以上 ・都市ガス これくらいしかわからん 3 名前:以下、名無しにかわりましてVIPがお送りします :2013/01/16(水) 10:48:32.99 ID:8aNMyHjv0 それだけじゃわからんな 4 名前:以下、名無しにかわりましてVIPがお送りします :2013/01/16(水) 10:48:47.47 ID:hLTCK26F0 ネット料金は家賃に含まれる 5 名前:以下、名無しにかわりましてVIPがお送りします :2013/01/16(水) 10:50:06.17 ID:2V1Dh0Ox0 風呂トイレ洗面台が全部別室 8 名前:以下、

    初めての賃貸で気をつけること教えろ下さい : ぶる速-VIP
  • 高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと | バンクーバーのうぇぶ屋

    あまりWEB系のネタ以外に触れても良いものかと思いつつ。まぁ今日までも散々色々書いてきたので今さらかと腹をくくって書きます。僕の可愛い妹は現在専門学校生、まぁ丁度就職活動ってヤツにも関わる時期だと思うので、ちょっと日の外にいながら思う所を書いてみたいと思っています。 『大学卒業して就活、就職できなければ落ちこぼれ。』みたいな流れというか空気、確実にありますよね?じゃぁ、もし皆さんが高卒だったら絶望してるんでしょうか?たぶん、大卒で就職できないのに、高卒で就職できるわけがないみたいな感じになるんですかね? 僕は大学に行ったことが無いので、大学生の気持ちにはなれません。しかし、たとえ高卒だろうが人生楽しむことに関係無いと断言することはできます。 というわけで、突然ですが、僕の学歴は高卒止まりです。しかし、今はバンクーバーで週に3回働き、2回は自宅で作りたい物を作り、時間は朝10時から6時以外

    高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと | バンクーバーのうぇぶ屋