menu
menu

text-align(フォント・テキスト)【CSSリファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0

text-align(フォント・テキスト)【CSSリファレンス】

  • CSS

text-align

こんにちは(・∀・)

 CSSプロパティのご紹介です。今回ご紹介するCSSプロパティはtext-alignです。

概要

 text-alignプロパティを使用して行揃えの位置・均等割付(ブロックレベル要素)の指定を行います。



.sample {
	text-align: left;
}
適用要素

 ブロックレベル要素

指定できる値
left
左寄せで表示します。
center
中央で表示します。
right
右寄せで表示します。
justify
両端揃えで表示します。
初期値

 left

サンプルデモ

左寄せ

中央

右寄せ

The waiting's almost over for those of you eager to strap an Apple wearable to your wrist, with pre-orders for the Apple Watch starting on April 10 and the device available to buy from ...

HTML

<p class="demo1">左寄せ</p>
<p class="demo2">中央</p>
<p class="demo3">右寄せ</p>
<p class="demo4">The waiting's almost over for those of you eager to strap an Apple wearable to your wrist, with pre-orders for the Apple Watch starting on April 10 and the device available to buy from ...</p>
CSS

.demo1 {
	text-align: left;
}
.demo2 {
	text-align: center;
}
.demo3 {
	text-align: right;
}
.demo4 {
	text-align: justify;
}
  • カテゴリー:CSS
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0