わたくしめはやきうが好きでございます。やきうのことなら どんと来いでございます。明けても暮れてもやきうのことばかり 考えています。
以下、いろいろと語っていくでございます。
忘れました。
おぼえていません
はてさて…
何がありましたっけ?
ナカタ?
明訓。って、何故ここだけあってるのだ。
該当部分のみ示すと、HTMLはこんな感じ。
<div class="topmenu"> <!--#include virtual="menu.html"--> </div> <div> <!-- 本文部分の始まり --> <h2>やきうのぺーじ</h2> <p>わたくしめはやきうが好きでございます。やきうのことなら どんと来いでございます。明けても暮れてもやきうのことばかり 考えています。</p> <p>以下、いろいろと語っていくでございます。</p> : : (中略) : </div> <!-- 本文部分の終わり --> <div class="bottommenu"> <!--#include virtual="menu.html"--> </div>
<!--#include ... -->は、外部ファイルを
その位置に取り込む記法でこの例では menu.htmlを取り込んでい
る。
include記法はroyの場合HTML文書の拡張子を .shtml に
することで利用できる。
menu.htmlの内容は下記のとおり。
menu.html
<p><hr><a href="disp-none.html">野球</a><span> /</span> <a href="soccer.html">サッカー</a><span> /</span> <a href="music.html">音楽</a><span> /</span> <a href="cinema.html">映画</a><span> /</span> <a href="study.html">勉強</a><hr></p>
menu.htmlを先頭と末尾に2回表示させているが、先頭の
方は topmenu クラスで括り、末尾の方は bottommenu クラスで括っている。
また、メニュー項目の区切りとしてスラッシュを用いているのだがこれを
span要素で括っている。
bottommenu クラスとspan要素で括ったものを見せなくするため、
CSSで以下のように定義している。
div.topmenu { /* 最初のメニュー表示 */
position: fixed; /* スクロールせず固定 */
white-space: pre; /* preと同じように改行を
* 改行としてレンダリングする */
background: white;
top: 4em; width: 5em; /* H1とダブらない位置にずらす */
line-height: 1.4; /* 行間を広く */
}
div.topmenu+div { /* topmenuに隣接するdiv
- 本文としてあつかう */
margin-left: 6em; /* topmenuと重ならないように */
padding: 1ex;
}
div.topmenu span, div.topmenu hr {
/* CSS非対応ブラウザのためにメニューの上下に
* <hr> を、項目の区切りに / を入れているが、
* CSS対応ならそれらをレンダリングしない。
* / のほうは <span> /</span> で
* 括っておくことにする。 */
display: none
}
div.bottommenu {
/* CSS非対応ブラウザのためにページの末尾に
* 同じメニューを入れるが、
* CSS対応ならそれ自体をレンダリングしない。
*/
display: none
}
このソースをCSS非対応のテキストブラウザ w3m で見てみよう。
w3m このページのURL
101教室での「このページのURL」は
http://roy/~yuuji/2019/id/08/disp-none.shtml
見た結果は概ね以下のようになる。
display: none 利用例 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 野球 / サッカー / 音楽 / 映画 / 勉強 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ やきうのぺーじ わたくしめはやきうが好きでございます。やきうのことな らどんと来いでございます。 明けても暮れてもやきうのことばかり考えています。 〜〜〜中略〜〜〜 好きな選手は ナカタ? 好きな高校野球チーム 明訓。って、何故ここだけあってるのだ。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 野球 / サッカー / 音楽 / 映画 / 勉強 ━━━━━━━━━━━━━━━━━━━━━━━━━━━
リンク先を示すメニューをアクセスしやすい場所に置くという目的で 文書の先頭と末尾に同じメニューを置いておくと、
このページは読まずに次のページにジャンプしたい
このページを読み終えた人が次のページにジャンプしたい
両者にとってよい便宜となる。CSSが使え、position: fixed でつねにメニューを ページ内に留められるのであれば上下両方でなく1箇所でよいため 片方を display: none にしておくとよい。