[ボツ]新「復習プリント」の作成

この形式はイマイチかな…当面、ボツ？

6年生が単元学習するためのプリント(旧「復プリ」)ではなく、単元学習が終了した生徒がテスト前に見直すプリント(新「復プリ」)を作成する。

できるだけ簡易に！

試作アルファ

構成

最低限のヘッダーとフッターを準備して(htmlの図解プリを参考に)、中に<article></article>で内容を入れる。クラス名は「rvw1」

問題と答えの縦の区切り線を付属要素で入れる。(webではどうするか。モバイル表示があるから面倒くさい)
→傾き100の1次関数の切片を調整して、ある画面幅を境に太さが一気にゼロ(マイナス)になるようにした。

その中に問題と答えのセットを<section></section>で囲む。クラス名は「unt」
display:flex;で横並び。flex-wrap:wrap;でモバイル表示では縦並びに

問題は<div></div>で囲む。クラス名は「qst」

答えは<div></div>で囲む。クラス名は「ans」

編集画面では色がつくように各divに背景色を設定してweb(entry-content直下)では背景色を無しに。

試作アルファ

結果と改善点

モバイル表示での縦並び→確認

印刷表示→レイアウトは悪くないが、縦の区切り線が消えてしまう。borderの太さの一次関数の切片をもう少し上にする。
→試してみたが「qst」と「ans」の切り替わりにそろえると印刷では表示できない…
→印刷す場合に「Prt」タグに入れるか、borderの太さの1次関数の切片を印刷画面に合わせて調整した後で「qst」「ans」の切り替わりをそれにあわせて調整する
→1次関数の切片の最大は790pxのようだ。これに合わせて「qst」「ans」の切り替わりを調整しようとしたら、だいたい一致していたｗラッキー

見出しをそれらしくして完成にするか

試作ベータ(Rvw2)

中にboxを入れられるように拡張した版を、現在「L-box」で作っている確認テストと置き換える。

全体のイメージは2018年の「ズコプリ」に準拠

全体を<article class=”Rvw2″></article>で囲む

タイトルはh3見出し、サブタイトルはh4見出しで書いておく。.Rvw2 h3{}、.Rvw2 h4{}で書式を設定。

問題解答セットを<section class=”unt”></section>の中にいれて、その中に「問題(「qst」section」「図解(カスタマイズされたD-box1)」「解説「ans」section」の3つを入れる。

印刷する場合は重畳クラス「Rvw2 Prt」を設定して、「unt」sectionや「qst」sectionの幅を指定

記事内の確認テストで使う場合(無印)は全体をボーダーで囲ってモバイルを基準にflexwrapで縦に並べる？これから試行錯誤

う～～～ん入れ子が多すぎて面倒くさい！！さっそくグチャッているし

試作ガンマ

「unt」sectionの中には<p>と図のボックスsectionだけにして、CSS側の「first-of-type」などで最初のpを問題、二番目のpを解説の書式をあてる

答えの図と解説のうち片方だけが折り返されると読みづらくなるので、印刷用とweb用を明確に分けてデザインするか…

web用

無印の「Rvw2」articleで囲む

印刷用

重畳クラス「Rvw2 Prt」で囲む

後置の文章3。

後置の文章2。

後置の文章1。

問題文の中に図などを入れることができないのに気づいた

試作デルタ(Rvw3)

「unt」sectionの中をdivで区切る方法を試す

web用

印刷用