HTMLのタブ

HTMLでタブ機能をつけるにはどういうふうに書けばよいのでしょうか？

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2016/08/29 11:33

コンピューターの世界でタブというと、二つの意味があります。

--

一つ目の意味「タブキーによる文字間隔空け」ならば、
HTML の標準機能では、タブ文字 (U+0009 CHARACTER TABULATION) は空白として扱われるので、
少々特殊な扱いをしなければいけません。

<pre>
alpha&Tab;beta&Tab;gamma
</pre>

ですが、元はタイプライターの簡易図表作成機能なので、
HTML では表組みするのが正しい姿だと思います。

<style>table td { min-width:4em; }</style>
<table>
<tr><td> α <td> β <td> γ
</table>

--

二つ目の意味「タブによる表示切替インターフェース」ならば、
HTML の標準機能には無いので、スタイル・スクリプトを自前で用意するしかありません

<style>
.tabpane nav { margin:0 0.5ex; }
.tabpane nav a { text-decoration:none; min-width:4em; display:inline-block; padding:0 0.5ex; }
.tabpane nav a { border-top:medium solid #444; background:#ddd; color:black; }
.tabpane nav a:hover { background:#aaa; }
.tabpane nav a.active { background:#444; color:white; }
.tabpane .content { display:none; border:thin solid black; margin:0; padding:1ex; }
.tabpane .content.active{ display:block; }
</style>
<script>
document.addEventListener('click', function(ev,_){
_ ; function EACH(o,f){if (o) Array.prototype.forEach.call(o, f)}
_ ; var a = ev.target; if (!a.href) return;
_ ; var cmd = a.getAttribute('href'); if (!/^#.+/.test(cmd)) return;
_ ; var e = document.getElementById(cmd.substr(1)); if (!e || !e.classList || !e.classList.contains('content')) return;
_ ; var p = e.parentElement;
_ ; while (p && !p.classList.contains('tabpane')) p = p.parentElement;
_ ; EACH( p.querySelectorAll('.content.active, a.active'), function(x){x.classList.remove('active')} );
_ ; e.classList.add('active');
_ ; a.classList.add('active');
_ ; ev.preventDefault();
}, false);
</script>
<div class=tabpane>
<nav>
<a href=#alpha class='active'>α</a>
<a href=#beta>β</a>
<a href=#gamma>γ</a>
</nav>
<article class='content active' id=alpha> this is alpha. </article>
<article class='content' id=beta> this is beta. </article>
<article class='content' id=gamma> this is gamma. </article>
</div>

No.2 回答者： ORUKA1951 回答日時： 2016/08/29 10:43

preしかありません。

仕様書を読んで置きましょう。HTML4.01でよいですから、一度は通して読んでおくべきです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　本仕様は、ここに空白類文字と明示的に定めたもの以外のスペース文字類については、レンダリングその他の挙動を示すことはない。 この理由から、著者は、空白類を含む視覚的整形効果を及ぼすためには、スペース類文字ではなく適切な要素あるいはスタイル指定を行う必要がある。
　PRE要素を除くすべてのHTMLの要素にとっては、空白類は「語」を分離するものである。 (ここで言う「語」は、「空白類でない文字の列」を意味する。) テキストを整形する際、ユーザエージェントはどれが「語」であるかを認識し、特定言語(用字系)及び出力メディアでの制約に従って整えていく必要がある。
・・・・・
　ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。

　PRE要素は、1つ1つの空白類が意味を持つものであるような、整形済テキストを扱う際に用いる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

スタイルシートで指定する場合は、white-space:プロパティの値に、pre、またはpre-wrapを指定します。

No.1 回答者： _11 回答日時： 2016/08/28 17:43

<pre>

表示する
</pre>
上記のように
<pre></pre>で挟んだ内側に入力したTabキーはそのまま表示されます