主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

CSS

メイリオを CSS で斜体にする方法

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 は Edge に対応していないからといって甘くみてるとぶっこわれた話

:focus-within 疑似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素にスタイルがあてられる。 <div class="button"> <input type="submit"> // ↑ focus はこっちにしか移動できないけど。親.button にフォーカスがあたったようなスタイルがつけられる </div> 例えば、 <li> <button>ボタン</button> <button>ボタン</button> <button></button></li>…

visibility: hidden の中の visibility: visible なアイツ

visibility: hidden で css的に要素を消すということはあるあるだと思うんですが、その消している要素は、見た目的には存在していないようでして、しっかりとDOM としても、要素としても存在しているのでスクロールのパフォーマンスなどにも影響してくること…

html font-size: 1px で body font-size: 16rem

CSS

ってすると、16rem = 16px ってわかり易くない?っておもったけど、ブラウザの最小フォントサイズが指定されるとくずれるみたい。 butchi.github.io 62.5% で 10px にして 1.6rem = 16px っていうのがベターな感じですが、 qiita.com ブラウザの最小フォン…

table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう

CSS

Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。 position: relative; している td に backgr…

gulp media queries まとめる系プラグインで @supports が消えてる件

かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。 いろいろ調べてたら…

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出る

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。 こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ち…

SVGシンボル化(SVGスプライト)

けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが) Delivering Octicons with SVG · GitHub そろそろアイコンファイルの主流はSVGになりつつある…

position: fixed; してるのに、親要素の相対っぽい感じになる

CSS

position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。 transform: translateY(0); もうちょっと調べてみると、translateY、ではなく、"Tran…

あのIE9以下でセレクタが4095以上あると読み込まれないやつ

噂では効いていたけど、まさか自分があの「IE 9以下に存在するセレクター数制限にはまった」みたいなことになるとは思いもしませんでした。 普通にハマりました。 いろいろ検証しても見つからずに、そういわれるとこのcssめっちゃ長いな、と思って。t32k/sty…

Selectboxのcssが効かない問題

CSS

なんか見て見ぬふりしてたけども、セレクトボックスめっちゃちっさいなーってずっと思っていて、開発ツールとかで高さだけでも、と思ってちょっとさわってもぜんぜんスタイルが効かないんです。 最初 Chrome のせいにしてたんですが、Firefoxで見てもまった…

Safariでフォーム要素にフォーカスが当たるとposition: fixed; している要素の文字が一瞬細くなる

CSS

まぁ、こんなことはあまりないとは思うのですが、Safariでフォーム要素にフォーカスが当たると、そのページで position: fixed; している要素(固定ヘッダーとか)の文字が一瞬細くなる、ということがあったので、調べたらほぼ同じようなことを知恵袋で聞い…

https://でcssが効かない

https://とhttp://が混在しているサイトでページを遷移していると、https://のときだけCSSが効いてないっていうことがあって、しかも、ページの共通cssは効いているのに、個別のcssは効いていないという。 絶対パスや、あとはWordPressとかのCMSでルートパス…

Firefoxでテーブルのthとかtdにはposition:relativeが効かない件

CSS

Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるか th内の右上とかに小さい…

dt, dd横並びで、通しでborderを入れる

CSS

いまさら感半端ないと思いますが、本当によく忘れるのでメモ。 dl dt { float: left; clear: left; width: 7em; } dl dd { border-bottom: 1px dotted #ccc; padding-left: 7.5em; /* dtの幅以上のpaddingをとる*/ }

Windows、OS Xの共通フォント

CSS

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, フォント)

CSSと画像で、気の利いた点線ボックスを作る

CSS

ボックスにドットのボーダーつけると、ブラウザによって微妙にドットの種類が変わります。知ってたけども、最近、改めて「おっ」と思ったのは、background:url("../images/bg_dot_white.gif") 0 0 #ボーダー色;という感じで、ボックスに白い斜線の背景をつけ…

フォーム内のテキストを枠内で縦方向に中心にする

