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つの手順に分けて解説するね！ サンプルコード <!DOC...

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