本記事では、CSSのflex-directionプロパティの使い方について詳しく解説しています。 【flex-directionプロパティとは？】 先輩！flex-directionプロパティって何ですか？ flex-directionは、主軸の方向を定義することでフレックスアイテムの配置を制御を...

本記事では、CSSのflex-wrapプロパティの使い方について詳しく解説しています。 【flex-wrapプロパティとは？】 先輩！flex-wrapプロパティって何ですか？ flex-wrapは、display:flexで横並び・縦並びになったアイテムを1行で表示させるか折り返して表示さ...

本記事では、display:flexで横並びになったアイテムを縦並びにする方法について解説しています。 【flex-directionを使う】 結論から申し上げますと、display:flexで横並びになったアイテムを縦並びにするにはflex-directionプロパティにcolumnの値を指定...

本記事では、CSSのdisplay:flexを指定した要素を右寄せする方法について解説しています。 【justify-contentで右寄せする】 display:flexを指定した要素を右寄せするには、justify-contentプロパティにflex-endの値を指定します。 .sample { display: flex...

本記事では、display:flexを指定した要素の縦横(上下左右)を中央寄せする方法について解説しています。 【2つのプロパティを組み合わせる】 display:flexを指定した要素の縦横を中央寄せする方法はとても簡単で、「align-items」「justify-content」の2つ...

本記事では、display:flexで横並びにしたコンテンツを折り返しにする方法について解説しています。 【flex-wrapを使う】 結論から申し上げますと、コンテンツを折り返しするにはflex-wrapプロパティを使用します。使い方は以下のとおりです。 flex-wrap:wr...

本記事では、CSSで要素の左上・右上・右下・左下のみ角を丸くする方法について解説しています。 2通りの書き方があるので、使いやすい方を選んでください！ 【サンプルコード】 色付き正方形が表示されるサンプルコードを用意しました。実際に手を動かしな...

本記事では、borderの線を単色ではなくグラデーションカラーにする方法について解説しています。 【グラデーションカラーにする方法】 borderの線をグラデーションカラーにする、必要最低限のプロパティは以下のとおりです。 border-width：線の幅の指定 b...

本記事では、borderプロパティで指定することが線の種類について紹介しています。 【線の種類】 線の種類・説明を載せたテーブル表を作成したので、ご参考ください！ 値説明solid実線double二重線dotted点線dashed破線groove立体的にくぼんだ線ridge内側全...

本記事では、CSSのborderプロパティで表示される枠線を上下左右ばらばらに指定する方法について解説しています。 【上にだけ線を表示させる】 borderの線を上にだけ表示させるには「border-topプロパティ」を使用します。基本的な使い方は以下のとおりです...