文字の左右・中央揃え【text-align】:CSS入門

ブログが作りたい!CSS入門 > 文字の左右・中央揃え【text-align】:CSS入門

文字の左右・中央揃え【text-align】:CSS入門

文字の左右・中央揃え【text-align】:CSS入門

CSS入門(21)

今回は、text-alignを使って、文字の行揃え(左右・中央揃え)を行います。文章を左に寄せたり、右に寄せたりする方法です。

お話は、次の順番で進みます。

▲ページの先頭に戻る

中央揃え(text-align:center)を試してみる

h1大見出しを、中央揃えにしてみます。

1:前回までのお話

(01)

前回は、letter-spacingを使って、文字の間隔を調整しました。ちなみに最近は、安室奈美恵さんに夢中です。

letter-spacingを使って文字の間隔を調整

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:中央揃えにする(text-align:center)

(02)

h1大見出しを、中央揃えにしてみましょう。中央揃えは、利用度がけっこう高いので、覚えておくと便利です。

左右・中央揃え

h1大見出しを、中央に配置したい場合は、例えば、次のように書きます。text(文)を、center(中央)にalign(並べる)するわけです。

h1 { text-align: center; }

ちなみに、左揃えの場合は、次のように書きます。左だから、leftです。

h1 { text-align: left; }

もちろん、右揃えの場合は、次のように書きます。右だから、rightです。

h1 { text-align: right; }

(03)

CSSコードに、追加書きしておきましょう。

(04)

ブラウザで表示してみてください。h1大見出しが中央揃えになっているはずです。

h1大見出しの中央揃え

時間に余裕があれば、左右も試してみてください。

▲ページの先頭に戻る

均等割付けする(text-align:justify)

実は、text-alignには、もうひとつ「justify」という指定値があります。これを使うと、文字列を均等に揃えてくれます。

ただ、日本語に関しては、各ブラウザ(バージョン)によってサポート状況が違います。うまくいくかは、分かりかねます。

(01)

均等割付け(justify)は、うまい具合にズレている文章がないと分かり難いのですが、たまたま紹介文がズレているので試してみましょう。

文章のズレ

(02)

段落pタグに、「text-align: justify;」を追加書きします。

(03)

均等割付け(justify)されました。

しかし、これは Firefoxのような正常なブラウザで表示しているからかもしれません。

均等割付け(justify)された

(04)

他のブラウザ(バージョン)のことも考えて、text-justifyを使っておくと良いようです。

あるいは、こんな感じ。

text-justifyについては、HTMLクイックリファレンスさんの「text-justify」を参考にさせていただきました。ありがとうございました。

▲ページの先頭に戻る

次回予告

次回は、幅(width)と、高さ(height)について書く予定です。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/05 更新日:2008/05/05

« 「文字の間隔【letter-spacing】」|「幅と高さを決める【width、height】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/287-25c4b124
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて