前のパートに戻る 完了して次のパートへ  

  2-1見た目(スタイル)を調整する

それでは、HTMLを書いた次に見た目=スタイルを調整しましょう。

CSS欄に以下の順に書いてみましょう。

(細かいところの説明は省きます)

1.全体を画面中央に寄せる


まず以下のコードをcssに追加します。

2.問題表示部分を調整する


contentのスタイルを書いてそれっぽくしましょう。

3.読みの位置調整


問題のローマ字と距離が離れると見づらいので少し下げます。

4.問題の調整


何もしないと縦並びになってしまうので display: flex; で横並びにするようにします。

(flexについて詳しくはこちらを参照:https://www.plusdesign.co.jp/blog/?p=8747 )

flexが効いている時の中央寄せは justify-content: center; を指定します。

文字が見やすいようにfont-size: 2.4rem;で大きくしておきます。

5.文字の行間を広げる


文字の行間を広げるために以下のコードをcssに追加してください。

6.文字の色調整


文字の入力前と入力後で見た目を変えたいので2つのスタイルを作ります。

default:入力前はボーダーをつけて、グレーカラーにします。

(文字にボーダーをつけるための方法: https://chaika.hatenablog.com/entry/2017/03/27/142705 )

correct:入力後はシンプルにブラックにしてみます。

▼css完成

議論
4 質問
このコースの評価は?