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

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

こちらの漫画の投稿で実際活用した

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

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

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

bootstrap5で漫画を表示する

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

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です