CSS

【初心者CSS】text-alignをちゃんと理解する|要素を中央揃えにする

 

イケゾー
この記事は、こんな人におすすめ!
・CSS「text-align」をちゃんと使いこなしたい
・要素を中央揃えにしたい

 

このような疑問にお答えします。

 

本記事の内容

  • 「text-align」の使い方
  • 「text-align」の書き方
  • 合わせて覚えたい!縦方向の揃え方「vertical-align」

 

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

 

CSSを勉強し始めると、「text-align」はよく使いますね。
文字や画像を中央揃えにするものですが、なかなかイメージがしにくいものです。

本記事では、初心者の方でも理解しやすいように、サンプルコードを載せております。
じっくり触って学習に使ってください。

それでは、どうぞ!

 

 

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

はじめに

基本的なHTML,CSSは準備できていることを前提に進めていきます。
不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

それでは本題に入っていきましょう
イケゾー

 

「text-align」の使い方

 

「text-align」は文字や画像に対して、水平方向の揃え方を指定するものです。

まずは、サンプルを見てみましょう。
CSSのタブをクリックしてください。

サンプルソースコード

See the Pen
by いけぞー@WEB始めたて先生 (@ikezoooblog)
on CodePen.

 

サイト制作で必ず使うテクニックだね
イケゾー

 

「text-align」の書き方

実際の書き方を解説していきます。

 

HTMLの解説

下記のようなHTMLがあるとします。

<h1>左に寄せる</h1>
 
<h2>右に寄せる</h2>
 
<h3>中央に寄せる</h3>

 

CSSの解説

それぞれの見出しタグに、下記のCSSを適応させます。

h1 {
  text-align: left;
}
h2 {
  text-align: right;
}
h3 {
  text-align: center;
}

 

頻繁に使うので覚えよう
イケゾー

 

画像に使う場合は、<div>タグで囲む

「text-align」を画像に使う場合は、注意が必要です。

 

「text-align」は、ブロック要素(pタグや、見出しhタグ)に対してのみ使えます。
したがって、インライン要素(aタグ、imgタグ、soanタグ)には使えません。

画像のimgタグに使用するためには、<div>タグで囲ってブロック要素に変換します。

See the Pen
「image」text-align
by いけぞー@WEB始めたて先生 (@ikezoooblog)
on CodePen.

 

よくある失敗なので覚えておこう
イケゾー

 

合わせて覚えたい!縦方向の揃え方「vertical-align」

せっかくなので、縦方向の揃え方も覚えましょう。

縦方向を揃えるのは、「vertical-align」です。
>>詳しくは公式ドキュメントををご覧ください。

こちらもたまに使います
イケゾー

 

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

 

まとめ

「text-align」の使い方を解説しました。
サイト制作では頻出のテクニックなので、ぜひ習得してください。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS