Caution

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

CSS
入門編

トップページ
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』プロパティは内包されているブロックレベル要素などには影響を与えません。あくまでもインラインレベル要素やインラインブロック要素の位置を変更するプロパティとなります。

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

ではではー。

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