CSS
いろいろ思案した結果、em で括ったとこにだけ font-face 指定するのがベターそう。 @font-face { font-family: 'Meiryo-italic'; src: local('Meiryo'), local('メイリオ'); } em { font-family: 'Open Sans', 'Meiryo-italic' , sans-serif; font-style: i…
:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…
visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…
ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。 butchi.github.io 62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、 qiita.com ブラウザの最小フォン…
Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。 position: relative; している td に backgr…
かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。 いろいろ調べてたら…
IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。 こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ち…
けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが) Delivering Octicons with SVG · GitHub そろそろアイコンファイルの主流はSVGになりつつある…
position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。 transform: translateY(0); もうちょっと調べてみると、translateY、ではなく、"Tran…
噂では効いていたけど、まさか自分があの「IE 9以下に存在するセレクター数制限にはまった」みたいなことになるとは思いもしませんでした。 普通にハマりました。 いろいろ検証しても見つからずに、そういわれるとこのcssめっちゃ長いな、と思って。t32k/sty…
なんか見て見ぬふりしてたけども、セレクトボックスめっちゃちっさいなーってずっと思っていて、開発ツールとかで高さだけでも、と思ってちょっとさわってもぜんぜんスタイルが効かないんです。 最初 Chrome のせいにしてたんですが、Firefoxで見てもまった…
まぁ、こんなことはあまりないとは思うのですが、Safariでフォーム要素にフォーカスが当たると、そのページで position: fixed; している要素(固定ヘッダーとか)の文字が一瞬細くなる、ということがあったので、調べたらほぼ同じようなことを知恵袋で聞い…
https://とhttp://が混在しているサイトでページを遷移していると、https://のときだけCSSが効いてないっていうことがあって、しかも、ページの共通cssは効いているのに、個別のcssは効いていないという。 絶対パスや、あとはWordPressとかのCMSでルートパス…
Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるか th内の右上とかに小さい…
いまさら感半端ないと思いますが、本当によく忘れるのでメモ。 dl dt { float: left; clear: left; width: 7em; } dl dd { border-bottom: 1px dotted #ccc; padding-left: 7.5em; /* dtの幅以上のpaddingをとる*/ }
Arial Arial Black Comic Sans MS Courier Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 引用元:CSSでのフォント指定について考える(2014年) - DTP Transit(Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント)
ボックスにドットのボーダーつけると、ブラウザによって微妙にドットの種類が変わります。知ってたけども、最近、改めて「おっ」と思ったのは、background:url("../images/bg_dot_white.gif") 0 0 #ボーダー色;という感じで、ボックスに白い斜線の背景をつけ…
フォーム内のテキストを枠内で縦方向に中心にするには、padding と line-height をうまく組み合わせないと、全部のブラウザで綺麗にそろわない。
HTML5でコーディングすると、IE系はcssが効かないので放置してたんですけど、下記のjavascriptを読み込ましておけばcssが効くみたいです。document.createElement("section"); document.createElement("article"); document.createElement("aside"); documen…
最近、使いそうになったので、書いておきます。FLASHの上に画像をかぶせる方法です。SWFobject2.1でやる方法は、下記のようにパラメータを設定したらできました。<script type="text/javascript"> var params = { wmode: "transparent" }; var embed = { wmode: "transparent" }; swfobject.</script>…
font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;font-family:Georgia,"MS 明朝","Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3",serif;MSが小文字やったりする。それでも、効いたり、効かなかったり。safariだ…
IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合は、IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true にすると、横に並びます。display: inline-block; /display: inline; /zoom: 1;(/はIE6とIE7のみハック)フロート…
最近、IE6とIE7で変な隙間とか余白が出たり、とりあえず、変なことが起こったら、_zoom: 1; overflow: hidden; このふたつを入れてみると、うまいこといくことが多い。特に、リスト要素をフロートさせたり、ネガティブマージンを使ってなんかするときなんか…
IE7で、同じウィンドウズXPマシンなのに、なぜか一台のPCのIE7でだけ文字サイズが大きい(そのPCのFirefoxとかではちゃんと文字サイズ同じ)ときは、ブラウザの設定かと思いきや。CSSのフォントファミリー「MS Pゴシック」が「lr oSVbN」とかに文字化けし…
▼ヘッダーはじまり(position: relative;) タイトル(float: left;) ディスクリプション(position: absolute;で、タイトルの上に持ってきてる) 検索窓(float: right;) グローバルメニュー(clear: both;) ▲ヘッダー他の人がコーディングしたやつで、…
ひさしぶりにsafariで見たら背景が表示されてなかったので、css見てみたけど、特に変なことはしてないので、まったくわからず、ちょっと悩んでよーく見たら @charset "utf-8";@の前に半角スペースがまぎれてました。Firefoxとかはそういうとこけっこうゆるい…
IE6とIE7でリストの中にゴチャゴチャと詰め込んでそれをフロートさせて並べたときにできる下の余白は、よくあるパディングやマージンのあれやこれやではなく、clearfixを適用させると消えます。フロート+背景のブロック要素なら、clearfixを事前にかけてるの…
普通にやっていて、こんなケースになることは稀だれとおもいますが、ブログシステムとか、プログラムでソースを吐き出してくるところでタグとかを触れない場合は、仕方なくCSSでなんとかユーザビリティを高めようと思うわけです。それで、ある画像と見出しリ…
せっかくiPhoneを買ったので、PCのウェブページを、CSSだけ振り分けてiPhone向けのページにしてみようと思ってやってたんですが。なんかスムーズにいかないです。<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-device-width: 481px)" /> </link>
先日、背景が1pxズレるということがあって、たしかIEで背景が1pxズレるというバグがあったような気がしたので、それかなぁ、と思ったんですが、Firefox3.0だけズレてるのでおかしいのなぁ、と思って調べてみると、bodyに対して背景をしくと、ウィンドウサイ…