![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
No.2
- 回答日時:
NO.1です(お礼拝見済み)
ソースを初めて見ましたか?、それは失礼しました。
先日、
同じような方の修正を頼まれましたが、おそらく同じような作り方をしていると思います。
一旦、横道にそれますが、
最初にホームページビルダーの簡易モード?で作りませんでしたか?
そのモードは、誰でも簡単に作る事が出来るのですが、
作り方は、貼り絵です。(好きなコンテンツを好きな場所に固定する方法)
本来、HTMLは、文字の量や大きさによって流動的に、見る環境によっても変化させますが、固定の場合は、それが出来ません。
質問者さんの作り方は、貼り絵の様に簡単に作れますが、ウェブページとしてはデメリットが出るでしょう。
簡単に作りたい人(個人で楽しむ程度)はそれで十分なのですが、
表示に関する不具合には対応・対処できず、今回の様に不満がでるでしょう。
更に、複数の関連ページを増やす場合には、苦労するでしょう。
1、面倒だったり、難しければ、現状で我慢する。
2、お好みに作りたければ、時間を掛けて作り変える。
どちらかの選択です。
趣味の範囲なら、HTMLは自由だし、自己満足もあると思いますが、どちらでも良いでしょう。
HTMLは、基本的には、HTMLを書いた上からの順番で表示するのですが、
貼り絵(座標)の場合は、順番はどうでも良いのです。
見た目被らないようにすれば良いから。
貼り絵なのだから、全部座標によって固定されるわけです・・・
HTMLの最後部に書いたコンテンツを座標固定で上部にする事も出来ますから。
座標固定だから、流動的には出来ません。
更に、HTMLソースで読んだ人には意味が分からないウェブページになるでしょう。検索エンジンも同じ。
ですから、
最初の <BODY では全体の背景画像などを配置・設定しているのですが、
次の、<DIV style="top : 485px;left : 173px;
これは、小さな文章枠かな?は、最上部のコンテンツではないですよね?・・・
id="Layer12"って事は、もしかして、中盤のコンテンツなのに、
HTMLソース上では、何故か、一番上から書いています・・・
本来は、ヘッダーなどの一番上に来る部分が<BODY の次に配置します。
座標固定の部分とは、
style="top : 485px;left : 173px;
position : absolute;
z-index : 5;
この部分です。
各コンテンツのこの部分を取り去り、座標固定にするのではなく、
上から順番にコンテンツを書いていき並べます。
当然、縦や横に並べるのは、更にテクニックが必要です。
ここでCSSで配置を調整します。
という事は、修正修正でグダグダになる可能性もあるので、
最初から作りなおした方が早で、
HTMLの参考書があれば、勉強で遠周りなようでも、結果(将来的にも)早く・綺麗に・上手くできるでしょう。
一般的には、
<body>
<div id="wrapper"> <!-- 全体枠開始 -->
<div id="head"><h1>上部タイトル</h1><h2>タイトルや説明</h2></div>
<div id="side"><ul><li>サイド</li><li>メニュー</li></ul></div>
<div id="main"><h3>内容</h3><p>内容</p><p>内容</p></div>
<div id="foot"><p>フッター</p><p>(下部)</p></div>
</div> <!-- 全体枠終了-->
</body>
とHTMLで構造化したほうがよいでしょう。
ソースの日本語の部分を見れば誰でも内容が順番通りに読み進めます。
毎回、座標を使わなくてもカンバスは自由に使えます。
コンテンツが増えれば、勝手に下に長くなります。
CSSで各コンテンツの幅や配置(横に配置とか)を決めます。
NO.1の回答は、上記の
<body>
<div id="wrapper"> <!-- 全体枠 -->
の部分を、
<body>
<div id="wrapper" style="width:800px; margin:0 auto; background:#F5F5F5;"> <!-- 全体枠 -->
のように横width幅だけを設定して、heightの縦は設定しないという意味。
とすれば、縦が流動的になり、コンテンツを増やしてもどんどん下に伸びます。
大変詳しくありがとうございました。 <m(__)m>
日本語は読めるのですが、理解ができません。
昔N-ベイシックで並び替えをして、MSDOSー5.0を少しさわり、Excelのマクロ記述の一部をわずかに修正できる程度です。
HTMLの今回は、イメージが全く浮かびません。
試行錯誤も全くできないレベルです。 <m(__)m> 悔しい!
ありがとうございました。
No.1
- 回答日時:
<body><div>文章を溢れるぐらい永遠長く・・・・</div></body>
デフォルトで、この場合、永遠と長く表示されますよ。
A4の概念を取っ払い、広いカンバスを自由に使いましょう。
もしかして、heightで縦を固定してコンテンツを入れてませんか?
heightは設定せずに、開放してやって下さい。
コンテンツを増やせば増やすほど縦長になり、
ブラウザの表示範囲より長ければスクロールバーが出てきます。
横サイズは、widthで600px~1200px前後で枠幅を固定する場合が多いですが、
サイドバー設置の場合で、よくwidthで幅を指定して広くします。
widthで幅を固定しないと、ブラウザで表示した範囲が100%となります。
逆に、ブラウザよりwidthの指定が広ければ、下部に横用のスクロールバーが出ます。
ウェブページに縦の概念はありません。
縦のheightを設定しない場合が多く、
heightを設定する場合は、
画像や動画などのメディアを固定表示したい場合などです。
仮に、文章などにheightを設定してしまうと、
その長さ以上に文章などがある場合には、
heightの指定範囲内で切れてしまいますし、
全体ズームではなく、文字サイズを大きくされたらその範囲で収まらなくなります。
つまり、
heightを設定しない事で、縦長ページが勝手に作れます。
早速のご回答ありがとうございます。 私は、普段
主にアイコンやプルダウンメニューの操作に頼っています。
おそるおそるnaokita様の言われる部分と思えるトコロを開いてみました。
もしここなら、どうすればよいのか、いま少し教えてください。 <m(__)m>
◇HMLソースの9行目から下記の様になっています。
◇編集スタイルはスタンダードから始めています。
</HEAD>
<BODY bgcolor="#CCFF99" text="#336633" link="#663300" vlink="#CC9966" alink="#CC3366" background="bu03_bg.gif">
<DIV style="top : 485px;left : 173px;
position : absolute;
z-index : 5;
width : 137px;
height : 128px;
visibility : visible;
" id="Layer12" align="center"><BR>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) 最高裁判所から通達がある Wordの書式設定。所謂 裁判所に提出するすべての書類のことです。 A4縦 2 2022/12/23 15:00
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- Instagram Instagramの投稿を、16:9の画像サイズにして、その画像真ん中の、自分のページを見たときの各 0 2023/08/08 00:17
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
- 数学 情報処理詳しい人!! A4縦のレポート文書に4:3の大きさの横向きの写真画像を貼り付けることにした。 2 2022/12/18 02:30
- 一戸建て こうゆう縦長の横すべりだし窓、 家に付いてる人いませんか? (横すべりだし窓ってどちらかというと横長 2 2022/07/02 16:32
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
このQ&Aを見た人はこんなQ&Aも見ています
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページの画面文字を濃く...
-
ホームページの内容変更を無料...
-
ビルドとリビルドの違いを教え...
-
ホームページを作りたいのです...
-
ゲームを作ったのでホームペー...
-
ホームページビルダー15で作っ...
-
秀丸に関して教えて下さい。
-
ホームページビルダーを複数の...
-
FFFTPでサーバに新規フォルダが...
-
広告無しのホームページ作りた...
-
vtuverになりたいのです。 しか...
-
メールフォーム設置の文字化け...
-
ホームページビルダー
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
-
ビフォアーアフターのページは...
-
今さらですがHPを作成するに当...
-
ホームページ制作で教えてくだ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページ・各ページの<h1>...
-
dreamweaver CS5でフォトアルバ...
-
.ホームページビルダーVer.12...
-
IE9環境とIE11環境でのHTMLコード
-
ブログテンプレート作り CSSで...
-
小タイル「画像バックで、テキ...
-
jQuery Ajax通信をランダムで表示
-
FC2ホームページで大見出しのフ...
-
ホームページを作る時は、原稿...
-
書き出し
-
FC2で画像とHPが表示されない!
-
ホームページのヘッダーについて
-
htmlでテーブル内にテキストボ...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
Excel で等間隔で縦線を引きた...
-
aタグに直接style=""で:hoverを...
-
エクセルでサイズ指定でPOP...
-
丸メガネが似合うようにするに...
-
table内で画像と文字をセンター...
おすすめ情報