だいまる。の副業的な生活

どこにでもいそうな30代サラリーマンが脱社畜を目指して副業に挑戦してみるブログです。日々考えていることや副業の成果などを書いていきます。気まぐれなので時期によって考え方等に矛盾が出るかもしれませんが、寛容に受け止めてあげてください。

ブログ(HTML)で「右寄せ」「中央寄せ」「左寄せ」をする方法

どうも。だいまる。です。

最近ブログを書いていて「ちょい調べ」をしていることに気がつきました。

自分が何かしているときに「調べる」って行為をしたってことは、その結果を共有しておけばいいんじゃない?と思ったので備忘録もかねて書いておきます。

f:id:daimaru-side:20180923230115j:plain

ブログで「右寄せ」「中央寄せ」「左寄せ」をする方法

はてなブログでは簡単に文字の大きさや色なんかを変えられるように色々とボタンが用意されています。

が、「右寄せ」「中央寄せ」「左寄せ」が見つからなかったので、直接HTMLで書く必要があったというわけです。

いろいろと方法はあるみたいなのですが、今回はdivタグを利用して実現する方法をご紹介します。

divタグのalign属性を利用する

「右寄せ」「中央寄せ」「左寄せ」をHTML上で記述するにはalign属性を利用します。

alignは英語で「整列する」みたいな意味だったかと思います(あやふや)

右寄せにする方法

align属性に"right"を設定します。

コード的にはこんな感じ

<div align="right">右寄せにしたい文字</div>

これをHTMLで書くと下の見本みたいになります。

右寄せにしたい文字

中央寄せにする方法

align属性に"center"を設定します。

コード的にはこんな感じ

<div align="center">中央寄せにしたい文字</div>

これをHTMLで書くと下の見本みたいになります。

中央寄せにしたい文字

左寄せにする方法

もうわかりますよね笑
align属性に"left"を設定します。

コード的にはこんな感じ

<div align="left">左寄せにしたい文字</div>

これをHTMLで書くと下の見本みたいになります。

左寄せにしたい文字


HTMLはデフォルトで左寄せ(何も書かなくても左寄せになる)のでleftを使うことは滅多にないでしょうが、一応笑

終わりに

ボタン一つでHTMLの整形ができるのが普通になっているので、こんな簡単なことでもいちいち調べないとなのかーと自分でちょっと反省しました笑

ただ、「調べればすぐにわかる」状態にしておくのも大切なことの一つだ!とも同時に考えましたね。。。

ちょっとしたことだけど、この記事が誰かの役に立てばいいなー。。。

それではまた。

だいまる。