プロが教えるわが家の防犯対策術!

<frame>タグで、画面を分割していたWebページを、<frame>タグを使わないで書きかえたいと思います。
<table>タグやスタイルシートを使って書き換えようと思い、いろいろ調べたのですが、分かりませんでした。
デザインは画面左側にメニューがあり、右側にそれぞれの内容ページが表示されるよくあるパターンです。
<frame>タグの場合、別にHTMLファイルを作りメニューに追加してそのファイルを書き換えれば良いですが、<table>タグを使う場合や、スタイルシートを使う場合にはどうすればいいのでしょうか?
また、メニュー項目が増えたときに1つのファイルの書き換えですむようにはできますでしょうか?
もし、お分かりの方がいらっしゃいましたら、サンプルコードとあわせて
教えていただけないでしょうか?
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

CSSの2カラムレイアウトは


http://css.uka-p.com/
ここに載っています。
CSSはデザインの柔軟性がとても高いです。
そしてソースの軽さ。表示の速さ。
しかも、CSSを外部ファイル化すればデザイン変更もかなり楽々に。(内容の変更じゃないんです。あしからず。)

テーブルレイアウトはどのブラウザでもほとんど同じようにデザインが表示されます。
しかし、複雑になればなるほど重くなります。(何重にもするなど。)
また、音声読み上げブラウザ等ではうまく内容が表現されないようです。

CSSレイアウトもブラウザによって表示が異なることがありますが、それはCSSハックという手法で回避しています。

僕も、小学生の時(現在中2)テーブルでレイアウトをしていたのですが、かなり重かったです。
で、試しに違うページをCSSで作ってみたら、結構軽くなりました。
それからCSSをずっと4年間使い続けてるわけですが・・・

僕としてはCSSレイアウトを推奨します。
    • good
    • 0

サーバーと契約していて、そのサーバーが利用可能であればPHPでできると思います。


このサイトの「マイページ」を開くと、同じような感じの構成のページが出てきますよね。
ここのURLを確認すると、
http://personal.okwave.jp/mypage.php3
とでてきて、PHPで構成されてることがわかります。

それができないなら、やはり同構成にして逐一メニューなどを追加するしかないと思います。

table より div で構成するほうがいいという意見が多いですが、
個人的には経験上SEO対策的観点からみてもそう大差はないですし、
対応ブラウザの観点からもこのほうがいいと思います。
世界基準に合わせて div でやっておいたほうがいいとも言われますが、
もうそんなこといい始めて10年以上経ちますし、大手サイトでも table で構成されてるところは多いです。

あくまで後半部分は個人的意見ですので、参考までにしてください。
    • good
    • 0

<html><body>


<table>
<tr>
<td width="x">左の内容全部</td>
<td width="y">右の内容全部</td>
</tr>
</table>
</body></html>

xとyには幅を取りたいドットを書きます。
一般的にはxが200で、yが600かな??
お使いの環境によって表示が異なりますが、いろいろ試してください。

http://www.geocities.jp/multi_column/ ←参考にCSSで
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qフレームを使わない表示の仕方

個人のHP作成の際フレームを使おうとしていましたが、よくないと聞き他の表示の仕方を探しています。
フレームを使わずにフレームのような表示をするにはどうしたらよいでしょうか。
(メニューと表示部分を上下に分け、メニュー部分はどのページでも表示させたいです)
CSSやjavascriptなど使うのかな、と思いつつどう書けばそうなるのか全くわからない状態です。
ぜひ知恵をお貸しください。
また、わかりやすく説明されているサイト様などあれば教えてください。

Aベストアンサー

初めての場合、下記のページがとても参考になると思います。

http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

QCSSによるFrameの代替方法

趣味でHPを作成しているものなのですが、
左 |____上_____
左 |
左 |____下_____
という3分割フレームを使っています。
左にはサイトMapを置き、上にはページタイトル、
そして、下には、左のMapでクリックしたものを「target」で、
下に表示しているのですが、
今後Frame要素がなくなるのではないかと
危惧している為、CSSで代替出来ないかと考えております。
左と上はフレームである必要も無いので良いのですが、
サイトの画面を移動せず、下という1部分だけを
切り替えてという感じで引き続き運営して行きたいのですが、
CSSで代替できないでしょうか?
なんとなく段組みレイアウトとJavaScript(こちらは
カテ違いですがわかれば)あたりで、何とか出来ないかと
思っています。その他の言語でしょうか?
私は独学でやっているもので、ジャストなものをサイトで探しても
見つからず、持っている本等にも書いてないので、
お分かりの人がいれば教えて頂きたいと思います。
宜しくお願い致します。

Aベストアンサー

フレームを使わなければ全てのページにメニューを書けば良いのですが、同じメニューを全てのページに入れるのは面倒ですね。

それでフレームを使っているのだと思いますが、メニュー部を共有するならSSIを使う方法が比較的見つけ易いですね。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=GGLG,GGLG:2006-05,GGLG:ja&q=ssi+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
但し、サーバーがSSIに対応していないと使えませんし、メニューのリンクを検索エンジンが辿るのか?なんて心配もありますね。

javascriptでメニュー部を書き出しても良いのですが、noscriptに同じことを書くことになりますので全く旨みがないのではないかと思いますし、noscriptを書かないと検索エンジンは辿りませんね。
普通に外部javascriptを作ってdocument.writeで書けば良い方法です。

