css

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

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

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

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

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

【css】蛍光ペン風アンダーラインを設置する方法

重要な単語や文字を強調させたい場合、アンダーラインだけでは、あまり目立たず文章に埋没してしまうことがありますよね? 「大切な部分が埋没。。。」 そこ...
css

【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法

文中の文字を強調したいときどういった手法を使いますか? 「文字を太文字に変える」 「文字の色を変える」 「アンダーラインを加える」 これ...
フォント

google fontsの使い方・ダウンロード方法、日本語フォントにも対応!

Google Fonts に日本語フォントが正式に追加されたということで、これまで以上にGoogle Fontsの需要は広がってくるのではないでしょうか? そ...
スポンサーリンク