html 階層を下げると3分割画面が1画面になる

解決済

質問者：new_hana
質問日時：2025/02/04 23:08
回答数：5件

win11

vix221を使用してhtmlを作成しています。
win11の動作保証はありませんが、使用上の問題はないので使っています。
・私はhtml構文についての知識はありませんが、コピー等で引用し使える様に使っているレベルです。

相談は、3盤割画面を開いて
左の画面にリンクを置いて、
右の画面に内容を表示しています。

右の画面の表示内容が多い場合、2ページ目も作成されます。
この2ページ目に行くと、画面分割が1画面になってしまいます。
これを、快勝する方法のアドバイスをお願いしたいのです。
判りにくいでしょうが画面遷移を天応します。

html先頭の記述の抜粋です
----------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

3分割が開く記述です
-----------------------
<html>
<head>
<title>my album</title>
</head>

<frameset rows="15%,85%">
<frame src="UpperFrame.html">name="upper"
<frameset cols="12%,88%">
<frame src="LeftFrame1.html" name="left"
scrolling="auto">
<frame src="8月6日/白馬大雪渓を歩く001.html"name="right"
name="right" scrolling="auto">
</frameset>

</BODY>
</HTML>
--------------------------

2ページ目に行く記述です
-----------------------
<body>
<p class="header">8/6　白馬大雪渓を歩く</p>
<p class="sequence"><a href="白馬大雪渓を歩く002.html">次へ</a> </p>
・
・
・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.5ベストアンサー

回答者： gura_
回答日時：2025/02/06 22:09

new_hana さん

････この2ページ目に行くと、画面分割が1画面になってしまいます。･････

１．No.2 さんの言われるように幾つかの間違いもありますが、
　白馬大雪渓を歩く001.html
内の、

2ページ目に行く記述です
-----------------------
<p class="sequence"><a href="白馬大雪渓を歩く002.html">次へ</a> </p>

を↓

<p class="sequence"><a href="白馬大雪渓を歩く002.html" target="right">次へ</a> </p>

と修正すれば、取り敢えずの問題は解決するはずです。

２．ただし、frameset は廃止になっていますので、代替えの記述にすることが望ましいでしょう。

３．そのため、代替えのトップのframesetのページ+UpperFrame.html+LeftFrame1.htmlを、iframe を使って1ページで書くと、この様になります。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.fset{ height: 94vh; width: 100%;
display: grid;
grid:15fr 85fr / 12fr 88fr;
}
.fupper{
grid-row: 1; grid-column: 1/3;
}
.fleft{
border: solid 1px #bbb ;
padding: 8px;
grid-row: 2; grid-column: 1;
}
.fright{ width: 100%; height: 100%;
grid-row: 2; grid-column: 2;
}

</style>
</head>
<body>
<div class="fset">
<div class="fupper">ここに、UpperFrame.html に書いていた内容文を書く</div>
<div class="fleft">
ここに LeftFrame1.html に書いた内容文を書く<br><br>
<a href="8月6日/白馬大雪渓を歩く001.html" target="right">観光地A</a><br><br>
<a href="8月6日/白馬大雪渓を歩く002.html" target="right">観光地A2</a><br><br>
<a href="8月6日/観光地B.html" target="right">観光地B</a><br><br>
</div>
<iframe class="fright" src="8月6日/白馬大雪渓を歩く001.html" name="right" scrolling="auto"></iframe>
</div>
</body>
</html>

４．ただし、
白馬大雪渓を歩く001.html
白馬大雪渓を歩く002.html
観光地B.html
は、いずれもフォルダ　8月6日/　内にあるとします。

５．仕上がりページ。下図。↓

- 0
- 件

通報する

この回答へのお礼

有り難うございます。
デザインの記述について大変参考になります。（記述を参考に応用ができそうなので）

皆さんからの指摘もあり、html4.01→5で作成できるアプリを探しています。

htmlが作成できるアプリについて、AIアシスタントに何度か質問し、やっと使えそうなのが下記です。
・jalbum（無料版は24枚制限・有料版で制限解除）
・PhotoPageGen（英語表記だが無料）

PhotoPageGenをインストールしようと思っていますが、実行時にマイクロソフトディフェンダーが警告を出しました。
AIに確認したところ、未登録の開発者によるソフトの場合、SmartScreen の警告が出ることがあるとのことでした。

このアプリでサムネール＋拡大写真へのリンクが作成できれば、できたhtmlファイルをデザインの記述でご指摘いただいた内容を参考に作成してみたいと思います。

●他にお勧めのhtml作成アプリがありましたら教えてください。

【条件】
- HTML5対応
- 写真数百枚のサムネイルを縦横10行で作成可能
- サムネイルをクリックすると、大きな写真が新しいタブで開く
- サムネイルサイズを自由に設定可能
- 写真にコメント入力・表示が可能
- HTMLのファイル名を写真フォルダ名にできる
- フォルダー単位で写真選択ができる
- 縦の行数を指定して、複数ページに分けることができる
- HTMLの出力フォルダを写真フォルダ内に自動配置できる
- オフラインで使用可能

よろしくお願いいたします。

通報する

お礼日時：2025/02/07 22:38

No.4

回答者： rera1016
回答日時：2025/02/06 14:26

私はシステムエンジニアとして30年近く働いています。

AIについてもディープラーニングによって大きく発展する以前の事から理解しています。

