【CSS】テキストを左揃え、右揃え、中央揃え

【CSS】テキストを左揃え、右揃え、中央揃え
この記事は約2分で読めます。
スポンサーリンク

テキストの中央揃え、右揃え、左揃えはページを作っていると必ず出てくる指定の一つ。
それらの指定プラス、行が多くなった時に綺麗に見える指定方法を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(ジャスティファイ)」ってかっこいい名前だよね。
最終行を除いて左右ピッタリに縦の線がそろうから、長い文章だと見栄えがイイ。
でも、単語間、字間がまちまちになるから失読症などを抱えた人にとっては、読みづらい文章になっちゃうから注意が必要。

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました