@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

css

chromeでfloatした要素のwidthが何故か0.016px増える

【2015/07/22追記】 現時点の最新版(ver 44.0.2403.89)で確認したところ、表題の問題は解消されておりました。 まだこの問題が確認される場合はChromeが最新版になっていない可能性がありますので、一度ご確認ください。 現時点でのchromeの最新版(ver 43.0.…

安易にoutline: none;とか指示するんじゃないよ

久々に「リンクのアウトラインを消してくれ」っていう指示が来てモヤモヤしたので。 アウトラインとは リンク要素をクリックした時とかに、要素の周りに出てくる点線のアレです。 最近のChromeだったらデフォルトでは青い枠とかになるのでしょうか。 このア…

CSSで使える単位をまとめてみました

とあるきっかけでCSSで使用できる単位について調べました。 ちなみにきっかけは以下のツイート。 要素の横幅を2cm大きくしてくれ、っていう修正指示がきた— Sato Daiki (@Satoh_D) 2014, 8月 14 出来るわけ無いだろJKと思ってたら「cm指定できるよ!」という…

Web製作者のためのCSS設計の教科書を読みました

先日発売された『Web製作者のためのCSS設計の教科書 モダンWeb設計に欠かせない「修正しやすいCSS」の設計手法』を読みました。 CSSは簡単に書ける分、とても簡単に崩壊しやすい言語であるか。 そういったCSSを「効率よく」、「メンテナンスしやすく」、「拡…

iOS7 SafariのURLバーの色を変える

ページを見ているとたまにSafariのURLバーの色が白ではないサイトがあり、どうやってるんだろうと思い調べました。 bodyの背景色を変えるだけだった CSSを見たらbodyの色を変更しているだけでした。 これだけで出来るんですね。 ただ指定した色になるわけで…

Androidで position: 100%; height: 100%; の要素がスクロールすると何故か隙間ができる

前回に続きまたAndroidの問題です。 スマホサイト案件で画面いっぱいの固定配置の要素を敷かなけれいかず、以下のようにコードを書きました。 HTML <div class="mod-posf"></div> <div class="mod-page"> . . . </div> CSS .mod-posf { background: rgba(0, 0, 0, 0.6); height: 100%; position: fixed; width: 100%; …

Androidでposition: fixed;を使用した時に画像がぼやけてしまう

Android(4.x)端末で position: fixed; した画像がぼやけてしまいます。 百聞は一件に如かずということで、次の画像を御覧ください。 枠線で囲んでいる部分は position: fixed; にした要素です。 比べてみると画像がぼやけて見えるのがわかるかと思います。 …

CSSのcontentプロパティ内で改行を挿入する

今まで自分の中で勝手にcontentプロパティ内で改行は出来ないものだと思ってましたが、出来るんですね。 案件で入れたい事態になり、調べてみたらありました。流石Google先生。 content内で改行する方法 以下の様に指定します。 .hoge { content: "\A"; whit…