2020.01.27SHAREツイートシェアはてブLINEPocket「text-align」を使えば、文字や画像の水平方向の位置を決めることができます。「どうして、思っている部分に効かないんだろう?」と悩んだことがある方も多くなる分野でもあります。悩んでしまう理由は、「text-align」を指定する要素と実際に位置が決まる要素が別だからだと考えられます。今回はそんな曖昧になりがちな「text-align」の使い方と、上手くいかない時に確認したいことについて解説していきます。水平方向の位置を決める「text-align」まとめ水平方向の位置を決める「text-align」とは?「text-align」は文字や画像の水平方向の位置を指定することができます。「text-align」をブロック要素で指定すると、そのブロック要素内のインライン要素の位置が決まります。「そもそもブロック要素とインライン要素って何?」と思う方のために2つの違いを解説します。HTMLでは中身をブロック要素とインライン要素の2つに分けることができ、その違いは以下の通りです。高さと幅を指定することができないpaddingやmarginは、左右に対してだけ使うことができるどんどんと横につながっていく詳しく知りたい方は、この記事を読んでみてください。CSSのdisplayで要素を指定する方法【初心者に優しい解説】ブロック要素とインライン要素の違いがわかったところで、もう一度「text-align」の指定の仕方を確認します。「text-align」はブロック要素に指定します。することで、その中のインライン要素の水平方向の位置を決めることができます。基本のコードの書き方ここから基本のコードの書き方を解説します。今回は、下記のHTMLとCSSをもとにして指定をしていきます。white;}何も指定しない場合、以下の画像のようになります。center;テキスト部分を画像のような中央揃えにしたいときは以下のように指定します。この時に気をつけて欲しいのは、ブロック要素に指定することです。center;実際に元のCSSに書き足すと次のようになります。right;テキストを画像のように、親要素の右に揃えたい場合は以下のように指定します。right;実際に元のCSSに書き足すと以下のようになります。left;テキストを画像のように、親要素の左端に揃えたいときは以下のように指定します。left;元のCSSに書き足すと以下のようになります。start;これは、初期値(何も指定しなかったとき)と同じです。left;」と変わらないと考えていただいて構いません。名前の通りテキストの開始端と、実際のテキストの寄る方向が一緒になります。start;」と反対側に揃うようになります。テキストの開始端(基本的に左端)と、反対側にテキストが寄ることになります。justify」は、テキストが親要素の幅にぴったりになるように単語の幅を調節する指定です。文章の読みやすさが考慮されているため、最後の行には効かないようになっています。justify」の指定有り無しで、文章の終わりが違うことがわかると思います。<指定なし><指定あり>画像の赤く囲ってある部分を見てみると、右端に揃っているものと揃っていないものを確認できます。center;」がうまくいかないときには下のことを確認してみてください。「ブロック要素内のインライン要素」であるかまず確認していただきたいのは、指定したいものが「ブロック要素内のインライン要素」であるかということです。center;は効きません。中央寄せにするためには様々な指定方法あり、要素に合わせて使い分ける必要があります。center;はブロック要素そのものには使うことができないため、次の章を参考にしてください。auto;」を使います。ブロック要素を中央寄せにするには2つのステップが必要です。ブロック要素を中央寄せにする2ステップ1ブロック要素の幅を指定する2左右のmarginをautoにする実際のコードは下の通りです。center;}出来上がる画面は下の通りです。中央寄せにするために使えるものは、様々な種類があります。詳しく知りたい方はこの記事を読んでみてください。水平方向の位置を決める「text-align」まとめ「text-align」を使うと、インライン要素の水平方向の位置を決めることができます。これを使う上で気をつけることはこの2つです。他の要素の場合には何を使えばいいのかもわかるようにしましょう。WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!「未経験だから不安...」、「転職できるんだろうか...」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。WEBCAMPを運営しています。人生が変わるほど「グッとくる」成長体験を、プログラミング学習を通してお届けしています。【元自衛官】の人生を変えた半年!エンジニアへの道のり。WEBCAMPで安心してエンジニア転職を目指そう「スキルがないし...」「失敗したくないし...」カウンセラーがあなたのキャリアを真剣に考え、ご相談に乗ります。