SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CSSで作るWeb用パーツ

デザインサンプルで学ぶCSSによるスタイリング~「リスト」編

CSSで作るWeb用パーツ(2)

  • X ポスト
  • このエントリーをはてなブックマークに追加

リストを横並びに配置する

 ul要素もli要素もブロックレベルなので、デフォルトの状態では横並びにはなりません。ここからは、リストを横並びに配置する方法を紹介します。

display:inlineでテキストをシンプルに横並びにする

 図06のように、リストのテキストをシンプルに横並びにしたい場合は、li要素にdisplay:inlineを指定します。li要素はブロックレベルですが、インライン表示にすることでリストを横並び表示にできます。

 このサンプルでは、li:afterセレクタとcontentプロパティで、li要素の直後に区切り文字「|」を表示しています。最後のli要素に区切り文字は不要なので、CSS3の要素:last-childセレクタを使って、最後のli要素の直後には何も表示しないように指定しています。

 この横並びリストをウィンドウの右側に表示したい場合には、ul要素にtext-align: rightを指定します。

[リスト06]サンプル04/HTML(sample04.html)
<ul id="sample04">
<li><a href="#">ホーム</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li> 
</ul>
[リスト07]サンプル04/CSS(sample04.html)
ul#sample04 {
  text-align: right; /* ウィンドウの右側に配置 */
}
ul#sample04 li {
  display: inline; /* リストをインライン表示にして横並びにする */
}
ul#sample04 li:after {
  content: "|"; /* 区切り文字を入れる */
} 
ul#sample04 li:last-child:after {
  content: none; /* 最後は区切り文字を入れない */
}
図06:サンプル04(sample04.html)
図06:サンプル04(sample04.html)

float:leftで画像を横並びにする

 先ほどのdisplay:inlineでリストを横並びにする方法は、シンプルにテキストを横並びにしたい場合には便利ですが、画像のような固定幅を持った要素を横並びにしたいときには適していません。

 こうした場合には、floatプロパティを使ったレイアウトがお勧めです。floatプロパティは、要素を左または右側に配置し、後続の要素をその反対側に回り込ませるプロパティです。floatレイアウトのポイントは、以下の2つです。

  • 配置する要素や回り込ませる要素の幅を指定すること
  • 最後にclearプロパティで回り込み解除を行うこと

 サンプルのHTMLコードは次のとおりです。リストには画像を使用しました。また、後続の要素で回り込みを解除するため、ここではh1要素をおいています。

[リスト08]サンプル05/HTML(sample05.html)
<ul id="sample05">
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
</ul>
<h1>title</h1>
図07:ブラウザ表示結果
図07:ブラウザ表示結果

 このとき、先ほどのdisplay:inlineを使って横並びにすると、図08のように画像と画像の間に隙間ができてしまいます。これは、ソースコード上の改行や半角スペースなどの空白文字が原因です。改行やインデントを付けずにコードを記述すれば、この空白はなくなります。

図08:display:inlineで横並びにすると、画像間に隙間ができる
図08:display:inlineで横並びにすると、画像間に隙間ができる

 しかし、floatプロパティでレイアウトすれば、ソースコードの空白文字はレイアウトに影響しません。今回は画像なので幅の指定は不要ですが、テキスト等の場合はwidthプロパティで幅を指定したうえで、float:leftを指定します。

[リスト09]サンプル05:clearfix/CSS(sample05.html)
ul#sample05 {
  width: 750px;
  margin: 0 auto 20px auto;
}
ul#sample05 li {
  width: 150px; /* 幅150px */
  float: left; /* 左に配置 */
}

 回り込みを解除していないため、図09のように、後続のh1要素が回り込んでしまっています。

図09:float:leftでリストを横並びに配置(sample05.html)
図09:float:leftでリストを横並びに配置(sample05.html)

 回り込みを解除するには、回り込ませた要素と同じ階層の兄弟要素にclear:leftを指定します。しかし、ここではli要素を回り込ませているため、後続の兄弟要素がありません。そこで、clearfixというテクニックを使って、回り込みを解除します。簡単に言うと、:after擬似要素で空の内容を作り、そこにclearプロパティをかけるという仕組みです。ソースは次のようになります。今回は汎用的に使えるクラスにするため、「clear:both」としていますが、サンプルではfloat:leftしかかけていないので、clear:leftでも機能します。

[リスト10]サンプル05/CSS(sample05.html)
/* clearfix */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

 このclearfixクラスは、親要素(ul要素)に指定します。

[リスト11]サンプル05/CSS(sample05.html)
<ul id="sample05" class="clearfix">
<li><a href="#"><img src="menu.png" alt="menu"></a></li>
~中略~
</ul>

 これで回り込みが解除され、後続のh1要素も本来意図した場所に配置されます。

図10:clearfixで回り込み解除(sample05.html)
図10:clearfixで回り込み解除(sample05.html)

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CSSで作るWeb用パーツ連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7722 2014/05/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング