練習用の原稿に長い名前を入れる：空欄と文章量を分けて試そう

すべてのカードに「作品名」「説明文」とだけ入れると、文章が増えたときの姿は分かりません。練習用の原稿に長い名前を入れるところから、同じ部品で試す内容の幅を広げてみましょう。今回はCSSの修正方法ではなく、何を入れて何を見るかを決める課題です。

題材は架空の手製本の作品一覧です。作品名、紹介文、任意の補足という三つの欄があるカードを想定します。自分の練習ページのコピーを使い、公開する原稿と混ざらない場所で試してください。

基準にする一枚を先に保存する

最初のカードには、作品名「旅のノート」、紹介文「旅先で集めた紙を綴じた一冊です。」、補足「表紙は青色です。」と入れます。この原稿を基準として保存し、見直すたびに同じ状態へ戻せるようにします。

確認用の原稿とは、表示を試すために条件を変えた文章の組です。意味のない記号を大量に並べるだけでなく、実際にその欄へ入りそうな内容から作ります。人名や連絡先の実データを持ってくる必要はありません。

記録には「変えた欄」「入れた文」「期待する状態」「実際に見た結果」を書きます。まだ画面を見ていない欄には未確認と記し、予想だけで合格にしないでください。

長い作品名と長い紹介文を別々に入れる

一つ目の差し替えは作品名だけです。「雨の日に集めた街の色を綴じる手製本ノート」とし、紹介文と補足は基準のままにします。作品名を末尾まで読めるか、紹介文と重なっていないかを確認します。

二つ目は作品名を元に戻し、紹介文だけを長くします。例えば「旅先で集めた紙を綴じた一冊です。駅前で見つけた包み紙と、海辺で描いたスケッチを交互に入れました。最後のページには、次に歩きたい道を書き足せます。」とします。

この場合は紹介文の終わりまで読めるか、その下の補足と区別できるかを見ます。名前と紹介文を同時に長くする前に、一項目ずつ試すことで、記録した結果をどの入力と結び付けるか明確にできます。

試す文字数は、この原稿を使うための条件です。「この長さで大丈夫なら、どんな原稿でも安全」という上限の保証にはしません。実際の掲載予定原稿が届いたら、その内容でも確認を追加しましょう。

補足なしを、作品名なしと同じ扱いにしない

三つ目は任意の補足だけを空にし、作品名と紹介文は基準に戻します。今回の設計では、補足がなくても作品の内容は伝わることを期待します。補足用の見出しだけが残っていないか、不要な空白が目立たないかを観察します。

一方、作品名を空にするのは別の条件です。この練習では作品名を必須の情報と決めているため、空なら表示調整の前に原稿の不足として記録します。文字を適当に埋めて完成扱いにするのではなく、正式な名前を確認する項目へ戻します。

任意の欄を空にすることと、一覧に作品が一件もないことも違います。一覧全体の案内は空の状態の文言を考える記事で扱っています。今回は一枚のカードの中にある情報の有無に絞りましょう。

同じ幅で比べてから、幅を変える

まず基準と三つの差し替えを同じ画面幅で見ます。次に狭い幅でも同じ順で比べます。記録には幅を数値で残し、使ったブラウザーも添えてください。表示を試していない環境へ、そのまま結果を広げて書かないようにします。

問題が見つかったら、確認用の長い原稿を短く戻して解決したことにしません。元の条件を残して修正し、修正後にも同じ原稿を使います。具体的な列数の調整へ進むなら、CSS Gridでカードを並べる記事と組み合わせられます。

最後に長い名前と長い紹介文を一緒に入れる確認も加えます。別々に試した結果と、組み合わせた結果は別の行へ残します。短いカードと長いカードを隣に置いたとき、どの説明がどの作品に属するかも読み直してください。

次の修正でも使えるよう、原稿と確認条件を保存する

基準の一枚と三種類の差し替えをテキストに保存します。各原稿の横へ、確かめたいことを一文だけ付けます。実装前なら、画面確認は未実施と残して構いません。

完成物は文章の集まりと観察欄です。無料のHTMLレッスンで作ったページにも、必要な項目に合わせてこの方法を使えます。次に配置を直したとき、同じ原稿と同じ幅で比べられることを終える条件にしてください。