CSSで両端を揃えるように設定するにはどうすればよいですか?さまざまな手法の簡単な分析

Web サイトのレイアウトでは、テキストの配置は非常に重要な部分です。通常は、左揃え、中央揃え、右揃えを使用します。ただし、場合によっては、「justified」とも呼ばれる justified を使用する必要があります。両端揃えによりテキストが均等に配置され、視覚的なインパクトが向上します。現代の Web デザインでは両端揃えはますます一般的ではなくなりましたが、必要な場合には依然として非常に便利なテクニックです。

両端の位置合わせを行う方法はたくさんあります。この記事では、基本的な CSS から高度なテクニックまで、最も一般的なテクニックのいくつかを取り上げます。

基本的な CSS のヒント

基本的な CSS のヒントは、配置を達成するための最も簡単な方法ですが、場合によっては最良の方法です。以下に示すように、text-align 属性を使用してテキストを両端揃えに設定できます。

p {
  text-align: justify;
}

この単純な CSS ルールは、段落テキストの両端を揃えます。これにより、状況によっては非常に良い結果が得られる場合もありますが、他の状況ではそれほど良い結果が得られない場合もあります。これは、CSS を両端揃えにすると、テキストの各行が幅全体に収まり、間隔が不均等になるためです。見た目は良くないかもしれませんが、これを修正する方法がいくつかあります。これを行う簡単な方法は、文字間隔プロパティを使用してカーニングを増やすことです。

p {
  text-align: justify;
  letter-spacing: 2px;
}

これにより、段落テキスト間に 2 ピクセルのスペースが追加されます。ただし、これにより、一部の単語が複数の単語に分割されたり、不適切な場所で改行されたりする可能性があります。ただし、テキストが主に英語である場合、これはあまり問題になりません。ただし、テキストが中国語の場合は、中国語と英語の間のカーニングを増やすことができます。

単語が分割されるのを避けるために、別の CSS プロパティ text-justify を使用できます。 text-justify は、テキスト行の配置方法を制御する CSS3 の一部です。この属性には、auto、none、および inter-word の 3 つの値を使用できます。 auto がデフォルト値で、行は左、右、中央のタイプに揃えられます。 inter-word は、単語間の間隔と単語間の間隔を使用して、両端の位置合わせを実現します。もちろん、特に単語の途中に不規則な空白文字が表示される場合があります。これは通常、さまざまな言語間の違いが原因で発生します。

単語をそのままの状態に保つもう 1 つの方法は、単語の折り返しを使用することです。これにより、長い単語が適切な場所で分割され、単語の分割が回避されます。次のスタイル ルールを使用できます。

p {
   text-align: justify;
   word-break: break-all;
}

これにより、単語がどこでも分割され、テキストが余白に配置されます。これは、letter-spacing プロパティよりも複雑ですが、英語のテキストを揃える必要があるシナリオでは、考慮すべきオプションです。

高度な CSS ヒント

上記の CSS ヒントは、単純な Web プロジェクトに適しています。ただし、単語やテキストの書式を崩さずにテキストを均等に配置したい場合は、高度なテクニックが必要になる場合があります。

Flexbox を使用してコンテナ内に子要素を均等に分散する

Flexbox レイアウトは、Web サイトの制御とレイアウトを向上させる新しい CSS レイアウト システムです。最新のブラウザの Flexbox 機能を使用して、両端の位置合わせを行うことができます。 Flexbox レイアウトを使用するには、コンテナに display:flex を設定する必要があります。

.container {
  display: flex;
  justify-content: space-between;
}

このスタイル ルールは、独自の形式を維持しながら、コンテナ内のすべての要素を均等に分散します。 space-between 値により、コンテナ内の子要素間に適切な空白が確保され、それによって位置合わせが行われます。このアプローチには、レスポンシブ デザインを通じてさまざまな画面サイズに適応できるという利点もあります。

CSS グリッドを使用してコンテナ内で子要素を均等に分散する

CSS グリッドは、Flexbox よりも柔軟で強力なもう 1 つの最新の CSS レイアウト システムです。グリッドを使用して両端での位置合わせを行うことができます。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

このルールは多くのことを行います。まず、コンテナをグリッドにし、繰り返しグリッドの列数と各列の最小幅と最大幅を設定します。次に、子要素を区切るためのスペーサーを定義します。最後に、子要素を均等に配置するように justify-items プロパティを設定し、コンテナ内のすべての子要素を垂直方向の中央に配置するように align-items プロパティを設定します。この方法には専門的な CSS スキルが必要ですが、結果は非常に効果的です。

結論

両端揃えはすべての Web サイトのデザインに不可欠な要素ではありませんが、視覚効果を向上させることができる非常に便利なテクニックです。 text-align プロパティを使用した基本的なものから、Flexbox とグリッド レイアウトを使用した高度なものまで、この記事では位置合わせを実現するためのさまざまなテクニックを説明します。 Web サイトのニーズに関係なく、これらのヒントは Web サイトの読みやすさと美しさを向上させるのに大いに役立ちます。

以上がCSSで両端を揃えるように設定するにはどうすればよいですか?さまざまな手法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。