HTMLで非常に長いリストを作成し、訪問者が折りたたんだり展開したりできるようにしたいと思ったことはありませんか？ 訪問者がこのようなことができるようにする機能を設定するために、この記事では、これらの期待に応えるようにコードを調整するのに役立ちます。
1
Windowsではメモ帳やワードパッド、MacではTextEditのような簡単なテキスト編集プログラムを開いてください。
2
他のウェブページと同じように、<html>タグと<head>タグを追加してウェブページを始めます。
3
を追加し、折りたたみ/展開可能な形式でリストを表示するようブラウザに指示します。 このスクリプトを作成するには、次のコードを使います。
<style type="text/css"> .row { vertical-align: top; height:auto !important; } .list {display:none; } .show {display: none; } .hide:target + .show {display: inline; } .hide:target {display: none; } .hide:target ~ .list {display:inline; } @media print { .hide, .show { display: none; } }.} </style>
4
ページのhead部分を、ページのheadの終了タグ（</head>）で閉じます。
5
HTMLコードの本文を作成します。 本文を開始するタグ（<body>）を入力します。
6
リストを展開したり折りたたんだりするために、ユーザーのブラウザが使用するHTMLスタイル情報を含むリストコンテンツを作成します。 次のコードを使って作成してください。 コード内とコードのルールに従うことを忘れないでください。
<div > <a href="#hide1" >展開</a> <a href="#show1" >折りたたみ</a> <div > <ul>
<li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </div> </div>
7
</body>タグを入力して、HTMLコードのbodyセクションを閉じます。
8
</html>タグを入力し、ファイルを完成させます。
9
HTMLファイルの拡張子かHTMファイルの拡張子を持つファイルとして作品を保存し、ウェブに完全にアップロードする前にブラウザでページをプレビューしてください。
コメント
最新を表示する
NG表示方式
NGID一覧