サイトの構築方法を教えてください

前へ 次へ
このQ&Aのポイント
  • 初心者が自分の思い通りのレイアウト、サイトの構築に難儀しています。フレームを使うことを避けたいが、ページごとに編集するのは困難です。
  • CSSを利用してサンプルテンプレートから作成しましたが、編集ミスが元に戻せず苦戦しています。
  • どのようにすればリンクメニューからメインの個所だけが変わり、他の部分は固定できるでしょうか？サイトの構築方法を教えてください。
回答を見る
  • ベストアンサー

サイトの構築方法を教えてください。

. ホームページビルダー16でHP作成している初心者です。 本を見ながら一応一つ二つは作成してみました。 今度は自分の思い通りのレイアウト、サイトの構築にしたいと思い頑張っているのですが、 思うようにいかず難儀しています。 希望としては、添付させていただいた画像を例にすると リンクメニューからどのページの行っても、メインの個所だけが変わり、 その他の部分は固定で、変わらないようにしたいのです。 フレームを使って作ったのですが、現在フレーム付のサイトは現在は検索エンジンとの相性があまりよくないため利用を避ける傾向にあるとか・・・ なのでフレームなしで作りたいのですが、同じページをコピー、ペーストし一つ一つ作っていったのですが、これでは、例えばサブの個所を変更したいと思ったら、すべてのページのサブの個所を変更する作業をしなければならず、編集が困難になるのではと… 本やネットを見ながらCSSを利用して作成もしたのですが、サンプルのテンプレートから作り上げるもので、チャレンジした見たのですが、力不足で、一つ編集を間違えると元に戻せなくなり、一から作り直しを繰り返すなど、苦戦しております。 添付させていただいた画像を、上記のような感じにしたいのですが、どのようにすればいいのでしょうか? 何か方法はあるのでしょうか? 御存じであれば教えていただけませんでしょうか? よろしくお願いたします。

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

下記のHTMLにCSSで指定していけば、出来るはずですが。 尚、コピペするなら、「」で囲んだ部分は削除してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> <header>「ここがヘッダー」 <hgroup> <h1>サイトタイトル</h1> <h2>サブタイトル</h2> </hgroup> <p><img src="xxx.jpg" alt="画像の解説"></p> </header> <nav>「←ここがナビ」 <ul> <li><a href="＊">PAGE1</a></li> <li><a href="＊">PAGE2</a></li> <li><a href="＊">PAGE3</a></li> <li><a href="＊">PAGE4</a></li> </ul> </nav> <div id="container"> <aside>「サイドバー＝サイト全体の関連補足」 <p></p> </aside> <section> <article> <h1></h1> <h2></h2> <p></p> </article> <aside>「メインコンテンツ内の関連補足」 <h1></h1> <p></p> </aside> </section> </div> <div class="clear"></div> <footer> <p>フッターの文字</p> </footer> </body> </html>

その他の回答 (3)

  • nana_coco
  • ベストアンサー率66% (56/84)
回答No.4

こんにちは。 ページが何枚もあるサイトの場合、毎回共通部分を変更すると確かに大変になりますよね。HTMLでの作成はそこが不便ですよね。 それを可能にしたのがフレームだったのですが、質問者様がおっしゃってるようにフレームはやめた方がいいでしょう。 質問者様の契約しているサーバーがPHPが使えればPHPがいいかな？（レンタルサーバー要確認） 詳しく説明してくださっている参考ページのリンク貼りますね http://benri-tools.net/contents.php?code=kyotu_menu PHP使えない場合はJavaScriptでもどうにかになります。 説明してくださっている参考ページのリンク貼りますね。 http://ri-mode.com/rainbow/2012/09/02/common_header_js/

回答No.3

フルＣＳＳテンプレートからはじめるのが近道だと思います。

回答No.1

