HP 1ページの構成 - ネットで簡単に作成する方法
- HPを作成中の方に、1ページの構成方法をご紹介します。専用ソフトを使わず、メモ帳でコーディングする方法です。
- 1ページを上下に分割して、上部分には共通の要素を表示し、下部分にはページごとの内容を表示すると良いでしょう。
- 左側にはページ内リンク、右側にはコンテンツを配置することができます。適切なCSSの設定で位置を決めましょう。
- ベストアンサー
HP 1ページの構成
HPを作成中です。専用ソフトを使わず、メモ帳にコードを記述していっています。 そこで、教えていただきたことが。どうしてもうまくできません。 まず、1ページの構成としてフレーム上下で分割したものを作りました。 上は、TOPとかリンクとかどのページに行っても、その部分は表示されるもので、 下は、TOPだったらTOPの内容、リンクだったらリンクの内容を表示させています。 今回は、下の部分についての質問です。 希望は、下のような形のページを構成したいと思っています。 ーーーーーーーーー あ | あ (2) い | ー---- う | い (3) | ーーーーー (1) | う (4) 左にそのページ内のリンク(<a name>を使用予定)、 右は順番に内容を書いていく。 線をしたのが、ひとつのまとまりです。=(1)~(4) このとき、左と右でフレームを変えず、 場所の設定をすることでそれぞれ位置を決めれると思ったのですが、 変になります。↓ (1) →.flame1{width:250px;height:300px} (2) →.flame2{position:absolute;left:260px;top:10px;} (3) →.flame3{position:absolute;left:260px;top:100px;} とかしてみたのですが、 (1) (3) (2) というように。 どのように記述すればいいのでしょうか。 もしくは、このような構成に変えた方がいいとかあれば、アドバイスください。
- hiro1190
- お礼率61% (104/168)
- その他(インターネット・Webサービス)
- 回答数4
- ありがとう数2
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
>すべてをテーブルにし、その中で範囲指定しながら作る方法も他のサイトであったのですが、どう思われますか? いいと思いますよ。 ただテキストエディタで 複雑なテーブルレイアウトを組むのは難しいと思います。 htmlエディター的なものの導入を検討してもいいかも。 無料のエディタ http://www.w-frontier.com/software/ezhtml.html 無料でいろいろ紹介してくれてます http://besunday.hp.infoseek.co.jp/html_editor.htm
その他の回答 (3)
- salonpath
- ベストアンサー率48% (194/399)
あれ、フレームを使用したページを見たことないですか? 企業サイトでframeがダメな理由 ・印刷したいページを簡単に印刷できない ・ブックマークしたいページをうまくブックマークできない、見せたいページを教えるのが困難 ・検索エンジンにコンテンツが登録されてもメニューがないので訪問者は困る 仕様面からいうとframesetは廃止予定で、現在非推奨となってます。 表示の重さだったらたぶんtable使った方が重くなります。 たしかtableの中身を全部読み込んでから描画が始まる仕組みだったからです。
お礼
HPをそういう眼で見たことなかったです。 frameset廃止予定というのも初めて知りました。 何も知らずにやっていた私。。 1冊本を買って、それを参考に作った方がいいかもしれません。 教えていただきありがとうございます。
- salonpath
- ベストアンサー率48% (194/399)
やり方が変わるのは決して高度な話なんかじゃなくて サイトの目的が違ってくるじゃないですか 趣味ならコピペだろうがなんだろうがいいと思うんです IEでしか見えなかろうが、表示されない人がいようが、見た目が悪かろうが、 作るのを楽しむわけで自分が満足できればいいじゃないですか。 家に例えるとログハウス的なものですよね。 職業Webデザイナーを目指すならちゃんとhtmlの構造から勉強しないと話にならんわけです、それでお金もらうので。 Web上から拾ってきたcssやtipsをコピペで寄せ集めて作ったって理解は深まらないし応用は利かないし、それを売りつけられた客もそれでいいわけがない。 なのでこれから始めるなら、ちゃんと勉強した方がいいよって思ったんです。 しかし会社のサイトですか。。。 結構大事な物だと思うんですけど Webサイトを作った事がない人に任せるのかぁ。。。大変ですね。 とりあえず企業サイトなのでframeは使わないほうがいいと思います なので構造から作り直しになりますね。 ん~どうしましょうか。 こうゆうところでテンプレを探してきてカスタマイズするのがいいのかな http://www.coolwebwindow.com/template/public.php
補足
載せていただいたサイト拝見しました。 そこに私が想像しているものがあったのですが、解読に時間がかかりそうです。 やってみます。 frameがよくないっていうのは読みこみが遅いからと考えていいのでしょうか。 すべてをテーブルにし、その中で範囲指定しながら作る方法も他のサイトであったのですが、どう思われますか? 初心者におすすめとのことでした。 会社がいかんせん小さいものでプロに頼むお金はなく、 けど、なにか簡単なものでもいいから、やはりHPがほしいとの希望で。 やり始めて、かなりややこしいことがわかってきました。。
- salonpath
- ベストアンサー率48% (194/399)
Web制作を職業とする人を目指してますか? 趣味のページ作りどまりですか? やり方が変わってくるので
補足
職業ではありません。趣味でもないですが。。 会社のHP作りです。 ネットでいろいろなサイトを参考にさせていただきながら、初めてHP作りに挑戦しています。 やり方が変わるってかなり高度なお話とか?!
関連するQ&A
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- スタイルシートでうまくフッター部分を配置設定する方法を教えてください。
スタイルシートに詳しい方に教えていただきたいのですが、 今ホームページを作っていて、 フッター部分の設定に困っています。 タイトルカラム 左カラム コンテンツカラム フッターカラム というページ構成で 絶対指定で top と left を使って 各要素の位置指定をしているのですが、 フッター部分だけうまくいきません。 フッターに 「Copyright (C) ●● All Rights Reserved.」 という文言をタイトルカラムと同じ width で入れたいのです。 なぜか title カラムの下に表示されたり、 画面の一番上に表示されたりするのです。 bottom を使用するのかな? と思ったのですが、それでもうまくいきませんでした。 できるだけページ全体を table タグを使って デザインしたくなくて、スタイルシートであれこれ やっているのですが、苦戦しています(汗)。 スタイルシートを下記しますので、 お知恵をお貸しくださいませ。 -------------------- div.title { position: absolute; top: 0px; left: 20px; width: 800px; background-color: #ffffff; height: 412px; } .left { width:185px; position: absolute; top: 415px; left: 20px; background-color:#ffffff; } .content { position: absolute; top: 415px; left: 205px; width: 600px; text-align: left; } .footer { position: absolute; bottom: 0px; left: 20px; width: 800px; text-align: left; height: 100px; }
- ベストアンサー
- HTML
- cssについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか?
- ベストアンサー
- その他([技術者向] コンピューター)
- フレームなしのページからフレームありのページ(ラベルが貼ってある部分)に飛びたい
自作index.html(フレームなし)から、自作してないフレームありのページへ位置を指定して飛びたいのですが、方法はありますか?(通常のリンクではなく、ページ内リンクでページが表示される位置を指定したい) 自作↓ index.html(フレーム無し) フレームありのサイト↓(自作ではない) flame.html(左右分割) 左left.html、右right.html(Name="MAIN") リンクしたいページ(上記サイトの1ページ) right2.html#right2 単純にリンクを貼る場合は、right2.html#right2でいいと思いますが、そうするとright2.htmlしか表示されません。 そうではなく、left.htmlとright2.html#right2を表示させたいのです。 どなかご回答のほど、宜しくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ワイドのモニターだとズレます
下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている15インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか? <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>
- 締切済み
- JavaScript
- リンク先をフレーム(+フレーム内の1つを別々のページへ)
タイトル通りなんですが、 あらかじめ、frame.htmlという 上と左右に分割されたページ (上はtop.html、左はleft.html、右はright.html) があるとします。 で、index.htmlから1~3までのリンク先があり、 そこをクリックすると、frame.htmlの top.htmlとleft.htmlだけ同じファイルを呼び出し、 right.htmlの部分だけ各1~3のページを 読み出す事はできるのでしょうか? 1~3.html用にそのフレームページを3つ作れば早いのですが どうにかして、frame.htmlの「right」だけを各リンク先のページに 切り替えるという、1つのファイルで賄いたいと思っております。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- CSSのposition値の上書き(打消)について
現在、スタイルシートにてサイトを制作中です。 トップページとその他のページでposition: absolute; で配置を変えたいDIV要素があり、 以下のようなCSSを記述してテスト中です。 (※トップページにはbodyに#topというIDを割り振ったとします。) <style> div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;} body#top div#test {bottom: 80px; right: 15px;} </style> <div id="test"></div> 上記のように、トップページのみに body#top div#test として上の要素のサイズなどを 継承していますが、 position の値のみを top → bottom に、left → right に変更して設定にしようとしております。 通常ページでは position を left と top からの位置で適用しておりますが、 トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。 しかし上記のように継承して記述しても、 トップページではどうしても left と top からの指定となってしまい、 bottom: 80px; right: 15px; という新たなposition値は無視されてしまうようなのです。 横幅などは通常下にあるものが上書きされるのですが、この場合には駄目な様です・・・。 ここで難しいのは、top → bottom に、left → right に変更したいという点にあると思います。 つまり上書きは出来ないため、上の要素のtop 、 left はそのまま継承されてしまうようです。 top 、 left 、bottom 、 right のすべてを body#top div#test に記述しても駄目なので、 どうにかして継承元の top と left の設定を下位で継承させない (無効にする?)ような方法はありませんか? 参考本やネット上の情報でも、このあたりの記述は無く、 今まであまりこのように position をページごとに別の方向から指定するように スタイルシートを書いたことが無いため、完全にわからない状態です。 お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。
- ベストアンサー
- CSS
- CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css"> <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } { top: 50px; left: 150px; background-color: #FFEAEF } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } --> </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか?あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか?
- ベストアンサー
- その他(プログラミング・開発)
- スタイルシート
スタイルシートを使ってホームページを作り始めたんですが、左にメニューを作りたかったので body { margin: 0px; padding: 0px; } .main { width: 580px; position: absolute; left: 210px; } .side { width: 180px; margin-left:10px; } とcssファイルを作り何個かのページに記述したらトップページを除いて他のページは配置がおかしくなったりレンタルサーバの広告がど真ん中に重なったりしてしまいます。なぜでしょうか? 配置がおかしいとはsideとmainが ■■という配置にして欲しいのですが ■ ■という風になってしまいます。 わかりにくくてすみません。
- 締切済み
- HTML
- HP フレームページを開き、更にページを開きたい
左右に分割されているフレームがあります。 indexページから <A href="illust.html" target="top">フレーム</a> とリンクさせており、フレームページに飛びます。 左フレームに「A」、「B」、「C」、「D」と…リンクが張ってあり、 「B」をクリックすると、右フレームに「B」ページが表示されます。 <A href="b.html" target="right" >B</a> indexページから、フレームにリンクさせたら、フレームページが開かれますが、 さらに「B」ページを開いた状態にすることは可能でしょうか? 今の状態だと、フレームページが開かれるだけで、手動で左フレームから「B」をクリックするのが手間なのですが…。 ビルダー等のソフトは使用しておらず、メモ帳でタグを書いています。
- ベストアンサー
- HTML
お礼
HTMLエディタの意味がわかりませんでした。 もう笑うしかないのかも。 とりあえず、どれがいいかやってみようと思います。 ありがとうございます。