![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.5ベストアンサー
- 回答日時:
><li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょう
ブラウザの表示メニューから「スタイルシートなし」を選択してみたら、極めてシンプルなHTMLだと言うことがわかると思います。
単純にページ内アンカーに飛んでいるだけです。
HTML5では、HTML4.01以上に、文書構造に従ったマークアップが求められています。実はHTML4.01もそうであったが、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
しかし、その部分はまったく守られていなかったために、HTML5では、文書構造を示すタグが追加されたにすぎません。!!!!
ソースを見られてもお分かりのように、スタイルシートを除けば、わかりやすいマークアップがされています。あなたにも検索エンジンにもわかる。
デザイン、どのように見せるかと、文書構造は独立して考えるべきです。まず、デザインは後回しにして、HTMLの基本をしっかりと学んでください。HTML5はまだ勧告の段階ではありませんから、HTML4.01strictを身につけること。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
とか。・・・HTML4.01ですが、HTML5は、HTML4.01strictの改訂版です。transitinalなんて知らなくて良い。
その後、スタイルシートを学んでください。
No.4
- 回答日時:
html5のheaderやnavi、sectionやarticleなどにframeの効果を期待されているのであれば、それは間違いですよ。
サンプルページがメニュー以外の箇所だけが変更されているように見えるのは、単にキャッシュなどで高速に表示されているだけです。実際は、ページ全体が更新されています。また、html5のheaderやnavi、sectionやarticleのタグの働きは、論理構造上の意味づけであり、特別な機能はありませんよ。正しいマークアップをすることで、正しくマークアップされていないページと比較して、将来的に検索エンジンなどで有利になるかもしれませんね。
No.3
- 回答日時:
いえ、それは、frameで読み込む予定の記事を含めて一枚にしたら?と言うことです。
_はタブに戻す。
<!doctype html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="ORUKA1951">
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:silver;}
header,article,footer{
_width:70%;
_margin:0 auto;padding:0;
_background-color:white;
_border:white 1px solid;
_border-radius: 10px;
}
body>header{
_position:fixed;
_width:80%;
_left:10%;top:0;
_background-color: gray;
_color:white;
_text-align:center;
_height:100px;
}
#contentTable{
_position:fixed;
_left:0;top:100px;
_width:14%;
_border:solid aqua 1px;
_background-color:aqua;
}
article{
_min-height:600px;
_border:solid gray 1px;
_margin-bottom:100px;
_padding-top:100px;
_position:relatove;
}
article header,article section,article footer{
_margin: 10px;
}
-->
</style>
</head>
<body>
_<header>
__<h1>見出し</h1>
__<div id="contentTable">
___<ol>
____<li><a href="#article1">記事1</a></li>
____<li><a href="#article2">記事2</a></li>
____<li><a href="#article3">記事3</a></li>
____<li><a href="#documentInfo">文書情報</a></li>
___</ol>
__</div>
_</header>
_<article id="article1">
__<header>
___<h1>見出し1</h1>
__</header>
__<section>
___記事本文
__</section>
__<footer>
__</footer>
_</article>
_<article id="article2">
__<header>
___<h1>見出し2</h1>
__</header>
__<section>
___記事本文
__</section>
__<footer>
__</footer>
_</article>
_<article id="article3">
__<header>
___<h1>見出し3</h1>
__</header>
__<section>
___記事本文
__</section>
__<footer>
__</footer>
_</article>
_<footer id="documentInfo">
__<h2>文書情報</h2>
_</footer>
</body>
</html>
この回答への補足
<li>のリンクをクリックすると下の内容が変わるのはどういう仕組みなのでしょうか?
ぐぐってもぐぐってもさっぱりわからないです。
No.2
- 回答日時:
HTML5では、HTML4.01で非推奨であったiframeが認められるようになりました。
が正解です。
そうであっても、iframeを使う限り、frameが必然的に持っている問題が、なくなるわけではありません。
数ページなら、
<header>
<h1>見出し</h1>
<div id="contentTable">
<ol>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
</div>
</header>
<article>
<header>
<h1>見出し</h1>
</header>
<section>
記事本文
</section>
<footer>
</footer>
</article>
<article>
<header>
<h1>見出し</h1>
</header>
<section>
記事本文
</section>
<footer>
</footer>
</article>
<article>
<header>
<h1>見出し</h1>
</header>
<section>
記事本文
</section>
<footer>
</footer>
</article>
<footer>
</footer>
のようにマークアップして、
header div.contentTable{
position:fixed;
width:20%;
top:100px;
left:0;
}
とかで、マークアップするほうが良いでしょう。
また、ページを動的に作成する方法も良いでしょう。・・・この方がベスト・・・
この回答への補足
header nav タグが追加されていて
時代の変化に戸惑っております。
<header>
<ol>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ol>
</header>
こうやって<header>の中でリストにすればリンクをクリックすると
<section>に表示されるのかと思いやってみましたがならず
<nav>タグをつけないとだめなのかと思い
つけてみましたがなりませんでした。
難しいですね。
No.1
- 回答日時:
> HTML5でiframeが認められなくなりました。
……えーと、誰からそんなことを聞いたのでしょうか?
確かにHTML5ではフレームに関するタグはiframe以外が非推奨になりました。
iframe「以外」が、です。
つまり、iframeはHTML5でも使用できます。
参考URL:W3CによるHTML5とHTML4との違いに関する文書の上記該当部分
http://www.w3.org/TR/2011/WD-html5-diff-20110525 …
(日本語訳)
http://standards.mitsue.co.jp/resources/w3c/TR/h …
この回答への補足
・・・読み間違えました。
お恥ずかしい限りです・・・・。
hitomuraさん愛想を尽かさず今後もお相手していただければ幸いです。
ご回答いただきありがとうございます。
ただ、疑問が別に出てきました。
http://www.coolwebwindow.com/temp/source/public/ …
このサンプルのように上のメニューをクリックすると
メニューを残しつつ下の表示が変わるようにすればどうすればいいのでしょうか?
ソースを見ても
<div id="menu">
<ul>
<li><a href="index.html">MENU1</a></li>
<li><a href="sample.html">MENU2</a></li>
<li><a href="index.html">MENU3</a></li>
<li><a href="index.html">MENU4</a></li>
<li><a href="index.html">MENU5</a></li>
<li><a href="index.html">MENU6</a></li>
</ul>
</div>
このように書いてリンクしているだけなので
どういうメカニズムかよわかりません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
要素間、要素内に隙間が空く
-
html の divとtable の役割
-
<div id="container">の使いか...
-
HTML文章の文字サイズについて
-
article、section、hgroup?
-
<div>テキスト</div>
-
h1に自分自身へのリンクを張...
-
HTMLの禁則処理解除について
-
divとpの使いわけ
-
HTML5のsection,articleについて
-
スペースを使わず文字位置を揃...
-
divの中に外部のHTMLを埋め込む
-
<!-- #BeginLibraryItemとは
-
セクションをdivで囲むと見出し...
-
携帯サイト、ナノでのタグ編集...
-
footerのclear:bothが効きません
-
インラインフレームのページ内...
-
HTML5 iframe の代わり
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
min-heightとheightの違いについて
-
div要素が重なってします
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
<div>テキスト</div>
-
ヘッダーとフッターだけ背景を...
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
セクションをdivで囲むと見出し...
-
divの中に外部のHTMLを埋め込む
-
h1のテキストサイズよりh2の方...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
-
3カラムレイアウトで「常に残り...
-
divとpの使いわけ
おすすめ情報