HTML

CSSで複数のセレクタに同一のプロパティ、値を指定したいと思ったことはありませんか。デザインの関係上、そういったことを考えることは少なくないのではないでしょうか。

今回はそんな悩みを解決するべく、CSSで複数のセレクタに同一のプロパティ、値を指定する方法を解説していきたいと思います。

結論：CSSで複数のセレクタに同一のプロパティ、値を指定したいときはセレクタ間に『,(カンマ)』を入れる

HTMLでリストを作成したときにデフォルトで振られているリストの左の点(・)がデザインの妨げになってしまうことはありませんか。今回はそれを消して、更なるデザインの向上に繋げる方法を解説していきます。

結論：リストの数字、点を消すときはCSSで『list-style: none;』を使う

ａタグなどでリンクを作成した際、デフォルトで下線が付くようになっています。

この下線があっても問題がないデザインにするのであれば何も変更はありませんが、今回はそのリンクの下線が必要のない場合、どのように消すのかを説明していきます。

結論：CSS『text-decoration: none;』でリンクの下線を消す

カーソルが重なったタイミングで背景色が変わったり、字が太くなったりすることで、ユーザーにボタンを押させたような錯覚を与えることができるような機能の付け方に悩んだことはありませんか。

今回はCSSの疑似クラス『hover』を使用してそれらを解決する方法を説明していきます。

オンラインショッピングサイトの商品紹介ページにあるような横に3つの商品が並び、折り返して下の段にさらに3つ並んでいくデザインをあなたも見たことがあるのではないでしょうか。

今回はそのような横並びされたリストを折り返しすることを可能にするCSSを解説していきたいと思います。

結論：リストの親要素に『flex-wrap: wrap;』を指定する