Markup Catch

HTMLマークアップ |新人webデザイナーがマークアップを考える 【第7回】

Posted 12月 6 2013 by ozw  

HTMLマークアップ | 新人webデザイナーがマークアップを考える 【第7回】

知ってると地味に役立つマークアップ技
-リストにボーダーをつけたけどリストの最後だけ適用させない-

マークアップの際に、地味に困っていることを解決する記事です(`・ω・´)キリ
今回の地味に困ったことはコチラ↓

markup_7_1

リストに「border-bottom」で下線が出るように指定しているけれど………
一番最後はいらないんだぜ!!!!
という場合の解決策です。

シチュエーション

目指すはこれ↓なのに…
markup_7_2

・リストに枠をつけたので、一番最後のborder-bottomはいらないよ。
・個々のリストの間にだけ仕切りをおきたい。なので、リストの一番上と一番下のボーダーは不要。
・これ、<li style=”border-bottom:none;”>のパターンかな?リストの一カ所だけcssで指定するのはイヤだな…面倒だな…。
・<li>に指定するだけで、解決できないかな?
・もうtableにしようかな。でも今更、HTML書き換えるの面倒…。

……などなど。

解決方法

解決方法は
・リストの最後にだけstyle=”border-bottom:none;の指定を入れる
・疑似クラス:nth-child(n)を使って指定を入れる
(疑似クラス:nth-child(n)に関してはコチラを参照)
などありますが、今回ご紹介したい技は

「overflow:hidden;」

です。

そもそもoverflowは枠の中に入りきらない内容をどうやって処理するかを指定するcssです。
overflow:hidden;は枠からはみ出た部分を表示させないという指定です。
そうです、最後のボーダーを隠してしまうのです!

やり方は
1. <li>内容</li>にborder-bottomの指定を入れ並べる
2. <ul>にoverflow:hidden;を入れる
3. <ul>に高さ指定を入れて、一番下のborder-bottomが隠せるくらいの高さに指定する
この3ステップでできます!
困った時はお試しください!

下記はシチュエーションで使った画像の指定です。

HTML
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
CSS
ul{
height:174px;
width:250px;
overflow: hidden;
list-style: none;
border: 1px solid #999;
}

li{
width:200px;
padding:5px;
border-bottom:1px dotted red;
}

【著者に関して】
学生時代はグラフィックデザイナーを目指していたのですが、
就職活動の際「紙でもwebでもデザインはデザイン」と考え、
入社してからwebデザインをはじめた、ひよっこwebデザイナーです。


CSS HTML マークアップ



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。