2020夏版】算数記事新デザイン(2)

実際の記事を使って、もう少し実践的にデザインを詰めていく。

導入用の例題

元記事

例題1

172を一の位で四捨五入しなさい
方針

四捨五入の問題は4ステップで解きます

図解

まず問題の数を切り捨てた数を出します。

172を「一の位で切り捨て」ると一の位をゼロにするので170です。

次に切り捨てた数から切り上げた数を出します。

切り捨てた170のゼロにした部分(0)の右(17)を+1して180です。

次に切り捨てた数と切り上げた数のちょうど真ん中にある数を出します。

切り捨てた数170と切り上げた数180のちょうど「真ん中」は175です。

最後に「四捨五入」を行います。
問題の数が真ん中の数未満(より小さい)なら切り捨て、真ん中の数以上なら切り上げです。

この問題で「聞かれている数」172は「真ん中の数」175未満(より小さい)なので切り捨てます。

切り捨てた数の170が答えになります。
170

今の解き方をまとめるとこうなります。

四捨五入の「解き方」
  1. 「問題の数」を「切り捨てた数」を出す
  2. 「切り捨てた数」から「切り上げた数」を出す。
  3. 「切り捨てた数」と「切り上げた数」の「真ん中の数」を出す
  4. 「問題の数」が「真ん中」未満(下)なら切り捨て、「真ん中」以上なら切り上げ。

実際の問題では概数の聞かれ方が三種類あるので四捨五入の解き方も三種類あります。

Web版

例題0-0:四捨五入の導入
172を一の位で四捨五入します。以下の問いに答えなさい。
172を一の位で切り捨てるといくつですか?
四捨五入の問題は①切り捨て→②切り上げ→➂真ん中の数を出す→④切り捨てか切り上げをする。の4ステップで解きます。

「一の位」を切り捨てる(0にする)と…

170になります。
172を一の位で切り上げるといくつですか?

一の位で切り捨てた数「170」で「0」にした部分の左側「17」を+1します。

180が切り上げた数になります。
切り上げた数と切り上げた数の真ん中の数はいくつですか?

170」と「180」の真ん中なので、175です。

結局、172を一の位で四捨五入するといくつですか?

もとの数が真ん中の数未満なら切り捨て、真ん中の数以上なら切り上げをします。

もとの数「172」は真ん中の数「175」より小さいので…

切り捨てて170になります。

170
180
175
170

後置の文章。

チェック事項

解答欄がでかすぎてはみ出た…web版では解答のフォントを小さめにすべき。→vwで可変フォントにした。

解説内の解答線の右が窮屈→margin-right追加

図を入れると特に縦幅が増えて印刷時にでかすぎる。印刷プレビューでほぼ1ページ丸々を占める→解説ラベルを上から横に移して上の余白を詰める。

全体として、モバイルファーストに加えてプリントファースト(印刷時を優先)にする

CSSを変更する際に追加していくと古いものが残っていくので、テキストでバックアップを取っておき思い切ってかえてしまおう。

印刷プレビュー時に、左右に細いボーダーが見える→L-qstやS-qstのborderをnoneにしても変化なし…わからん

T-out2も正常に稼働しているので、Web上で読ませる分にはOK

Web版では解答欄「A-clm」はいらないのでdisplay:none;にする→とりあえず重畳クラス「.L-qst.rei」を作って「entry-content」直下では解答欄を表示しないようにしてみる

印刷(問題)用→多分廃止

ここから「PrtQ1」に入れる

例題0-0:四捨五入の導入
172を一の位で四捨五入します。以下の問いに答えなさい。
172を一の位で切り捨てるといくつですか?
四捨五入の問題は①切り捨て→②切り上げ→➂真ん中の数を出す→④切り捨てか切り上げをする。の4ステップで解きます。

「一の位」を切り捨てる(0にする)と…

170になります。
172を一の位で切り上げるといくつですか?

一の位で切り捨てた数「170」で「0」にした部分の左側「17」を+1します。

180が切り上げた数になります。
切り上げた数と切り上げた数の真ん中の数はいくつですか?

170」と「180」の真ん中なので、175です。

結局、172を一の位で四捨五入するといくつですか?

真ん中の数未満なら切り捨て、真ん中の数以上なら切り上げをします。

172は真ん中の数175より小さいので…

切り捨てて170になります。

170
180
175
170

後置の文章。

チェック

不都合以前に、大きな図が入るとそれが全部空白になってしまうので、そもそも導入の例題をプリントで演習問題にするのは不適切?(解説のみ)→多分、そう。

例題(導入)を印刷教材ではどう扱う?→a案「Webで見てね」b導入用の印刷教材

印刷(解答)用

ここから「PrtA1」に入れる

例題0-0:四捨五入の導入
172を一の位で四捨五入します。以下の問いに答えなさい。
172を一の位で切り捨てるといくつですか?
四捨五入の問題は①切り捨て→②切り上げ→➂真ん中の数を出す→④切り捨てか切り上げをする。の4ステップで解きます。

「一の位」を切り捨てる(0にする)と170になります。

172を一の位で切り上げるといくつですか?

一の位で切り捨てた数「170」で「0」にした部分の左側「17」を+1して、180が切り上げた数になります。

切り上げた数と切り上げた数の真ん中の数はいくつですか?

170」と「180」の真ん中なので、175です。

結局、172を一の位で四捨五入するといくつですか?

真ん中の数未満なら切り捨て、真ん中の数以上なら切り上げをします。

172は真ん中の数175より小さいので、切り捨てて170になります。

170
180
175
170

後置の文章。

チェック

T-out2にした部分が間延びしてしまう(divにしたので改行される)。php側で「削る」しかない?

問題としては印刷しない(演習はしない)ので、解答欄はいらない→重畳クラス「.L-qst.rei」でdisplay:none;にした。

図のせいで縦幅が大きいので1枚まるごとを例題として印刷することになる(この問題でA4ギリギリ。T-out2を普通の文章に直してもギリギリ…)

→画像の配置を根本的に変えないと縦幅問題は解決しない

印刷:画像を横(flexのwrapあり)に並べてみる。

図がある小問の解説の文章は前半にまとめて「lot-box1」に入れる。図は「D-box1」に入れる。T-out2に図ごと入っているのはどうする?やはり導入用の例題は印刷には適さないと分かる。

導入用の例題→練習の例題(類題?)にして導入用の例題は「Web見てね」にするか?

「PrtA1」内では「lot-box1」のwidthを狭くする

ここから「PrtA1」に入れる

例題0-0:四捨五入の導入
172を一の位で四捨五入します。以下の問いに答えなさい。
172を一の位で切り捨てるといくつですか?
四捨五入の問題は①切り捨て→②切り上げ→➂真ん中の数を出す→④切り捨てか切り上げをする。の4ステップで解きます。

「一の位」を切り捨てる(0にする)と170になります。

172を一の位で切り上げるといくつですか?
一の位で切り捨てた数「170」で「0」にした部分の左側「17」を+1して、180が切り上げた数になります。
切り上げた数と切り上げた数の真ん中の数はいくつですか?

170」と「180」の真ん中なので、175です。

結局、172を一の位で四捨五入するといくつですか?
真ん中の数未満なら切り捨て、真ん中の数以上なら切り上げをします。

172は真ん中の数175より小さいので、切り捨てて170になります。

170
180
175
170

後置の文章。

383pxの画像の横の文字のdivがmax-widthを30%くらい

文字の後入れも考えての図の絶対サイズ横幅の規格を決めないといけない。試しに画像の横幅300pxで文字のdivのmax-width45%で二段組にできた。

タイトルとURLをコピーしました