検索

キーワード


【HTML/CSS】text-align,vertical-alignの使い方

  • 公開日:2020-09-16 23:44:36
  • 最終更新日:2020-11-17 00:49:57
【HTML/CSS】text-align,vertical-alignの使い方

こんにちは。駆け出しプログラマーの松下です!

HTMLで文字や画像の位置を変えたいときに使えるプロパティを紹介します。

HTMLを学び始めたばかりという方の参考になれば幸いです!


text-alignとは

text-alignプロパティは、文字や画像を右や左、中央などに位置を揃える時に使う、横方向の揃え方を指定するCSSのプロパティです。

{text-align:値;}とCSSファイルに記述し、値にはテキストを左に配置する場合はleft、右にはrightという要領で入力します。

左から右へ書く言語の場合、デフォルトはleft値になっています。

<h1>左に寄せる</h1>
 
<h2>右に寄せる</h2>
 
<h3>真ん中に寄せる</h3>
h1{text-align:left;}
 
h2{text-align:right;}
 
h3{text-align:center;}

text-alignの使用例


画像を寄せる

text-alignプロパティは、インライン要素に対して使うことはできません。

imgタグはインライン要素なので、画像に適用したいときは<div>で囲ってブロック要素に変換します。

<div class="gazou">
 <img src="ねこ.jpg" width="150" height="250" alt="">
</div>
.gazou{text-align:right;}

画像へのtext-alignの使用例

縦方向に位置を揃えたいとき

縦方向の位置を変えたいときは、vertical-alignプロパティを使います。

基本的にインライン要素に適用し、行ボックスの高さの範囲内での縦方向の位置を指定します。

<span class="big">テキスト</span>
指定なしで表示
<span class="test1">topで表示</span>
<span class="test2">bottomで表示</span>
.big{font-size:80px;}

.test1{vertical-align:bottom;}

.test2{vertical-align:top;}

vertical-alignの使用例



関連記事リンク:【HTML/CSS】divタグの使い方



【著者】

松下

今年文系未経験からプログラマとなりました。 同じ初心者の方に分かりやすいよう簡潔な記事を心がけていきます。 趣味はサッカー観戦と洋服です。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