「テキストやdivを下揃えにしたいんだけどどうやるの?」CSSで文字やdivを下揃えする方法を4つ紹介します。<div>右</div></div>「display:flex」は子要素の位置を調整できるCSSです。「align-items」はflex内の子要素の縦の位置を調整するCSSです。flex-end」を指定すると下揃えにできます。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。横並びしている要素の高さがばらついているから親要素の高さに合わせたい!CSSで子要素の高さを親に合わせる方法を解説します。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。<div>右</div></div>「display:inline-block」はブロック要素とインライン要素両方の特徴を合わせ持つようにさせるCSSです。横並べさせつつwidthを指定することなどができます。画像はこれで揃えることができます。画像を横並べしたとき、画像の高さが異なると当然上寄せ、中央寄せ、下寄せのいずれかになります。その位置を任意で指定するために、横並べした画像を上寄せ・下寄せにする方法を紹介します。この記事を読むただしこの方法ではインラインの特性上左右に隙間ができてしまいます。これはhtmlソースの空白も詰めてしまうと消すことができますが、やっかいと感じるのであればflexの方法をおススメします。inline-blockはもともと下揃えする特徴があります。厳密に言うとベースライン(文字のライン)がそろっており、padding-bottomが違うと下揃えにならないので注意です。bottom」を指定すると下揃えにできます。divでは効きません。方法1で紹介したflexを使う方法をオススメします。bottom」が効くようになりますが、あまりオススメはしません。href="#">ボタン</a></div>position:absoluteは要素を任意の位置に指定するCSSです。これで下を基準に位置指定することで下揃えができます。positionの書き方【実装例・デモとあわせて紹介】CSSのpositionの書き方をstatic,relative,absolute,fixed,stickyの使用例とともに説明します。以上、CSSで下揃えする方法を4つ紹介しました。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。