CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSテキストの配置


テキストの配置

このtext-alignプロパティは、テキストの水平方向の配置を設定するために使用されます。

テキストは、左揃えまたは右揃え、中央揃え、または両端揃えにすることができます。

次の例は、中央揃え、および左右揃えのテキストを示しています(テキストの方向が左から右の場合は左揃えがデフォルトであり、テキストの方向が右から左の場合は右揃えがデフォルトです)。

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

プロパティが「正当化」に設定されている場合、text-align各行が同じ幅になるように各行が引き伸ばされ、左右の余白がまっすぐになります(雑誌や新聞のように)。

div {
  text-align: justify;
}

テキストを最後に揃える

このtext-align-lastプロパティは、テキストの最後の行を揃える方法を指定します。

テキストの最後の行を3つの<p>要素に揃えます。

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

テキストの方向

directionおよび unicode-bidiプロパティを使用して、要素のテキストの方向を変更できます

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

垂直方向の配置

このvertical-alignプロパティは、要素の垂直方向の配置を設定します。

テキスト内の画像の垂直方向の配置を設定します。 

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}