理解しておきたい、CSSによるインラインレイアウトの仕組み(inline-block編)Inline Layout─Frontrend Conference 高津戸壮(株式会社ピクセルグリッド) この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事(全4回)として書き起こしたものです。今回は第4回目、最終回です。 背景画像でリストのビュレットを配置した場合の問題 今回は、前回までの内容を踏まえ、主にインラインブロックについて見ていきます。まずは、以下のようなリストを「HTMLとCSSで作りたい」と思います。この時、リストのビュレットはオリジナルの画像にしたいです。 こんな時、背景画像を利用し、以下のような方法でこの見栄えを再現するという方は多いでしょう。筆者も昔からずっと、この方法で実装してきました。
![理解しておきたい、CSSによるインラインレイアウトの仕組み(inline-block編)Inline Layout─Frontrend Conference](https://cdn-ak-scissors.b.st-hatena.com/image/square/ceb700dc34a27c88e5f18d27fa71ba703e03ce35/height=288;version=1;width=512/https%3A%2F%2Fhtml5experts.jp%2Fwp-content%2Fuploads%2F2015%2F03%2Fil-floatReplace.png)