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で質問しましょう!
似たような質問が見つかりました
- 教えて!goo 質問をして回答者さんにお礼文を書こうとしても、お礼のカウントを押すボタンだけは表示されて、それ以外の 1 2022/07/26 10:19
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- Excel(エクセル) 1から9まで表示するのに必要なボタン 1 2023/02/05 19:06
- バッテリー・充電器・電池 電卓の内部基板上に、ボタン電池を挟んでとめるホルダーが、ハンダ接合で付けられています。 使用したいボ 1 2022/11/05 08:17
- バッテリー・充電器・電池 電卓のボタン電池種類について。 電卓の内部基板上に、ボタン電池を挟んでとめる電池ホルダーが、ハンダ接 4 2022/11/05 17:03
- Excel(エクセル) マクロでボタンにつける名前がどこに設定されているかわからないケースがありました。 1 2023/06/19 19:37
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- Visual Basic(VBA) VBAで早押しゲームを作りたい 4 2022/05/12 13:46
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
inline-blockをネストすると表...
-
DL,DT,DDタグについて
-
min-heightとheightの違いについて
-
align="middle"が無視される T...
-
ヘッダーとフッターだけ背景を...
-
ホームページ作成会社を探して...
-
divを横に並べる方法
-
CSSで画像を下に配置
-
【html】iframeを使用したmp4の...
-
HTML.CSS 100%表示にする方法
-
複数のボタンを等間隔に、かつ...
-
<BR> が多数連続しています。
-
CSSのBOX内だけフォントサイズ...
-
マウスをのせると画像が動くcss...
-
セクションをdivで囲むと見出し...
-
line-height指定で発生する余白...
-
html,css初心者です。ヘッダー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
おすすめ情報