キャラクター詳細画面のヘッダ部にもアイコンを使用して情報量はUPしつつもデザインを簡易化する事に成功。
当初、全てをgridで行う予定だったが、親のSPANをグリッドで定義し、その内部に配置するコンテナをflexにする事で、簡単にかつPC/スマホへの対応も柔軟にできた。細かい部分の調整はまだ必要だけど、大まかなレイアウトはこれでいいと思うのでひとまず終了。
ついで、奥義やアビ情報の詳細部に移る。ここは従来はテーブルタグで記載し、ヘッダ部(奥義名やアビ名)をPCとスマホで文字方向などを変えてレイアウトしていた。だけど、やっぱりスマホ画面だと縦長になりすぎて見づらいという意見もあって、ここをどうにかしたいと思っていたのが一番の課題だった。
今回、テーブルタグを取りやめて、セル状の部分を全てSPANで作り、CSSで位置を指定する方向で作り直している。gridを使うかどうか悩んでいたが、どうやらflexだけでできそうな気がする。@mediaをうまく使って、幅が狭い場合にはヘッダ部を横幅一杯に設定し、そうでなければ画面の15%程度とする。flex-wrapを設定し折り返し可にする事で、はみ出た部分がヘッダの下部に回りこむような動作を期待した。
結果として、想定通りのレイアウトにできたのでこれもOKだ。ただ現状はテーブルレイアウトを前提として枠線や色のつけ方をしているので、これらの調整は必要になりそうだ。特に枠線については考慮が必要だと思うが、うまくできればアビ簡易画面と共通にできそうなので頑張って調整したい。
現状、奥義部分しか手直しできていないので、これをアビ情報、サポートアビ情報にも適用して、全体の画面調整を実施する予定。全部できてみないと何とも言えないが、当初の画面に比べたら随分スッキリするのではないかという予感がある。引き続き調整していきたい。