所詮、生成AI自体が学習内容によっては誤った結果を出すことも良くあり、人間が学習内容の正否を判定して指導していかないと、事実とは異なるデタラメを出しかねません。

まだまだ生成AIは発展途上の段階であり、あなたの助けにはならないし、今回のように赤っ恥をかきます。

的確なものを求める上では生成AIは「使ってはいけません」。

入門書を買って勉強してください。反論はなしです。

- 0
- 件

通報する

No.3

回答者： rera1016
回答日時：2025/02/05 12:32

ChatGPTなどの生成AIは100%正解を出さないので、鵜呑みにしてはダメです。

情報弱者丸出しです。

勉強するならちゃんとした入門書を買って読みましょう。

- 0
- 件

通報する

この回答へのお礼

有り難うございます。

＞鵜呑みにしてはダメです。
＞情報弱者丸出しです。

ご指摘もっともで、html作成アプリをChatGPTに聞くと、sれらしい回答はしてくれるのですが、既に廃盤だったり、バージョンが上がってhtml作成機能は排除されているとか・・
手まくっていますが、満足なアプリの回答は無かったですね。
その中で、使える様なのをDLして確認したりして・・・
そんな物だと思って受け取るしかないのでしょうが。

html作成を要件を示してChatGPTに書かせると、それなりに回答してくれます。
それを実行するとおかしいところはないので、まずは使えそうです。
デザインなんかの要件を示しても、書いてくれるのですぐに確認できて良いとは思いました。

私が使っているhtmlの構文を示すと、間違いであったりバージョン5にする訂正を入れてくれたりと助かっています。
その中で、間違いを指摘されると理解もできて良い様に思いました。
実行してみて、おかしければ確認ができて修正も早いです。

やりたいことを文章にして示すのが難しいというか、なかなか伝えにくい物だと認識しました。

通報する

お礼日時：2025/02/06 13:43

No.2

回答者： Ogre7077
回答日時：2025/02/05 09:50

記述誤りがあるので直しましょう。

<frame src="UpperFrame.html">name="upper"
↑ name がタグの外に出ている
<frame src="8月6日/白馬大雪渓を歩く001.html"name="right"
name="right" scrolling="auto">
↑ name が空白区切りされていない / 二つある
</frameset>
↑ 終了タグはもう一つ必要

これで解決できないならば、リンク先の指定に target を追加しましょう
<a href="白馬大雪渓を歩く002.html" target="right">

余計なお世話かもしれませんが、

frame は非奨励の機能と警告されていますので、もしかしたらこれが原因かもしれません。
https://developer.mozilla.org/ja/docs/Web/HTML/E …
> この機能は突然動作しなくなる可能性があることに注意してください。

各ページの中に UpperFrame.html と LeftFrame1.html の内容を含めてしまえば、問題なくなりますのでお勧めです。
例)
<section style="height:15vh">{UpperFrame の内容}</section>
<div style="display:flex">
<section style="width:12vw">{LeftFrame1 の内容}</section>
<section>{白馬大雪渓を歩くの本文}</section>
</div>

- 0
- 件

通報する

この回答へのお礼

有り難うございます。

間違いの指摘は編集しました。
＞frame は非奨励の機能と警告されていますので、もしかしたらこれが原因かもしれません。
・rera1016さんも指摘していましたね。
　そこでも書かせて頂きましたが、チャットgptを使いながら自分のやりたいこととアド倍頂いた方法等を踏まえて努力したいと思います。

＞各ページの中に UpperFrame.html と LeftFrame1.html の内容を含めてしまえば、問題なくなりますのでお勧めです。
・記述頂いた構文は参考になります。

通報する

お礼日時：2025/02/05 12:13

No.1

回答者： rera1016
回答日時：2025/02/05 00:53

申し訳ないですが、今のHTML(HTML5)では、フレーム要素(FRAMESET、FRAME)は廃止されました。

ブラウザーによってはHTML 2.0時代のサイト表示にも対応できるよう、フレーム要素が有効になっている場合がありますが、スマホなどでは機能しません。

ですので、フレーム要素は使わないでください。
どうしてもフレーム要素を使って、一部分だけのページ内容を変えたいというのであれば、インラインフレーム要素(IFRAME)を使ってください。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

HTML5においては、レイアウト分割としてdiv要素を用います。
そして位置や大きさにおいてはスタイルシート(CSS)を使って指定します。
また、CSSを使ってdiv要素に対してスクロールバーをつけることもできます。

"top.html"
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">ヘッダ</div>
<div class="navigation">メニュー、ナビゲーション</div>
<div class="main">メイン部分</div>
</body>
</html>

"style.css"
.header {
left: 0px;
top: 0px;
width: 100vw;
height: 100px;
}

.navigation {
left: 0px;
top: 100px;
width: 20vw;
height: calc(100vh - 100px);
}

.main {
left: 20vw;
tiop: 100px;
width: 80vw;
height: calc(100vh - 100px);
}

すでに時代はHTML5ですので、書店などで入門素を購入して勉強しましょう。

- 0
- 件

通報する

この回答へのお礼

有り難うございます。

＞申し訳ないですが、今のHTML(HTML5)では、フレーム要素(FRAMESET、FRAME)は廃止されました。
・やはり、時代は進んでいるのですね。
　今の物で努力しても、先行き表示出来なくなるというのは・・・

・チャットgptを利用しながら、努力して見ます。

html、Styleシーtの構文を有り難う御座います。
出来る処から、手を着けたいと思います。

通報する

お礼日時：2025/02/05 12:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！