HTML/CSS– category –

本記事では、divタグ(ブロック要素)が中央寄せされない時・margin:0 autoが効かない時の原因と対処法について解説しています。 divタグが中央寄せされない原因 先輩！divタグの中央寄せが出来ません。。 margin:0 auto;は指定している？ はい、指定してい...

本記事では、data属性でスタイルを適用させる方法について解説しています。 data属性を使う必要性 先輩！data属性を使う理由って何ですか？別にclassを使ってスタイルを適用させればいいと思うんですけど。。 classを使っても同様にスタイルを適用すること...

本記事では、CSSのpositionプロパティの解除方法について解説しています。 position:static positionプロパティの値をリセットする方法はとても簡単で、position:staticで上書きします。 .elem { position:static; } staticは、positionプロパティの初期値...

本記事では、position:absoluteを使って中央寄せする方法について解説しています。 position:absoluteで中央寄せする手順 先輩！position:absoluteで中央寄せする方法を教えてください！ 了解！3つの手順に分けて解説するね！ サンプルコード <!DOCTYPE...

本記事では、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; ju...

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

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