Bootstrap5で漫画を見開き表示・スマホスクロールに対応する

Bootstrap5でレスポンシブ対応することでこのポートフォリオサイトを手作りしている．他のフレームワークに乗り換える予定は今のとこない（気になるのいっぱいあるけど）ので，覚え書き．

漫画の投稿にあたってやりたいこと

• PCでは2ページずつ見開き表示にする
• スマホでは1ページずつ縦列表示にする
• 縦書きセリフの漫画なのでPC/スマホで表示順を入れ替える
• レスポンシブ対応

イラストはそのまま順番通りに表示してくれればいいけど，webでは基本的には左上からオブジェクトが並ぶため，その指定をPC（というか横幅の大きいディスプレイ）では左右を入れ替えてあげる必要がある．

漫画表示用Bootstrap5コードサンプル

<div class="container p-0">
 <div class="row row-cols-1 row-cols-md-2">
<figure class="col order-md-2">
<img src="" alt="" class="img-fluid"></figure>

<figure class="col order-md-1">
<img src="" alt="" class="img-fluid"></figure>

 </div>
</div>

1ページ目をpcでは右に，スマホでは先に表示．ドキュメントにorder-xx-1のサンプル例書いてなかった気がするけど勘でやったら動いた．気遣いが行き届いてるので普通に好きなんだよなあ…bootstrap

いつか卒業しちゃうともわからないのでなんともだけど，しばらくはこれで．
漫画何で読ますかは難しい，見開き漫画の体験を損なわない最適解は各出版社が共通で導入してるビューワーだと思う．みんな使い慣れた頃だしね〜あれってやっぱ組み込んだら重いのかな？物によっては画像抽出対策に画像のパズル化してあるので，あれが軽かったら検討したい気持ちはある．有料かもしれない．