左寄りになっているページを中央に揃える
作成中のおみくじアプリだが、ページ全体が左に寄っていてとても不格好なデザインになっている。
今回はこれを中心に揃えてみる。（最初にやっとけよって内容だけど…）
作成中のおみくじアプリの結果を観察
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を確認することができる。
勉強記まとめ
今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。
