CSSのjustify-selfプロパティは、グリッドアイテムがセル内で水平方向にどのように配置されるかを指定します。このプロパティを使用すると、各アイテムごとに配置を調整することができます。
justify-selfプロパティの値とその効果の一覧
start– アイテムをセルの左端に配置します。end– アイテムをセルの右端に配置します。center– アイテムをセルの中央に配置します。stretch– アイテムをセルの幅いっぱいに広げます。
注意点や関連情報
justify-selfプロパティは、グリッドレイアウトで使用されることが多く、アイテムの配置を細かく調整する際に非常に便利です。stretchはデフォルトの動作であり、アイテムはセルの幅全体に引き伸ばされます。justify-selfは、水平方向の配置を指定しますが、垂直方向の配置にはalign-selfプロパティを使用します。
justify-selfプロパティが効かない時の原因と対策
displayプロパティがグリッドレイアウトに設定されていない
justify-selfプロパティは、グリッドレイアウト（display: grid;）でアイテムを水平方向に配置するために使用されますが、要素がグリッドレイアウトとして設定されていない場合、このプロパティは効果を発揮しません。
対策: 親要素にdisplay: grid;を指定し、グリッドレイアウトを有効にしてください。例えば、display: grid;と指定したうえで、個々のグリッドアイテムに対してjustify-self: center;などを指定します。
グリッド全体のjustify-itemsが優先されている
親要素にjustify-itemsプロパティが設定されている場合、すべてのグリッドアイテムに共通の配置が適用され、個別のjustify-selfプロパティが上書きされることがあります。
対策: justify-selfを適用したいグリッドアイテムがある場合、justify-itemsが上書きしていないか確認し、必要に応じてjustify-itemsを調整します。また、justify-selfを優先するために、特異性を高めたCSSルールを適用することも検討します。
align-selfやmarginが影響している
align-selfやmarginプロパティが個別のアイテムに設定されている場合、justify-selfの効果が上書きされてしまうことがあります。
対策: アイテムに適用されたalign-selfやmarginがjustify-selfと競合していないか確認し、必要に応じて調整します。例えば、margin: 0 auto;が設定されていると、中央寄せが優先されることがあります。
共通するCSSコード
.css-sample-container {
display: grid;
width: 100%;
margin: 20px 0;
text-align: center;
gap: 10px;
border:1px solid #000000;
}
.css-sample-item {
padding: 20px;
background-color: #cce7ff;
}
justify-self: start;
アイテムをセルの左端に配置します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-justify-self-start">Start</div>
</div>
CSSコード
.css-sample-justify-self-start {
justify-self: start;
}
表示結果
justify-self: end;
アイテムをセルの右端に配置します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-justify-self-end">End</div>
</div>
CSSコード
.css-sample-justify-self-end {
justify-self: end;
}
表示結果
justify-self: center;
アイテムをセルの中央に配置します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-justify-self-center">Center</div>
</div>
CSSコード
.css-sample-justify-self-center {
justify-self: center;
}
表示結果
justify-self: stretch;
アイテムをセルの幅いっぱいに広げます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-justify-self-stretch">Stretch</div>
</div>
CSSコード
.css-sample-justify-self-stretch {
justify-self: stretch;
}
表示結果
まとめ
justify-selfプロパティは、グリッドアイテムの水平方向の配置を制御します。- 主な値としては
start、end、center、stretchがあります。 - デフォルトでは
stretchが適用され、アイテムがセルの幅いっぱいに広がります。 - 垂直方向の配置には
align-selfプロパティを使用します。