CSSによる「部分一致」でスタイルを一括適用させる方法&効かないときのポイント
CSSで複数のクラスやIDに同じスタイルを適用させるとき、どうしてますか？.class-name1,.class-name2,#id1 { // 適用したいスタイル}こんな感じが多いと思います。でも適用したいクラスやIDを羅列するのはコード...
CSS
HTML+CSSだけでマスク（切り抜き）したいときに参考にしたいテクニック3選
Webデザインをする上でやりたくなるテクニックの一つに切り抜き（マスク）があります。文字や好きなシェイプの形で背景を切り抜いたりすると、華やかさというかなんかオシャレに見えるんですよね。今回は色んな切り抜きのテクニックをご紹介します。テキス...
シンプル、だけどレスポンシブな日本語テキストの改行テクニック
改行の入る箇所によって、キャッチコピーとか言葉の伝わりやすさや印象というのは変わってきます。でもWebサイトでは、日本語というのは英語よりも改行が入れにくいものです。というのも単語ごとにスペースで区切る英語と違って、日本語は単語ごとにスペー...
JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。そこで、限られた範囲に多くの情報を載せられるのがスライダー（カルーセル）です。スライダーを実装するとき、よく使わ...
空要素に:emptyでスタイルを指定したのになぜか効かない・・・。:emptyの意外な落とし穴
テキストも画像も入っていない空のHTML要素ってありますよね。特にPHPのような動的に生成したHTMLでは、場合によって中身が空の要素が出てくることが多いと思います。しかし、ムダな余白を作ったり親要素でFlexやGridなどを指定していると...
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。mimihokuro（みみほくろ）です。みなさんはWebデザインでアイコンをつけたいとき、何を使いますか？画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。...
text-align: justifyでテキストを両端揃えにしたら文字間が開きすぎた・・・。word-break:break-allで解決！
サイト構築する上で長文のテキストを表示することはよくあると思います。でも左右に寄せたテキストを改行したとき、端に余分なスペースができて見た目が悪いな、ってことありませんか？そんなときに役立つのがtext-align: justify;！改行...
Tailwind CSSを導入したいけどスタイルが反映されない？Unknown at rule @tailwind エラーを解消する3つの方法
クラス名を考える必要がなかったり、HTMLとCSSを行き来しながらコーディングする必要がないなど、モダンなフロントエンドで人気のあるTailwind CSSですが、導入時に躓きやすいのが難点です。公式サイトの「Get started」ページ...
