どうも!LSSです!!
ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりw
解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。
丸で囲む文字
こんな風に、丸に光を入れてもオシャレ?かもですね。
コード
こんな風に、<span style="letter-spacing: 0.2em; background: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#ffffff00 95%) -0.1em -0.1em/1.2em 1.2em repeat-x,radial-gradient(closest-side circle,#ffcc44 94%,transparent 95%) -0.1em -0.1em/1.2em 1.2em repeat-x;">丸に光を入れてもオシャレ?</span>かもですね。
↑書きかけの下書きより抜粋
PC+Chromeではそこそこ正常
ビミョーに丸が欠けていたり、ビミョーに末尾に次の丸の端っこが見えたりはありながらも、そこそこ見えてるので複数パターンとそのコードを用意していました。
で、ほぼ書けたところで、iPhone(の、はてなアプリ)で下書きをプレビューしてみたところ…まったく話にならないレベルで横位置がズレまくってショックwwww
解決策はありそうな気がするのですが…
というのが…不思議なもので、iPhoneの はてなアプリでの表示、プレビューだと大いにズレているものの、編集状態の時にはちゃんと収まってるんですね。
letter-spacing か、フォントサイズ、それのテーマorデザインCSSの内容が干渉しているのか…うーん。
という、つまづきの記録でした。
次回もまた、よろしくお願いします^^