【Web】HTMLとCSSでページ全体を中央揃えする (Web勉強記 6日目)

投稿日:2020年2月24日
最終更新日:2020年2月25日

左寄りになっているページを中央に揃える

作成中のおみくじアプリだが、ページ全体が左に寄っていてとても不格好なデザインになっている。

今回はこれを中心に揃えてみる。(最初にやっとけよって内容だけど…)

 

 

作成中のおみくじアプリの結果を観察

github pagesに置いているhtmlとcssを直接いじっても良いのだが、差分がわかるようにファイルを分けることにした。github pagesにhtmlを公開する方法はこちらを参照

まず、作成済みのweb_omikuji.htmlとomikuji_element.cssをコピーする。コピーしたファイルはweb_omikuji_center.html、omikuji_element_center.cssという名前に変更し、以下のように変更を加えた。

まずhtmlだが、<div class=”main”></div>でブロック要素を定義し、mainというclass名を付ける。そのうえで、cssの方でmainに対してtext-align:center;を定義して、ブロック要素の中のインライン要素をセンターに寄せた。pと.button_omikujiの位置指定は不要なのでコメントアウトした。

htmlを開いた結果が以下の画像。綺麗にセンターに寄せることが出来た。

上記のhtmlへのリンクはgithub pagesのindex.htmlにも追加しておいた。以下のページの「omikuji_element_center」のリンクから追加したhtmlを確認することができる。

https://wakkyfree.github.io/

 

勉強記まとめ

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】Web勉強記 – HTMLやCSS、JavaScriptのTips


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください