この形式はイマイチかな…当面、ボツ?
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」の切り替わりを調整しようとしたら、だいたい一致していたwラッキー
見出しをそれらしくして完成にするか
試作ベータ(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で囲む
プリント全体タイトル
問題の文章。問題の文章。
問題12gの12
はいくつか問題の文章。問題の文章。問題の文章。問題の文章。問題の文章。
問題の文章。問題の文章。問題の文章。問題の文章。
ここに図解
解説の文章。解説の文章。解説の文章。
解説の文章。解説の文章。解説の文章。解説の文章。解説の文章。
解説の文章。解説の文章。解説の文章。
問題の文章
ここに図解
解説の文章
問題の文章。これは図が無いパターンです。
解説の文章これは図が無いパターンです。
問題の文章。これはpの中に
パターンです。区切られてしまいます。
解説の文章です。解説の文章です。解説の文章です。解説の文章です。
問題の文章。これはpの中に
pを入れた
パターンです。区切られてしまいます。
解説の文章です。解説の文章です。解説の文章です。解説の文章です。
印刷用
重畳クラス「Rvw2 Prt」で囲む
プリント全体タイトル
問題の文章。問題の文章。
問題12gの12
はいくつか問題の文章。問題の文章。問題の文章。問題の文章。問題の文章。
問題の文章。問題の文章。問題の文章。問題の文章。
ここに図解
解説の文章。解説の文章。解説の文章。
解説の文章。解説の文章。解説の文章。解説の文章。解説の文章。
解説の文章。解説の文章。解説の文章。
問題の文章
ここに図解
解説の文章
問題の文章。これは図が無いパターンです。
解説の文章これは図が無いパターンです。
後置の文章3。
後置の文章2。
後置の文章1。
問題文の中に図などを入れることができないのに気づいた
試作デルタ(Rvw3)
「unt」sectionの中をdivで区切る方法を試す
web用
プリント全体タイトル
問題12gの12
はいくつか問題の文章。問題の文章。問題の文章。段落問題の文章。問題の文章。段落
問題の文章。問題の文章。問題の文章。問題の文章。
ここに図解
解説の文章。解説の文章。解説の文章。解説の文章。解説の文章。
解説の文章。解説の文章。解説の文章。
ここに図解
問題の文章の中に図をいれたパターンです。
ここに図解
問題の文章。これは中に
パターンです。どうなるか。
問題の文章。中に
pを入れた
パターンです。どうなるか。
解説の文章です。解説の文章です。解説の文章です。解説の文章です。
答: 答え