CSS

横並びにしたリストはデフォルトでは左寄せで、リスト内のそれぞれの要素には余白もなく、詰まった印象を与えます。

これを中央寄せにしたり、間隔を均等にしたり、デザインに合わせてそのリストの位置をそれぞれ変えたいと思ったことはありませんか。

この記事ではそれらを可能にするCSSのプロパティである『justify-content』の使い方について解説していきたいと思います。

CSSで要素を中央寄せしたいけど、どうしても動かせない、そんなことはありませんか。今回はCSSで要素を中央寄せする方法を３つ紹介したいと思います。この３つの方法を使えば、イメージ通りのデザインを完成させることができるでしょう。それではCSSで要素を中央寄せする方法を紹介していきます。

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

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

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

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

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

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

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

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

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

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

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

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

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