テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。
それらの指定プラス、行が多くなった時に綺麗に見える指定方法をDEMOと一緒に見ていきましょう。
中央揃え
初めての真ん中ブログ
CSS
p { text-align: center; }
中央揃えの場合、目的のタグまたはその親要素に「center」を指定します。
親要素の幅が基準になるので、親要素の幅を工夫することでいい感じの見た目が実装出来ます。
テキストの指定プロパティは「text-align」。
「text-align」の指定は、とても直感的で好き。
真ん中とか、左とか、右とか、「じゃすてぃふぁい」とか。
左揃え
左側の初めてのブログ
CSS
p { text-align: left; }
左揃えの場合もまた、目的のタグか親要素に「left」を指定。
どんな時にでも左に寄るので、「padding-left」で左側のコンテンツやコンテナとの間隔を調節して読みやすいテキストを表現してね。
右揃え
初めてのブログ右側
CSS
p { text-align: right; }
右揃えの場合も一緒。
目的のタグか親要素に「right」を指定。
日本語だと、工夫しないと読みにくいレイアウトになりがちな「右寄せ」。
横幅ぴったりに合わせる左揃え
初めてのブログのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
CSS
p { text-align: justify; }
横幅ぴったりに合わせる左揃えの場合、目的のタグまたはその親要素に「justify」を指定します。
「justify(ジャスティファイ)」ってかっこいい名前だよね。
最終行を除いて左右ピッタリに縦の線がそろうから、長い文章だと見栄えがイイ。
でも、単語間、字間がまちまちになるから失読症などを抱えた人にとっては、読みづらい文章になっちゃうから注意が必要。
コメント