Home-theater-designers
すべての開発者がワードプロセッシングを理解するときに学んだ最初の機能の1つは、テキストの配置でした。その小さなツールは、プロのタイプセッターとアマチュアのチラシデザイナーの両方にとって不可欠です。 Webデザインに関して、CSSがテキストの配置をサポートしているのは当然のことです。
NS text-align プロパティは、他の1つまたは2つとともに、要素がテキストを水平方向に配置する方法を制御します。基本を超えて、ブラウザは徐々により多くの仕様を実装していますが、完全なサポートは異なります。テキストを揃える方法と、一般的なブラウザが現在サポートしている機能について学びます。
CSStext-alignプロパティの基本
アラインメントは、最もよく知られているタイポグラフィ用語の1つです。 CSSのコンテキストでは、 text-align 水平方向の配置を指します。
水平方向のテキスト配置は、ブロックコンテナにのみ適用されます。これらは、段落やdivなどの全幅要素です。を使用して text-align 次のようなインライン要素のプロパティ の 効果はありません。リストアイテムとテーブルセルを揃えることもできます。
インターネットを必要としない楽しいゲーム
デフォルトでは、左から右の言語（これについては後で詳しく説明します）では、テキストは左揃えになります。
CSSでは、これは次と同じです。
p { text-align: left; }または：
p { text-align: start; }関連している： カスケードスタイルシートとは何ですか？CSSは何に使用されますか？
他の値を使用できます text-align 水平方向の配置を変更するプロパティ。最も一般的な値は、ワードプロセッシングアプリでよく知られています。
text-align: left
text-align: center
text-align: right位置合わせを使用して左端と右端を揃える
の別の一般的な値 text-align は 正当化する 。ブラウザは、両端揃えのテキストにスペースを追加して、各行が使用可能なスペースを埋めるように拡張します。
テキストを正当化する場合、最後の行は注意が必要です。非常に短い場合があるため（おそらく1語だけ）、幅全体に間隔を空けるのは醜い場合があります。デフォルトでは、両端揃えのテキストでも最終行が左に揃えられます。
ランダムな女の子に尋ねる方法
別の効果が必要な場合があります。ブラウザの実装は仕様に追いついていますが、2つのアプローチが可能です。
NS 正当化-すべて 値は、ブラウザが最後の行を他のすべての行と同じように扱い、それを全幅に拡大することを意味する必要があります。ただし、執筆時点では、この値をサポートしているブラウザはありません。あなたはできる 彼らがそうするかどうか見るためにcaniuseをチェックしてください この記事を読んでいるとき。
別のCSSプロパティ、 text-align-last 、より柔軟で、より良いサポートがあります。あなたはそれを多かれ少なかれ同じように扱うことができます text-align 、ただし、最終行にのみ適用されます。
このプロパティのブラウザサポートは優れていますが、完全ではありません。また、 使用する前にcaniuseを確認してください 。ブラウザがこのプロパティを認識しない場合、ブラウザはそれを無視します。
テキストの配置と読み方
アラビア語やヘブライ語など、右から左に読む言語を使用している可能性があります。 CSSは 方向 これを指定するプロパティ。次に例を示します。
direction: rtl;これらの言語は通常、デフォルトでテキストを右に揃えます。
指定する代わりに 左 / 右 、テキストを整列するための好ましい方法は、値を使用します 始める と 終わり 。これは、テキストを各行の先頭に並べるか、最後に並べるかを指定します。左から右の言語では、 始める と同等です 左 。右から左への言語では、テキストは右から始まり、左で終わります。
なぜ私のラップトップはとても暑いのですか
使用する 始める また 終わり つまり、テキストの方向に関係なく、配置は一貫しています。
要素がtext-alignプロパティを継承する方法
あなたは注意する必要があります text-align プロパティは継承します。たとえば、 体 要素、それはページ上のすべての要素に適用されます。もちろん、どの要素でもオーバーライドできます。
text-alignプロパティを使用してレイアウトを制御する
あなたは使用することができます text-align ブラウザがテキストを水平方向にレイアウトする方法を定義するCSSプロパティ。最も一般的な値は 左 、 右 、 中心 、 と 正当化する 。これらはかなり簡単ですが 正当化する いくつかの複雑さをもたらします。
テキストの配置は慎重に使用する必要があります。看板やポスターでは、中央揃えが適切な場合がありますが、テキストの長いブロックが読みにくくなる可能性があります。通常、テキストの行が長いほど、位置揃えが読みやすくなります。テキストの短い列を揃えると、見苦しい間隔が作成される可能性があります。
NS text-align プロパティは、便利なフォーマットと基本的な配置を提供する多くのCSSプロパティの1つです。
共有 共有 つぶやき Eメール 10分で学ぶことができる10の簡単なCSSコード例CSSのサポートが必要ですか？これらの基本的なCSSコード例を最初に試してから、独自のWebページに適用してください。
次を読む 関連トピック- プログラミング
- ウェブ開発
- ウェブデザイン
- CSS
ボビーは、20年のほとんどの間ソフトウェア開発者として働いた技術愛好家です。彼はゲームに情熱を注いでおり、Switch Player Magazineのレビュー編集者として働いており、オンラインパブリッシングとウェブ開発のあらゆる側面に没頭しています。
ボビージャックのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください