ノート:旅程

初版は翻訳記事（メモ）[編集]

英語版から翻訳した記事です。

原文は en:Itineraries &oldid=4647800, 2023年4月16日09:45 (UTC) 時点における Pashley さんによる版。タグ: 2017年版ソースエディターバナーを含まない記事の作成

メモ以下div移行用の既存構造のメモ :

div ^{style="-moz-column-width: 30em; -webkit-column-width: 30em; column-width: 30em;"}

templatestyles ^{src="Template:Topicbox/styles.css"}

div ^{class="content-table-wrapper"}

div ^{class="content-table-left"}

div ^{class="content-table-right"}

div ^{class="content-table"}

table ^{class="pp_infobox"}

tbody

tr

td

div ^{class="mw-h3section"}

h3 ^class="box"

span ^{id="SECTION NUMBER"} - システム

div ^{class="mw-headline" id="SECTION NAME"}

tr

td

tr

flex boxを使った案 :

div ^{style="display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; width: 100%;"}

div ^{style="width: 44%; margin-right: 3%; margin-left: 3%;"}

div ^{style="width: 44%; margin-right: 3%; margin-left: 3%;"}

...

画面幅1340～1521pxの際にオセアニアが飛び出る. 左列でも右列でもうまくアフリカが収まらなかったことが原因と思われる.

この範囲だけheightを広げる. どのくらい広げるかは後々検討.

この範囲だけ, orderを使用してボックスを並び替えてうまく入れる. ただし後から編集されてテキストの量が変わったりすると非常に面倒臭い

この範囲からスマートフォンの範囲まで全て1行表示にする. 多分1つのボックスがものすごく横長になったりする (特にタブレット)

3行で入るようにする.

後々どれがいいか訊いた方がいいか. レスポンシブデザインの観点から言ってスマホの画面幅に対応するので, どのみち専用のcssが必要. --Tmv (会話) 2023年6月30日 (金) 08:43 (UTC)[返信]