CSSスニペット の記事一覧
![[CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法](https://www.webantena.net/wp-content/uploads/2013/11/googlechrome.png)
メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSS のtext-shadow を使った回避策のご紹介です。
もっとスマートな方法が他にもあるのかもしれませんが、今回はテキストの周囲にうっすら同色の影を付け、「肉付け」させることで潰れて見るのを防ぐ方法になります。
続きを読む
企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、
今回はWordPress での投稿を例に、PDF ファイルへのリンクテキストに自動でアイコンを表示させる方法に加えて、Word、Excel、ZIP ファイルのリンクにも同様にアイコンを表示させる方法を紹介致します。
続きを読む
![[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法](https://www.webantena.net/wp-content/uploads/2013/07/css3transformrotate.png)
CSS3 の transform プロパティを使って要素を斜めに傾けて表示させることが可能です。
テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む
![[CSS]CSS で作る「吹き出し」のサンプル](https://www.webantena.net/wp-content/uploads/2013/05/cssballoon.png)
吹き出しやバルーンとも言いますが、CSS だけで実現できるのでまとめました。
上下左右の4方向に対応した吹き出しサンプルです。
続きを読む
![[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法](https://www.webantena.net/wp-content/uploads/2013/04/webkittaphighlightcolor.png)
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。
このグレーの影やオレンジの枠（ハイライト表示）をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む
![[CSS]マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法](https://www.webantena.net/wp-content/uploads/2013/03/css3selection.png)
マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。
通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3 の擬似要素 selection を用いることで、このハイライトカラーを変更することができます。
続きを読む
