xhml・html
レスポンシブWebデザイン チェック・プルダウン表示非表示
2019年03月17日
【ネットビジネス便利ツール】のモバイル対応の続きです。
今日は本命のメニューを書く予定だったのですが、先にチェックボックスを使って表示非表示を切り替える方法を書いた方がわかりやすいと思うので、順番を入れ替えます。
チェックボックスにチェックを入れると文字や画像が表示され、
チェックを外すと文字や画像が非表示になる、
こういう動きをご覧になったことがあると思います。
ネットビジネス便利ツール お問い合わせの【ユーザーです】をチェックしてみてください（問い合わせは送らないでくださいね）。
チェックが入ると入力項目が追加され、チェックを外すと入力項目が消えます。
cssだけで書くことができます。
html -------------------------------------------------
css ---------------------------------------------------
上は【チェック】をただの文字として表示していますが、ラベルとして表示してチェックボックスと関連付けることもできます。
こうすると【チェック】という文字のクリックでもチェックボックスを操作できます。
html -------------------------------------------------
cssは同じです。
更にチェックボックスを非表示にして、【チェック】のクリックで表示非表示を切り替えることもできます。
htmlは1つ上と同じです。
css ---------------------------------------------------
JavaScriptは使わずcssだけで書けるし便利です。【ネットビジネス便利ツール】でも色々な所で使っています。
プルダウンで同じような事ができないかと思ったのですが、こちらはJavaScriptを書かないとだめなようです。
jQueryを使う方法です。下のJavaScriptを読み込む前にjQueryを先に読み込んでおかないと動きません。
JavaScriptはhtmlの最後に読み込むのがいいらしいですが、色々な所で読み込んでいるとわけがわからなくなり非効率なので、私はいつも外部ファイルに保存してhtmlのヘッダ部分でまとめて読み込んでいます。
jQueryファイルをjquery.js、
下のJavaScriptをjavascript.jsに保存したとすると、htmlのヘッダにパスを追加します。
jQueryはCDNサーバーへのリンクでも大丈夫です。私はいつの間にかバージョンアップしていてある日突然動かなくなったら焦るので、借りているレンタルサーバーへファイルを置いています。
htmlヘッダ部分 ---------------------------------------
html -------------------------------------------------
css ---------------------------------------------------
JavaScript --------------------------------------------
値1を選択すると値1と表示され、
値2を選択すると値2と表示され、
値3を選択すると何も表示されません。
次回こそ肝の部分、メニューをまとめます。
今回のチェックボックスによる表示非表示切り替えを使います。
今日は本命のメニューを書く予定だったのですが、先にチェックボックスを使って表示非表示を切り替える方法を書いた方がわかりやすいと思うので、順番を入れ替えます。
チェックボックスにチェックを入れると文字や画像が表示され、
チェックを外すと文字や画像が非表示になる、
こういう動きをご覧になったことがあると思います。
ネットビジネス便利ツール お問い合わせの【ユーザーです】をチェックしてみてください（問い合わせは送らないでくださいね）。
チェックが入ると入力項目が追加され、チェックを外すと入力項目が消えます。
cssだけで書くことができます。
html -------------------------------------------------
<input type="checkbox" value="chk" name="inputchk" id="inputchk"> チェック------------------------------------------------------
<!-- ↓表示非表示を切り替える部分は、チェックボックスより下に配置 -->
<!-- 上では切り替えられない -->
<div id="inputk">
<input type="text" value="" name="data" id="data">
</div>
css ---------------------------------------------------
/* 初めは非表示 */------------------------------------------------------
#inputk {
display: none;
}
/* チェックボックスinputchkにチェックが入ったらinputkを表示 */
#inputchk:checked ~ #inputk {
display: block;
}
上は【チェック】をただの文字として表示していますが、ラベルとして表示してチェックボックスと関連付けることもできます。
こうすると【チェック】という文字のクリックでもチェックボックスを操作できます。
html -------------------------------------------------
<input type="checkbox" value="chk" name="inputchk" id="inputchk">------------------------------------------------------
<label id="inputopen" for="inputchk">チェック</label>
<div id="inputk">
<input type="text" value="" name="data" id="data">
</div>
cssは同じです。
更にチェックボックスを非表示にして、【チェック】のクリックで表示非表示を切り替えることもできます。
htmlは1つ上と同じです。
css ---------------------------------------------------
/* 初めは非表示 */------------------------------------------------------
#inputk {
display: none;
}
/* チェックボックスinputchkを非表示 */
#inputchk {
display: none;
}
/* チェックボックスinputchkにチェックが入ったらinputkを表示 */
#inputchk:checked ~ #inputk {
display: block;
}
JavaScriptは使わずcssだけで書けるし便利です。【ネットビジネス便利ツール】でも色々な所で使っています。
プルダウンで同じような事ができないかと思ったのですが、こちらはJavaScriptを書かないとだめなようです。
jQueryを使う方法です。下のJavaScriptを読み込む前にjQueryを先に読み込んでおかないと動きません。
JavaScriptはhtmlの最後に読み込むのがいいらしいですが、色々な所で読み込んでいるとわけがわからなくなり非効率なので、私はいつも外部ファイルに保存してhtmlのヘッダ部分でまとめて読み込んでいます。
jQueryファイルをjquery.js、
下のJavaScriptをjavascript.jsに保存したとすると、htmlのヘッダにパスを追加します。
jQueryはCDNサーバーへのリンクでも大丈夫です。私はいつの間にかバージョンアップしていてある日突然動かなくなったら焦るので、借りているレンタルサーバーへファイルを置いています。
htmlヘッダ部分 ---------------------------------------
<head>------------------------------------------------------
・・・
<meta http-equiv="content-script-type" content="text/javascript">
<!-- パスは環境に合わせて変更してください -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
html -------------------------------------------------
<select name="sort" id="sort">------------------------------------------------------
<option value=""></option>
<option value="val1">値1</option>
<option value="val2">値2</option>
<option value="val3">値3</option>
</select>
<div id="val1">値1</div>
<div id="val2">値2</div>
css ---------------------------------------------------
#val1 {
display: none;
}
#val2 {
display: none;
}------------------------------------------------------JavaScript --------------------------------------------
$(function(){
$('#sort').on('change', function(){
if($(this).val() === 'val1'){
$('#val1').show();
$('#val2').hide();
}
else{
if($(this).val() === 'val2'){
$('#val1').hide();
$('#val2').show();
}
else{
$('#val1').hide();
$('#val2').hide();
}
}
});
});------------------------------------------------------値1を選択すると値1と表示され、
値2を選択すると値2と表示され、
値3を選択すると何も表示されません。
次回こそ肝の部分、メニューをまとめます。
今回のチェックボックスによる表示非表示切り替えを使います。
コメント