小さい画像をズラズラならべたい

カテゴリーごとに目次的なページを作る予定。そこにはズラーっとちっちゃいドット絵が並んでる感じにしたいわけです。

HTML勉強したときに、リストを横並びにするっていうのをやったので、それを使いたいと思います。カスタムHTMLでタグうちする形で対応。

やることは、ulにクラス名つけて、liに並べたい画像をimgで貼っていく。

あとは追加CSSでなんとかする。

ulをdisplay:inline-blockにすると横並びに。

画像にリンクを貼るとずれてしまう現象が起きるが、結局全部の画像にリンクを貼るので理屈が分からなくても今のところ問題ないでしょう。

5キャラ並べたい。imgのwidthを18%くらいに指定。ちょっとはキャラ同士に隙間もいると思うのでpadding-rightを2%程度。

キャラと隙間を合計して100%行かなければ一列5キャラがキープできるはず。とりあえずこの設定で。