そんなときには、perlでも覚えてパソコン内でperlを動かしてHTMLファイルを作らせるようにしてしまえばメニューの更新も簡単に済みますけどね。
メニュー部分のHTMLのファイル(1つのファイル)と今まで内容が書かれたファイル(沢山あるファイル)を合体させて新しいファイルを作り保存するスクリプトですね。
---ローカル環境でperlを動かすための参考ページ-----------
ActivePerlのダウンロード
http://www2j.biglobe.ne.jp/~apollo/server/server.html
AN HTTP Server Home Page
http://www.st.rim.or.jp/~nakata/

---実際にスクリプトを組む時の参考ページ--------
perlファイル操作とファイルハンドル
http://www.kent-web.com/perl/chap6.html

ページが増える度にperlにHTMLファイルを作らせてそれを一括でサーバーにアップロードすれば簡単に済みますよ。
パソコンの中にメニュー管理用ページを作ってメニューの変更などができてボタンを押すとそれを埋め込んだファイルを作るようにしておくとより簡単になります。

以上参考意見でした。

フレームを使わなければ全てのページにメニューを書けば良いのですが、同じメニューを全てのページに入れるのは面倒ですね。

それでフレームを使っているのだと思いますが、メニュー部を共有するならSSIを使う方法が比較的見つけ易いですね。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=GGLG,GGLG:2006-05,GGLG:ja&q=ssi+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
但し、サーバーがSSIに対応していないと使えませんし、メニューのリンクを検索エンジンが辿るのか?なんて心配もあり...続きを読む

Qdiv内に外部のurlを表示させたい

たびたびお世話になります。

divにスクロールを表示することで、iframeのようにブラウジングすることができますが、
このdiv内に外部のurlを表示させることは可能でしょうか?
検索してみたのですが、思うようなものが見つからず困っています。
それとも、不可能なのでしょうか?

もし可能なのであれば、その方法等簡単に記述していただければ幸いです。

Aベストアンサー

iframeの代用はobjectを使うのが定石のようです。

こんな感じでしょうか?
<body>
<div>
<object type="text/html" data="http://www.yahoo.co.jp/" width="600" height="300">
<p>object に対応していない場合はこれが表示される</p>
</object>
</div>
</body>

ただ、Objectタグには制限が多く使いづらい部分もあります。
※たとえば、枠の非表示などができない
CGIやPHP、JavaScriptを介す方法を考えた方が、場合によってはいいかもしれません。

とりあえず、一つの回答ということで…。

Qフレームとiframeの違い

今、タグを調べているのですが、frameとiframeの違いが分かりません。
私にはどちらもブラウザを分割して表示するもの程度にしか理解できません。
どなたか分かりやすく説明して頂けないでしょうか?
分かる方には初歩的な質問だと思うのですが、考え方が悪いらしく、まったく理解できません。
ご教授お願い致します。

Aベストアンサー

frame は画面を左右に分割したり、上下に分割したりできますよね?
でも、 iframe は、分割する、というのとは少し違います。
iframe は、画面上の好きな位置に、好きな大きさで HTML を表示させることができます。
つまり、iframe は、「画面上に HTML ファイルを埋め込むもの」と考えれば分かりやすいと思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QHTMLからフォルダを開きたい

いつも大変お世話になります<(_ _)>

Webサーバー上にあるWebページ(HTML)の中に、ローカルPCのフォルダを開くリンクを付けたいのですが、
<a href="file://c:\windows">OPEN</a>
としても、何も反応しません。

いろいろ調べたのですが、上記の方法しか見あたりません。

なお、ブラウザのアドレス欄に file://c:\windows と入力すると、フォルダの内容が表示されます。
※Firefoxだと、ファイルの一覧になりますが・・・

何か環境によって挙動が異なるのでしょうか?
それとも、セキュリティ上の観点から最近じゃ出来なくなっているのでしょうか?

是非ともお助け下さい。宜しくお願い致します。

Aベストアンサー

file:///C:/windows/
/は三つでは・・・
 IEの場合はエクスプローラ(ファイルマネージャ)が開くような・・・
 IEはファイルマネージャーと一体のブラウザなので・・・

★実は、ローカルサーバーが必要です。
 apacheでも何でも良いので、WEBデータの入っているフォルダーを
<VIRTUALHOST 127.0.0.1>
C:\Document and settings\my document\web
 とかに指定して、Windowsのhostsファイルで、適当なサーバー名を指定しておきます。
myLocalhost 127.0.0.1
とか・・・

 そうすると
http://myLoclahost/
 で開けます。

 

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

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

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qスタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面より下に100pxはみ出してしまいます.
次のようにdivを入れ子にするとうまくいくんですが,内部に表示させる内容によっては不具合が出るので,どうしてもdivどうしが独立した形で実現させたいです.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが,質問の意味を理解してもらえずに別に問題はないという回答を1件頂いたのみで解決できませんでした.また,テーブルではなく必ずスタイルシートで実現したいです.対策をご存知の方,ご教示よろしくお願いします.

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面...続きを読む

Aベストアンサー

思い出したのでIE対応にするための追記。

前回のサンプルの<head>~</head>に以下を追加。
<!--[if IE]>
<style type="text/css">
#Content {
width:100%;
height:expression(document.body.clientHeight - 100);
}
</style>
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/


人気Q&Aランキング