CSS
いまさら感半端ないと思いますが、本当によく忘れるのでメモ。 dl dt { float: left; clear: left; width: 7em; } dl dd { border-bottom: 1px dotted #ccc; padding-left: 7.5em; /* dtの幅以上のpaddingをとる*/ }
縦に並んだ画像を、position: relative;で、上の方に移動させて配置すると、その画像がもともとあった場所の分、下に余白ができる。そういうときは、その移動させた要素に対して、margin-bottom: -○○px;など、ボトムにネガティブマージンをとってやると、余…
position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。 transform: translateY(0); もうちょっと調べてみると、translateY、ではなく、"Tran…
けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが） Delivering Octicons with SVG · GitHub そろそろアイコンファイルの主流はSVGになりつつある…
かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。 いろいろ調べてたら…
https://とhttp://が混在しているサイトでページを遷移していると、https://のときだけCSSが効いてないっていうことがあって、しかも、ページの共通cssは効いているのに、個別のcssは効いていないという。 絶対パスや、あとはWordPressとかのCMSでルートパス…
Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。 position: relative; している td に backgr…
フォームで、チェックボックスとラベルテキストを並べると、ブラウザによって、縦方向にちょっとだけズレます。そんなときはこういう風にCSSを指定すると、なんとか良い感じになるはず。input { margin-right: 2px; font-size: 93%; line-height: 1; vertica…
visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…
Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるか th内の右上とかに小さい…
いろいろ思案した結果、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…
最近、IE6とIE7で変な隙間とか余白が出たり、とりあえず、変なことが起こったら、_zoom: 1; overflow: hidden; このふたつを入れてみると、うまいこといくことが多い。特に、リスト要素をフロートさせたり、ネガティブマージンを使ってなんかするときなんか…
:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…
web標準と、後方互換、二兎追うものは一兎も得ず。 altがポップアップしない。 bodyに対するテキストサイズ指定を「IEはハックで％指定、他のブラウザはpx指定」にしてると、文字サイズを変更できなくなってる。（メニューの互換ボタンを押せば、IE7のときみ…
IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。 こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ち…
IE7をメインで使うようになってついつい忘れがちやけど、IE6 でフロートさせるとマージンが2倍になるので、div { display: inline; float: left; width: 300px; } わざわざ*htmlハックをつかって指定を増やすよりも、「display:inline;」で対応。
CSSでmin-heightをIEでも使えるようにする。■min-height div { min-height:100px; height: auto !important; height: 100px; } ■min-width div { min-width:100px; width: auto !important; width: 100px; } 参考： http://blog.creamu.com/mt/2008/03/cssmi…
コンテンツの内容が少ないときにフッターの下の余白が寂しい感じになるということがよくあるので、フッターを下付き（position:absoluteではなく）にしてウィンドウ縦幅に応じて上下に良い塩梅で可変するようにCSSでできないものかと、いろいろ調べてみたけ…
最近はコーディングなどをしていても、けっこうバグが起こらないように気をつけてシンプルにコーディングするので、起こっても、あぁ、たぶんあそこかなぁ、なんてわかることもあるんですが。今日、ちょっとした制約から、パディングとマージンをちょっと複…
普通にやっていて、こんなケースになることは稀だれとおもいますが、ブログシステムとか、プログラムでソースを吐き出してくるところでタグとかを触れない場合は、仕方なくCSSでなんとかユーザビリティを高めようと思うわけです。それで、ある画像と見出しリ…
IE6とIE7でリストの中にゴチャゴチャと詰め込んでそれをフロートさせて並べたときにできる下の余白は、よくあるパディングやマージンのあれやこれやではなく、clearfixを適用させると消えます。フロート+背景のブロック要素なら、clearfixを事前にかけてるの…
▼ヘッダーはじまり（position: relative;） タイトル（float: left;） ディスクリプション（position: absolute;で、タイトルの上に持ってきてる） 検索窓（float: right;） グローバルメニュー（clear: both;） ▲ヘッダー他の人がコーディングしたやつで、…
IE7で、同じウィンドウズXPマシンなのに、なぜか一台のPCのIE7でだけ文字サイズが大きい（そのPCのFirefoxとかではちゃんと文字サイズ同じ）ときは、ブラウザの設定かと思いきや。CSSのフォントファミリー「ＭＳ Ｐゴシック」が「lr oSVbN」とかに文字化けし…
IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合は、IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true にすると、横に並びます。display: inline-block; /display: inline; /zoom: 1;（/はIE6とIE7のみハック）フロート…
最近、使いそうになったので、書いておきます。FLASHの上に画像をかぶせる方法です。SWFobject2.1でやる方法は、下記のようにパラメータを設定したらできました。<script type="text/javascript"> var params = { wmode: "transparent" }; var embed = { wmode: "transparent" }; swfobject.</script>…
HTML5でコーディングすると、IE系はcssが効かないので放置してたんですけど、下記のjavascriptを読み込ましておけばcssが効くみたいです。document.createElement("section"); document.createElement("article"); document.createElement("aside"); documen…
フォーム内のテキストを枠内で縦方向に中心にするには、padding と line-height をうまく組み合わせないと、全部のブラウザで綺麗にそろわない。
ボックスにドットのボーダーつけると、ブラウザによって微妙にドットの種類が変わります。知ってたけども、最近、改めて「おっ」と思ったのは、background:url("../images/bg_dot_white.gif") 0 0 #ボーダー色;という感じで、ボックスに白い斜線の背景をつけ…
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, フォント）
まぁ、こんなことはあまりないとは思うのですが、Safariでフォーム要素にフォーカスが当たると、そのページで position: fixed; している要素（固定ヘッダーとか）の文字が一瞬細くなる、ということがあったので、調べたらほぼ同じようなことを知恵袋で聞い…
