webpagemaker https://blog.hatena.ne.jp/webpagemaker/ 96's blog https://96s.hatenablog.com/ CSS ナビゲーション（ボックス横並び） リストを横に並べるには、float:left;を使う。 レイアウト構造に例えると、リスト全体を包むulがwrapperの役目で、その中に入っているliに対してcontentのようにfloat:leftを使って横に並べる。 よって、ulに対してはoverflow:hidden;を指定する。 idやclass名は英単語でつける。ローマ字は読みづらいため、a・bや1・2はエラーを起こしやすいため避ける。 ナビゲーションボタンの9割は画像で作られている。 ナビゲーション（Sprite） 画像の各ボタンに隙間がある場合は、それを考慮してbackground-positi… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2F96s.hatenablog.com%2Fentry%2F20130716%2F1373900400" title="復習(4)リストCSS06　ナビゲーション（ボックス横・Sprite） - 96&#39;s blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> http://cdn-ak.f.st-hatena.com/images/fotolife/w/webtm2013/20130717/20130717142848.png Hatena Blog https://hatena.blog 2013-07-16 00:00:00 rich https://96s.hatenablog.com/entry/20130716/1373900400 1.0 100%