シェアする
Adjusting Text Position - Japanese Only
みなさまいかがお過ごしでしょうか。
続きまして文字の位置を調整してみましょう。
ではいつもどおり、以下の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』プロパティは内包されているブロックレベル要素などには影響を与えません。あくまでもインラインレベル要素やインラインブロック要素の位置を変更するプロパティとなります。
次の記事ではこのブロックレベルとインラインレベルについて勉強していきましょう。ちょっとややこしい項目となりますが頑張っていきましょうね。
ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
