カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-1

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

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

それでは、HTMLを書いた次に見た目=スタイルを調整しましょう。
CSS欄に以下の順に書いてみましょう。
(細かいところの説明は省きます)

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

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

css
123
Copied!
#main { text-align: center; }

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

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

css
123456
Copied!
#content { border: 2px solid black; /* ボーダー */ border-radius: 10px; /* 角丸 */ width: 400px; /* 横幅 */ margin: 0 auto; /* 真ん中寄せ */ }

3.読みの位置調整

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

css
1234
Copied!
#yomi { top: 40px; position: relative; }

4.問題の調整

何もしないと縦並びになってしまうので display: flex; で横並びにするようにします。
(flexについて詳しくはこちらを参照:https://www.plusdesign.co.jp/blog/?p=8747 )

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

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

css
12345
Copied!
#mondai { display: flex; justify-content: center; /* 子要素をflexboxにより中央に配置する */ font-size: 2.4rem; }

5.文字の行間を広げる

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

css
123
Copied!
.text { padding: 2px; }

6.文字の色調整

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

default:入力前はボーダーをつけて、グレーカラーにします。
(文字にボーダーをつけるための方法: https://chaika.hatenablog.com/entry/2017/03/27/142705

css
1234567
Copied!
.text.default { color: #f3f3f3; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }

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

css
1234
Copied!
.text.correct { color: black; text-shadow: none; /* ボーダーを無かったことにする */ }

▼css完成

css
1234567891011121314151617181920212223242526272829303132333435363738
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適用前

2019-02-27 15 57 20

CSS適用後

2019-02-27 16 10 13
現在のパート (1)
全パート (6)
みんなで助け合おう!
現在のパートのディスカッション 全1件
2-1
イノキ 2019-01-03
質問です

.text.correct {
color: brack;
text-shadow: none;
}

color: brack;

color: black;
ではないでしょうか?