フォーム内のテキストを枠内で縦方向に中心にするには、padding と line-height をうまく組み合わせないと、全部のブラウザで綺麗にそろわない。

HTML5の新しいタグで、IE系のブラウザにCSSを適応させる

HTML5でコーディングすると、IE系はcssが効かないので放置してたんですけど、下記のjavascriptを読み込ましておけばcssが効くみたいです。document.createElement("section"); document.createElement("article"); document.createElement("aside"); documen…

CSSと、パラメータでFLASHを背景にする

最近、使いそうになったので、書いておきます。FLASHの上に画像をかぶせる方法です。SWFobject2.1でやる方法は、下記のようにパラメータを設定したらできました。<script type="text/javascript"> var params = { wmode: "transparent" }; var embed = { wmode: "transparent" }; swfobject.</script>…

Windows版safariだけ、font-family: serif; でもセリフ書体にならない

CSS

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;で並べたリストがうまく並ばない場合

IE6とIE7でdisplay:inline-block;で並べたリストがうまく並ばない場合は、IE 5 ~ 7 では置換要素はdisplay が inline で、hasLayout が true にすると、横に並びます。display: inline-block; /display: inline; /zoom: 1;(/はIE6とIE7のみハック)フロート…

_zoom: 1; と overflow: hidden; ってなに?!

最近、IE6とIE7で変な隙間とか余白が出たり、とりあえず、変なことが起こったら、_zoom: 1; overflow: hidden; このふたつを入れてみると、うまいこといくことが多い。特に、リスト要素をフロートさせたり、ネガティブマージンを使ってなんかするときなんか…

IE7、同じウィンドウズXPマシンなのに、文字サイズが大きいときは

IE7で、同じウィンドウズXPマシンなのに、なぜか一台のPCのIE7でだけ文字サイズが大きい(そのPCのFirefoxとかではちゃんと文字サイズ同じ)ときは、ブラウザの設定かと思いきや。CSSのフォントファミリー「MS Pゴシック」が「lr oSVbN」とかに文字化けし…

IE6で絶対配置の要素が消えるバグ

▼ヘッダーはじまり(position: relative;) タイトル(float: left;) ディスクリプション(position: absolute;で、タイトルの上に持ってきてる) 検索窓(float: right;) グローバルメニュー(clear: both;) ▲ヘッダー他の人がコーディングしたやつで、…

ひさしぶりにsafariで見たら背景が表示されてなかった

CSS

ひさしぶりにsafariで見たら背景が表示されてなかったので、css見てみたけど、特に変なことはしてないので、まったくわからず、ちょっと悩んでよーく見たら @charset "utf-8";@の前に半角スペースがまぎれてました。Firefoxとかはそういうとこけっこうゆるい…

IE6とIE7でリストをフロートさせたときにできる変な下の余白

IE6とIE7でリストの中にゴチャゴチャと詰め込んでそれをフロートさせて並べたときにできる下の余白は、よくあるパディングやマージンのあれやこれやではなく、clearfixを適用させると消えます。フロート+背景のブロック要素なら、clearfixを事前にかけてるの…

IEでz-indexの解釈違うのはわかったけど。

普通にやっていて、こんなケースになることは稀だれとおもいますが、ブログシステムとか、プログラムでソースを吐き出してくるところでタグとかを触れない場合は、仕方なくCSSでなんとかユーザビリティを高めようと思うわけです。それで、ある画像と見出しリ…

iPhone向けにウェブページを最適化する。

CSS

せっかくiPhoneを買ったので、PCのウェブページを、CSSだけ振り分けてiPhone向けのページにしてみようと思ってやってたんですが。なんかスムーズにいかないです。<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-device-width: 481px)" /> </link>

Firefox3.0だけ背景が1pxズレるバグ?

CSS

先日、背景が1pxズレるということがあって、たしかIEで背景が1pxズレるというバグがあったような気がしたので、それかなぁ、と思ったんですが、Firefox3.0だけズレてるのでおかしいのなぁ、と思って調べてみると、bodyに対して背景をしくと、ウィンドウサイ…