menu

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

H&Rブログ > html・CSS > HTML・CSSの中央寄せを軽く研究してみた

HTML・CSSの中央寄せを軽く研究してみた

html・CSS

どうもHATOMUGIです。

前回は「HTML・CSSを1から学び始めるならコードエディターはVScodeがおススメ」という記事を書きました。
そして今回は、HTML・CSSを学び始めたらおそらく誰もが少しは苦戦するであろう「要素の中央寄せ」についてちょっと研究してみたので備忘録としても書いていきたいと思います。

中央寄せ

要素や画像、テキストなどを中央寄せにするときはmargin:auto;、text-align:center;、position:absolute;などを使っていると思います。
単純に、「ブロック要素は’margin’を使う」「インライン要素は’text-align’を使う」といった分かりやすい覚え方もありますが、いざ使ってみると「あれ?cssが効いてない・・・」となることが結構あります。なので今回の記事では基本的な’margin:auto;’・’text-align:center;’・’position’がどんな感じに効いてくるのか画像と共に解説していきたいと思います。

まずは下準備

とりあえずこんな感じで色々試してみる土台を作りました。



上側は<div class=”test-area”>(わかりやすいようにボーダーあり)の中に<ul class=”center-first”>(list-styleはnone)を入れて<li>を4つ並べています。分かりやすくなるように<li>にはbackground-color(黒)と、下との間隔を開けるのにmargin-bottomを付けています。

下側も似たような感じで<div class=”test-area2”>(こちらもボーダーあり)の中に<p class=”text1”>を5個並べました。こっちの<p>は上側の<li>と同じブロック要素ですが、widthを180px・heightを40pxで固定しています。

margin: 0 auto;

ではまず’margin: 0 auto;’を使ってみましょう。margin:0 auto;は主にブロック要素に使いますが、上側のclass=test-areaのようにwidthを触っていない(widthが100%あるいはautoになっている)状態だと意味がありません。なので効き目を見るためにwidthを300pxにして’maugin:0 auto;’を付けてみます。
上下にmarginもついているので、CSSは’margin: 100px auto 10px;と書きます。


真ん中に寄っていますね。

<div>のブロック要素
widthは 300px
‘margin: 100px auto 10px;
  OK!


では次に<ul>で中身が複数の要素<li>を真ん中に持っていってみます。<li>もブロック要素ですが、中に文字が入っているのでちょっとコードを増やしてみましょう。
右側の黒い余白が邪魔くさい感じがするのでとりあえず文字だけを中央に寄せてから左右の余白を調節してみます。
なのでまずは’text-align: center;’を使って文字を中央寄せします。そして良い感じにwidthを決める(170px)、そして’margin-bottom: 10px;’が付いているので’auto’を加えた‘margin: 0 auto 10px;を付けてみます。



うまくいってないですね。これは最初の時点で気付くかと思いますが<ul>の仕業です。「・」が邪魔だったので‘list-style:none;’を付けていましたが、そのままでは<ul>にpaddingが付いています。なので中央へ持っていくには<ul>にCSSで‘padding: 0;’をあらかじめ付けておきましょう。


これで中央へ持っていけました。簡単でしたね。
最初に「インライン要素には’text-align: center;’」と書きましたが、私の中では「インライン要素では」というよりも文字通りに「文章(text)を中央(center)に持っていく」という感覚でずっと使っています。
もちろんインライン要素で’margin’を使っても要素は中央へ寄ってはくれません。先ほどのwidthが決まった<li>に’display: inline-block;’を付けたら、


横並びになって且つ中身は中央へ寄りません。

こんな感じでブロック要素は’margin’を使うと素直に動きますし、インライン要素だと使えないというのが分かるので、色々な使い方をして慣れていくと良いかと思います。

要素を増やして遊んでみる

今度は中央へ寄せるだけでなく右寄せなどもやってみます。同時に<div class=”test-area”>の子要素を増やしてどんな感じになるか試してみます。

①<div class=”test-area”>に子要素<div class=”test-area-second”>を追加

②↑のどちらにもわかりやすいようにbackground-colorを付けてみる

③ウィンドウの幅を変えた時にwidthが変化するようにwidthを「%」で指定する

④中央寄せ・右寄せを試してみる


上記でやってみます。



画像が分かりにくくてすみません。
といった感じでブロック要素ですから素直に右にも寄ってくれました。大したことはしていませんが色々と使えそうな気がします。

text-align: center;

続いて’text-align: center;を使ってみます。
使うのは下準備していたコードの下側を使います。今度は<p>ですね、後に<a>でもやってみます。
先程ブロック要素に’text-align: center;’を使ったら中の文字だけが中央に寄ったので、あらかじめ<p>を’display: inline-block;’にして試してみます。


これが通常の状態、インライン要素なので横に並び、ウィンドウ幅が狭くなって一段落ちた時も落ちた要素は左に寄ります。


では’text-align: center;’を付けてみます。



<p>をインラインブロックにして、<p>の親要素である<div class=”test-area2″>に’text-align: center;’を付けてみました。結果は画像の通りで、少し面白いことになりました。
ブロック要素の時のように文章(「これはテストです」)は<p>の中で中央に寄っていますし、更にインラインブロックである<p>自体も中央に寄っています。
もしこの状態で<p>内のテキストを通常通り(左寄せ)にする場合は<p>に’text-align: start;を付けるとOKですが、親要素には’text-align: center;・子要素には’text-align: start;’とそれぞれ付けることになるのでCSSの見栄えは少し悪くなりそうです。

インラインの<a>でも動きは似ていますが、段の落ち方が特殊です。


このようになります。なのでブロックごと落としたいときはインラインに’display: inline-block;’を付けるといった方法で対処するというのも一つの手かなと思います。

まとめとちょっとおまけ

‘margin’と’text-align’の2つだけの内容でしたがいかがでしたでしょうか?滅茶苦茶基本的なことだったのであまり役立たなかったかもしれません。
しかしいざコードを書いてみると「marginが効かない」とか「text-alignが悪さをしている?」などちょっとのことで躓(つまづ)いたりすることもあります。なのでたまには息抜きなどでこんな感じの適当なコードを書いて実験してみると、問題の改善や新たな発見があったりするので1度試してみてください。

中央に寄せるといえば他にも’position’での中央寄せや、<img>を中央寄せにするなどありますが、私はいつも

position: 親要素に’relative’、子要素に’absolute’をつけて子要素にCSS{right: 0 ; left: 0; margin: 0 auto; }で(横の)中央に寄せる。

<img>: 親要素に<div>を付けて(<div><img></div>の形)、<div>のCSSで子要素である<img>に、表示されてほしい任意の「大きさ」と中央寄せのための’margin’を指定する(例えば{width: 500px; height: 130px; margin: 0 auto;})、そして<img>のCSSに{width: 100%; height: 100%; }を付ける。

という方法を使っています。(大体ですが)

webサイトを作っていると上記の方法でもブラウザによっては表示のされ方が違ってきたり色々と修正しないといけない所が出てくると思いますが、挫折せずに頑張って研究、実践して頑張っていきましょう!
ではまた次回(^▽^)/

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