css

css

Google Chromeで画像を縮小表示するとぼやける現象をcss一行で解消する方法

レスポンシブデザインやRetinaディスプレイへの対策として、コーディングで画像を配置する際に通常想定しているよりも倍の大きさで画像を配置することはよくあると思...
html

電話番号に自動で挿入されるリンクを無効にする2つの方法(Edgeにも対応します)

ブラウザー側の操作で自動的にリンクが入る機能があるものもあります。たとえば、Microsoft Edgeや、iPhone、Androidなどスマートフォン向けの...
css

【css】レスポンシブコーディングでボックスの横幅と高さの比率を維持しながら可変させる方法

レスポンシブ対応のコーディングでボックスの横幅と縦の幅の比率を一定に維持したいと考えたことはないでしょうか? 例えば、右に画像<img>、左にテキス...
css

cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法

レスポンシブコーディングで、電話番号のリンクをあらかじめ追加しておくことはよくあると思います。目的はもちろんスマートフォンなど通話可能なデバイスでの...
css

【css】画像(img)の下に余白(隙間)ができる問題を秒で解決する方法

html上にimg要素として画像を配置する際、画像の下にmarginやpaddingでは消せない余白ができてしまうことがあると思います。 今回はこ...
css

@font-faceで複数のweigthやstyleを持つWebフォントを定義する方法

Webフォントを@font-faceを使って指定することはよくあると思いますが、同じフォントで複数のfont-weightやfont-styleがある場合はどう...
html

レスポンシブでコーディングしたのになぜかスマホでうまく表示されない原因は?

レスポンシブでコーディングしてPCでのテストはうまくいったのになぜか、スマホで表示されない。 こういった経験はありませんか? もしかしたらこの問題の...
css

もし、cssだけで最初の一文字目を指定するならfirst-letterが便利!ただし注意が必要です

文頭、最初の一文字の色を変えたり、大きくしたりといった手法のデザインは、よく見られると思います。 今回は、こういった表現をcssのみで実現できるのか?実現...
css

最新版、レスポンシブデザインのブレークポイントはこれ!

レスポンシブデザインのブレイクポイントというものは、明確に定義されているわけではないので、どこに設定するか悩むところですよね。 そこで、今回は、2020年...
css

【css】transitionは動作時間だけじゃない!animationなしでここまでできる

transitionと言えば、変化するまでの時間を指定する「transition-duration」で記憶されているかたも多いと思います。 ・コピペで使え...
スポンサーリンク