HTMLでテキストを下寄せに配置する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでテキストを下寄せに配置する方法について解説しています。最初にCSSのpositionプロバティを使ったテキストの配置方法の基本を学習します。次に下寄せにする場合の書き方と画面上での見え方を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLでテキストを下寄せに配置する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

テキストを下寄せに配置する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

テキストの位置

通常、文章を記述した場合は上から下へ、左から右へと表示され、他のブロック要素なども上から下へ縦に表示されていきます。

テキストを書く場合にはpタグなどで囲んで記述をした場合、そのpタグに書かれたテキストの集まりは、各コンテンツとしてそれぞれのブロックの中にまとめられてくでしょう。

そのブロックを親要素と呼び、その中にあるpタグなどの要素は子要素と呼びます。

親要素の中に配置された子要素は、CSSのpositionプロバティで表示したいテキスト位置を指定していきましょう。

 

様々な配置方法

positionプロパティの標準の値はstaticです。

positionプロパティを使う場合にはstatic以外の値を使用しましょう。

position:absoluteで親要素に対して、絶対的な位置で配置場所を指定をすることが可能です。

 

position:relativeでもともとの表示位置から適宜の位置へ動かすように、配置指定をすることができるでしょう。

position:fixedではbody要素を基準として絶対的に配置場所を決めることができます。

positionプロパティを使う場合には、配置場所の指定をする必要があります。

実際の配置には、top,bottom,left,rightの各プロパティをpositionプロパティと共に記述し、指定することが可能です。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

下寄せに配置してみよう

下寄せに配置する場合、下寄せにしたい要素をposition:absoluteとbottom:0;を共に記述することで一番下に配置することが可能です。

しかし、親要素の指定をしない場合にはbodyに対して一番下となってしまうため、親要素にクラスをあて、position:relativeで基準のブロックとしておく必要があります。

今回は余白部分を無くし要素の中の一番下となるように、marginとpaddingを共に0としてみましょう。

(htmlファイル)

<div class="test1">

<pclass="test2">テキスト テキスト テキスト テキスト テキスト </p>

</div>

(cssファイル)

.test1{

position: relative;

height: 200px;

background-color: gray;

}

.test2{

position: absolute;

bottom: 0;

margin: 0;

padding: 0;

}

bodyのbackground-colorをblackとした場合に画像にようになっていれば成功です。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLでテキストを下寄せに配置する方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。