タグ:リスト

0407
チェック有無でリストの背景色を変えるとは、こういうの。

チェックが入ってない時、リストの背景色は黒(#000)に。入っている時は、緑色(#13b5b1)に変える内容。

チェックが入る(外す)とリストの背景色を変える
チェックが入ると、リストの背景色を変える処理は、ウェブで見かけたが。入ったチェックを外しても、リストの背景色を変える処理は、見かけなかったので。以下まとめ。

html チェックボックス箇所
<ul>
<li id="checkbox1"><input id="checkbox1_1" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox1','checkbox1_1','#13b5b1')">checkbox1</li>

<li id="checkbox2"><input id="checkbox1_2" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox2','checkbox1_2','#13b5b1')">checkbox2</li>

<li id="checkbox3"><input id="checkbox1_3" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox3','checkbox1_3','#13b5b1')">checkbox3</li>

<li id="checkbox4"><input id="checkbox1_4" type="checkbox" name="list" value="1" onClick="changeBgc('checkbox4','checkbox1_4','#13b5b1')">checkbox4</li>
</ul> 
html javascript箇所(</body>上などに入れる)
<script type="text/javascript">
<!--
function changeBgc(id,id2,color){
if (document.getElementById(id2).checked == true) {
document.getElementById(id).style.backgroundColor = color; }
else { document.getElementById(id).style.backgroundColor = '#000'; }
-->
</script>
ポイントは、リストのidとチェックボックスのid、2つ渡すこと。簡単な仕組みだが、当初はリストのidしか渡さなかったため、おかしいな・・・だった。

以上、ご参考になれば幸いです。

※この記事は、2016年7月に再編集しました。
1410312
iOSとは、iPhoneのOSバージョンのこと。iOS8は、2014年10月31日現在のiPhone最新機種に搭載されている。

「iOS8でリストのレイアウトが崩れる」とは?

画像が、その状態。横2列のテキストによるリストが、iOS8では横1列に表示される現象。噂に聞いた「IEめ!」ならぬ「iOSめ!」とは、このことか。

崩れたリストのコードは以下。

※リンク「#」は任意のアドレス。
●html
<link rel="stylesheet" href="css/style.css">

<h2>カテゴリ</h2>
<nav id="category" class="clearfix">
<ul>
<li><a href="#">のり記について</a></li>
<li><a href="#">マンガ</a></li>
<li><a href="#">Web、PC</a></li>
<li><a href="#">映画、ドラマ</a></li>
<li><a href="#">ライフ、ワーク</a></li>
<li><a href="#">日本のくらし</a></li>
</ul>
</nav>

●CSS
#category ul li a{........}

改変により使わなくなるため、ここでは割愛。
float:left、display:block、width:任意の数値%など定義。
レイアウトが崩れた原因は、いくつか考えられるが。そもそもfloatによるテキストのレイアウトは崩れやすい

今回は、スマホ用ページのメニューにおける不具合。即解決が急務だったので、レイアウトが崩れない鉄板パターンへ改変。リストをtableに、テキストを画像に変更した。
●html
※imgは幅319px、高さ79pxで作成。アドレスは、cssから見た階層。

<link rel="stylesheet" href="css/style.css">

<h2>カテゴリ</h2>
<nav id="category" class="clearfix">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="TableCategory">
<tr>
<td><a href="#"><img src="images/noriki.gif" width="100%" alt="のり記について"></a></td>
<td><a href="#"><img src="images/manga.gif" width="100%" alt="マンガ"></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/web.gif" width="100%" alt="Web、PC"></a></td>
<td><a href="#"><img src="images/eiga.gif" width="100%" alt="映画、ドラマ"></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/life.gif" width="100%" alt="ライフ、ワーク"></a></td>
<td><a href="#"><img src="images/japan.gif" width="100%" alt="日本のくらし"></a></td>
</tr>
</table>
</nav>
●CSS

.TableCategory{
 border-top:1px solid #ccc;
}

.TableCategory tr td{
 border-left:1px solid #ccc;
 border-bottom:1px solid #ccc;
}

解決。
1410311
ご参考になれば幸いです。

【関連リンク】
なぜ CSS を使用した方が良いのですか? Adobeデベロッパーセンター
テーブルレイアウトがいけない理由HTMLとCSSの使い方

↑このページのトップヘ