Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - 文字の位置を調節してみよう

文字の位置を調節してみよう

みなさまいかがお過ごしでしょうか。

続きまして文字の位置を調整してみましょう。

ではいつもどおり、以下のHTMLファイルを用意してください。class属性に値を振ってあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中!</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<p class="text_left">左寄せの文字だよ</p>
<p class="text_center">中央寄せの文字だよ</p>
<p class="text_right">右寄せの文字だよ</p>


</body>
</html>

それと今回は練習がてら外部からCSSを呼び出してみましょう。同じ階層に『style.css』というファイル名のCSSファイルを用意してください。

外部CSSファイルの場合は文字エンコーディングの指定をするのを忘れないようにしてくださいね。
※忘れちゃった方はこちら

今回勉強する文字の位置とは左寄せ、右寄せ、中央寄せの3つです。

これらは全て『text-align』プロパティで指定できます。読み方は「テキストアライン」です。

左寄せにする場合は『left
中央寄せにする場合は『center
右寄せにする場合は『right
と値に記述します。

では早速クラスセレクタとセットで記述してみましょう。今回はp要素に対するクラスセレクタで指定してみます。

@charset "utf-8";

p.text_left {
    text-align: left;
}
p.text_center {
    text-align: center;
}
p.text_right {
    text-align: right;
}

さて、では保存してHTMLファイルをブラウザで確認してみましょう。位置の変更がちゃんとできてますでしょうか。

ちなみに『text-align』プロパティはデフォルトでは左寄せになっています。なので値に『left』と指定しても見た目の変化はありませんのでご注意ください。

文字の位置調整の注意点として元々の要素(この場合はp要素)の大きさの中の左寄せ、中央寄せ、右寄せという形になります。今後勉強する『width』プロパティなどで元々の要素の大きさが文字幅ぴったりの横幅に変更されていた場合などは『text-align』プロパティでいくら値を指定しても視覚的に変化はありません。

そしてちょっとややこしいのですが『text-align』プロパティは内包されているブロックレベル要素などには影響を与えません。あくまでもインラインレベル要素やインラインブロック要素の位置を変更するプロパティとなります。

次の記事ではこのブロックレベルとインラインレベルについて勉強していきましょう。ちょっとややこしい項目となりますが頑張っていきましょうね。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。