教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
それでは、HTMLを書いた次に見た目=スタイルを調整しましょう。
CSS欄に以下の順に書いてみましょう。
(細かいところの説明は省きます)
まず以下のコードをcssに追加します。
css123 Copied!#main {
text-align: center;
}
contentのスタイルを書いてそれっぽくしましょう。
css123456 Copied!#content {
border: 2px solid black; /* ボーダー */
border-radius: 10px; /* 角丸 */
width: 400px; /* 横幅 */
margin: 0 auto; /* 真ん中寄せ */
}
問題のローマ字と距離が離れると見づらいので少し下げます。
css1234 Copied!#yomi {
top: 40px;
position: relative;
}
何もしないと縦並びになってしまうので display: flex;
で横並びにするようにします。
(flexについて詳しくはこちらを参照:https://www.plusdesign.co.jp/blog/?p=8747 )
flexが効いている時の中央寄せは justify-content: center;
を指定します。
文字が見やすいようにfont-size: 2.4rem;
で大きくしておきます。
css12345 Copied!#mondai {
display: flex;
justify-content: center; /* 子要素をflexboxにより中央に配置する */
font-size: 2.4rem;
}
文字の行間を広げるために以下のコードをcssに追加してください。
css123 Copied!.text {
padding: 2px;
}
文字の入力前と入力後で見た目を変えたいので2つのスタイルを作ります。
default:入力前はボーダーをつけて、グレーカラーにします。
(文字にボーダーをつけるための方法: https://chaika.hatenablog.com/entry/2017/03/27/142705 )
css1234567 Copied!.text.default {
color: #f3f3f3;
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
correct:入力後はシンプルにブラックにしてみます。
css1234 Copied!.text.correct {
color: black;
text-shadow: none; /* ボーダーを無かったことにする */
}
▼css完成
css1234567891011121314151617181920212223242526272829303132333435363738 Copied!#main {
text-align: center;
}
#content {
border: 2px solid black;
border-radius: 10px;
width: 400px;
margin: 0 auto;
}
#yomi {
top: 40px;
position: relative;
}
#mondai {
display: flex;
justify-content: center; /* 子要素をflexboxにより中央に配置する */
font-size: 2.4rem;
}
.text {
padding: 2px;
}
.text.default {
color: #f3f3f3;
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
.text.correct {
color: black;
text-shadow: none;
}
CSS適用前
CSS適用後