左寄りになっているページを中央に揃える
作成中のおみくじアプリだが、ページ全体が左に寄っていてとても不格好なデザインになっている。
今回はこれを中心に揃えてみる。（最初にやっとけよって内容だけど…）
作成中のおみくじアプリの結果を観察
github pagesに置いているhtmlとcssを直接いじっても良いのだが、差分がわかるようにファイルを分けることにした。github pagesにhtmlを公開する方法はこちらを参照。
まず、作成済みのweb_omikuji.htmlとomikuji_element.cssをコピーする。コピーしたファイルはweb_omikuji_center.html、omikuji_element_center.cssという名前に変更し、以下のように変更を加えた。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel = "stylesheet" href = "omikuji_element_center.css"/> | |
| <script> | |
| function tryFortune() { | |
| var resultInt = Math.floor(Math.random () * 7) | |
| switch (resultInt) { | |
| case 0 : resultText = "大凶"; resultClass = "bad"; break; | |
| case 1 : resultText = "凶"; resultClass = "bad"; break; | |
| case 2 : resultText = "末吉"; resultClass = "normal"; break; | |
| case 3 : resultText = "小吉"; resultClass = "normal"; break; | |
| case 4 : resultText = "中吉"; resultClass = "good"; break; | |
| case 5 : resultText = "吉"; resultClass = "good"; break; | |
| default : resultText = "大吉"; resultClass = "good"; break; | |
| } | |
| document.getElementById("result").textContent = resultText; | |
| document.getElementById("result").className = resultClass; | |
| console.log(resultClass); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="main"> | |
| <h1>HTMLとJavaScriptによるWebおみくじ</h1> | |
| <button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button> | |
| <p id = "result"></p> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-size:20px; | |
| } | |
| h1 { | |
| font-size:22px; | |
| margin:20px; | |
| } | |
| /* | |
| p { | |
| margin-left:175px; | |
| padding:5px; | |
| } | |
| .button_omikuji { | |
| width:160px; | |
| height:40px; | |
| margin-left:120px; | |
| } | |
| */ | |
| .main { | |
| text-align:center; | |
| } | |
| .bad{ | |
| color:red; | |
| } | |
| .normal{ | |
| color:green; | |
| } | |
| .good{ | |
| color:blue | |
| } |
まず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を確認することができる。
勉強記まとめ
今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。
+2