がんばってJavaScript覚えてみませんか？ ご所望のページが作れます。 簡単に実装したければ「jQuery UI」で検索してみてください。 jQueryは広く知られているので検索にもよくひっかかりますから、 がんばれば使いこなせますよ＾＾ｖ たとえばご質問の件に関しましては ボタンクリックで中央の領域の内容をajaxで通信してひろってくるとか。 （スマホでも使えます＾＾＠） あとは先に紹介したjQuery UI のタブを使うことです。 タブ切替で表示内容を切り替えられます。便利ですよ＾＾＠ CSSいじれるなら見た目も変えられますしね＾＾ ちなみに、IFRAMEはスマホサイトと相性わるいかもしれません。 PCサイトならどのブラウザでも見れますよ。 がんばれー＾＾！

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • サイトメニューをプラグイン化させる方法

    ブログのようにサイトメニューをプラグイン化させ 一ヶ所編集すれば対応している全ページを一括で編集する 事は可能でしょうか？ 可能でしたら、その方法の解説やツールを配布している サイトなどを教えていただきたいです。 FRAME、IFRAMEの使用は考えていません。 ソース上には、ライブドアブログなどのように HTMLで表示させたいと思っています。 現段階では、コンテンツを追加するたびに 100ページ以上編集しているので 少しでも効率が上がればいいのですが・・・

  • ホームページ全体の画像、デザインの変更をサイト全体に反映させる方法

    　ホームページビルダー11でHPを作成しました。サイト全体で30ページほどです。すべてHTMLで制作しました。 お店の商品紹介のサイトなので、どのページも同じようなデザインとなっています。上部と左側にメニューがあり中央に商品写真が羅列され、その商品写真をクリックすると商品詳細ページへリンクする、といった感じです。 この度、「サイトのリニューアルをして下さい」と頼まれました。 現在のサイトを作る際にはまず 1「index」ページを作成 2ソースをコピーして新規のページに貼り付け 3貼り付けた「index」のソースの変更箇所を書き換え といった作業を繰り返して制作しました。 今後もサイトの更新が予想されるため、例えば 1、サイトのデザインを全てに反映させる。 (上部、左にメニューを付ける等) 2、テーブルのセル内の画像を1か所変えればサイト全体に反映される 等の方法があれば知りたいと思っています。 現在のHPは、とりあえず「作らなくては！」という思いで コピー、貼り付け、コピーしては貼り付け、 変更箇所はページごとに書き換え、という感じで更新の事など 一切頭に入れず製作してしまいました。 画像の変更は、「置換」という機能を知ったので試してみましたが、 変更したくない部分まで変わってしまいダメでした・・・。 自分のイメージとしましては・・・ このテーブルのこのセルにはこの画像 といった具合で、すべてのページに反映される方法等あったら すごく助かるな～って思っています。 どなたかよい方法をご存知でしたらご教授下さいます様お願い申し上げます。

  • headerをlink指定する方法

    現在headerやfooterを各htmlのページに記述しているのですが， フレームを使わず，CSS等でLINK表示させるにはどうしたら一番よいでしょうか？ 固定云々にはこだわりません。 現在のままではheaderやfooterの何かを書きなおしたい場合，サイト全ページ変更しなければいけなくなってしまいます。 と言うよりその書き直しの段階に来ているので，出来ればこれを機に1ページ編集したら変更表示させるようにしたいのです。 どうすればよいでしょうか？ また，多くのサイトではどうしているのでしょうか？ 教えてください。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 初めてWebサイトを構築しております。

    http://livedemo00.template-help.com/wt_44962/ こちらのテンプレートを購入し、四苦八苦しながらドメインを取得して公開するまで漕ぎ付ける事はできたのですが、肝心の編集がうまくいかず困っています。 現在つまづいている箇所は、class col1 first と記述されている箇所(スライダー下にあるGENERAL FREIGHT等) にhrefタグを挿入すると、文字がクリックできずリンクに飛ばせず困っています。 画像を挿入する事はできるのですが、同じくhrefタグが有効になりません。onMouseoverも有効になりませんので、マウスのクリックそのものが反映されていないのかと思います。 デフォルトで用意されている隣のcol1と<p>の箇所の文字選択、コピーもできませんので、style.cssを弄ればいいのはわかるのですが具体的にどの箇所を変更すれば、解決するのかがわかりません。 それではよろしくお願い致します。

    • ベストアンサー
    • HTML
  • メニューが面倒

    現在、サイトのリニュアルを検討しており、XHTMLを使用して、正しい文法で作り直そうと思っています。 私のサイトには、左側にメニューがあり、すべてのページにそのメニューが表示されるようになっているのですが、ページ数が増えた時に全ページをいじらなければならないので、編集し直すのがとっても面倒なのです。 何か１ヶ所変更するだけで済む方法はありませんか？ ちなみに、フレームなどは使用したくないです。

    • ベストアンサー
    • HTML
  • このようなページを作る時のレイアウト方法は？

    添付しているようなレイアウトでHTMLページを作成したいと思っております。 最終的にはPHPで作成予定なんですが、まずはHTMLでページを作ってみようと思いまして・・・。 簡単なレイアウトなら作成した事はあるのですが、このような場合はどのようにしてレイアウトを行うのでしょう？ １．フレームで区切る ２．ページ全体を大きなテーブルとして区切る １は後々面倒なので考えてないんですが、「コメント」や「別の日へのリンク」部分をスクロールにしようと思ったら、フレームじゃないと無理なんでしょうか？ 初心者なので質「問文が意味分からん」といわれるような事があるかもしれませんが、教えてください。 あと、やっぱりこういうの勉強するなら、ネットで色んなサイト見たりするよりも本を買った方がいいんでしょうか？

    • ベストアンサー
    • HTML
  • フレームのテンプレートについて（ビルダー１４）

    フレームのテンプレートについて（ビルダー１４） お世話になります。ホームページビルダーにて編集しております。 初めてのサイト作りでつまずいております。教えて下さい。 自分でindex.htmlを作成したまではよかったのですが、フレームのあるページテンプレートを ダウンロードしてきました。（NEO HIMEIZM様） コピーすれば出来るくらいに考えていたのですが、どこを変更するのかさっぱりわかりません。 フレームの仕組みはなんとなく理解しました。 menu.htmlとindex.htmlとでframe.htmlになるということ。ようは３ページを合体させている。 何も考えずにframe部分を編集してしまった後、いざ自分が作ったファイルにページコピーしようとするとmenu部分は出来てもframe部分がコピーできません。配布サイト様にもframe名の変更について触れてあったのですが、どうすればよいのかわかりません。当然indexページもふたつあることになります。名前だけ変更する訳ではないようなので、わかり易く教えて頂けないでしょうか。 やりたいこと：自分の作ったindex.htmlにフレームのあるページを合体（リンク）させたい。 よろしくお願いします。

  • 画像の枠にオシャレなフレームをつける事ができるサイト

    よろしくお願いいたします。 私は今までブログに写真をＵＰする際は、「ＣＵＲＵＲＵ」というサイトで画像の枠にフレームをつけるオプションを利用していたのですが、残念な事にＣＵＲＵＲＵが今月末で閉鎖してしまう為、他のサイトや無料ソフトで画像にフレームをつける事ができる場所を探しております。 できれば少しオシャレなフレームなどがあるサイトだと嬉しいのですが。。＞＜ 過去の質問も検索し拝見させて頂きましたが、探しているようなサイトやソフトの紹介がなく質問させて頂きました。 大変困っております。。 どなたか分かる方がいらっしゃいましたら教えて頂けませんでしょうか？ よろしくお願いいたします。 ＊現在使用しているフレームの画像を添付いたします。

  • フレームページのアップロード方法

    index.html＝トップページ　というのは分かりました。 が、フレームページをTOPページとしている場合、どうすれば良いのか分かりません。 教えてください！ 何度FTTPを独学で時間裂いていじくりまわしてもどうも出来ず、追い詰めれています。 ↓【当方の現状】 HPビルダーでサイトを作成。今の時点でTOPページ（フレームあり）は、「top.html」という名前にしてあります。 しかし、実際にHPビルダーの「サイトを開く」で全体を見るとtop.html－top1.html（フレーム左） 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　top2.html（フレーム右） となっており、top.htmlには画像は無く、フレームページがtop1.html、top2.htmlとしてあり、そこにはちゃんとHPで仕上げた通りの画像等が反映されています。 フレームページをTOPページとしてFTTPでアップロード、ダウンロードするにはどうしたらいいのでしょうか？ また、全てのリンクに影響する気がして、「index.html」に名前を変更出来ずにいます。 というより、どれをindex.htmlに変更すればいいか判りません。 私は同人サイトを作成しており、「バナー」クリック→「TOP画面」にしたいのです。 多くの人は忍者HPを使用しており、フレームページがちゃんとTOPページになっています。 URL「　　　　　　　　.jp」→バナーが表示されており、バナーをクリックすると、 URL「　　　　　　　　.jp/　　/index.html」→TOPページ（フレームあり）になっています。 具体的にはどのようにすればいいんですか？？ 初心者なりに調べて類似した質問回答も参照にしていますが、判りません。 HPは仕上がってるのに、FTTPでつまづき、先に進めません。 どうか判りやすいご回答を宜しくお願いします。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  • 楽天市場（出店）でキレイなサイトを作成する方法は？

    今、楽天市場で出店をする準備をしています。 キレイなサイトを作ろうと思い、一旦Dreamweaverでページを作成し、そのソースを貼り付けて作成ということをやるのですが、画像をアップする場所が良くわかりません。 サブ画像としてアップしてしまうとタグの中に入らずおかしいし、他の人のページのソースを参考に見て見ると、どうもどこかにフォルダを作成して保存されているようなのですが、フォルダの作成の仕方などがわかりません。 説明ひとつにしても、上と下などにわかれていて、カンタンに出来なくて困ってます。 楽天でセンスのいいページを作るためのコツなどがのっているサイトなどがありましたら教えてください。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する