CSSの一覧

このサイトをiPhone SEの実機にて確認したところ、文字化けが起こっていました。行の先頭の文字だけ☒（□に×、四角にバツの文字）が重なって表示されるのです。Googleで検索してもそれっぽい情報がなかなか出てこなくて…

レスポンシブ対応時にも画像の表示場所をあらかじめ確保することで、画像の遅延読み込み時(Lazy loading)に再レンダリングされるのを防止して画面がチラつくのを回避する方法をまとめました。 レスポンシブ画像の遅延読み…

WordPress高速化を目指すため、PageSpeed Insightsでテストしてみると「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」という項目を修正するよ…

WordPress標準で使えるブログカードの機能(Embed)ですが、なんだか表示が遅く使い物にならないな、と思っていました。FirefoxのFirebugのネットワークにて読みこまれているファイルを調べてみると、原因は…

高速化とRetina対応のため、サイトの使っているアイコンをWebフォントにしました。WebフォントとはSVGをフォント化してそれをCSSで表示させます。ベクター素材のSVGが元なので、画像などとは違い拡大してもエッジが…

先日の画像置換IE6にて表示がめちゃめちゃですね。IE6以下で「position:fixed」が使えないから互換モードで表示して、いろいろ小細工しているからだ。 これを直そうとすると、いちからCSSの組み直しか。ちょっと…

CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で表示されないとか問題もある。 旅のサイトでは主にbackgroun…

旅の各ページのレイアウトがIEで表示した場合に上に詰まった感じになっていたのを修正しました。今まで気がつかなくてすみません。 IE6以下ではposition: fixed;が効かないので、上部メニューバーを表示させ、文章…

「トイレのうず」本館の各コンテンツ内で縦スクロールバーが2本出ていた不具合をやっと修正。 IE6以下ではposition: fixed;が効かないので、divタグでページ全体をくくってそこにスクロールバーを表示させてたん…

『プロとして恥ずかしくないスタイルシートの大原則』を購入して読んでいたら、スタイルシートを使ってページを作ってみたくなった。 で、一番取りかかりやすそうな本館の旅のページを試しにCSS化。いわゆるテーブルレイアウトをスタ…

Windows機から見たときなんとなく間が抜けていたのを修正しました。 cssでもフォントサイズをsmall、x-smallなど相対的に指定をすると、ブラウザ間でのフォントの大きさにばらつきが出るらしい。ということで今回…

真っ白になっていた背景色ですが、いろいろなblogのcssを参考にしてなんとか解決しました。 背景画像を指定するとbackground-colorが効かないみたいで、backgroundの後に背景色を設定するみたいです。…