デザインで外部サイトを入れ子にして設計したい

このQ&Aのポイント
  • CSSや別のHTMLテクニックを使って、デザインを土台に入れ子デザインを実現することはできないでしょうか?
  • フレームで上中下三分割し、真ん中三分割での5分割を試みましたが、デザインが崩れました。
  • BBSやMailフォームなどの外部CGI使用サイトを入れ子にして、余白に外部リンクとしてデザインしたいです。
回答を見る
  • ベストアンサー

デザインで、外部サイトを入れ子にして設計したいんです。

http://testaccount.lolipop.jp/ 諸先輩方、お知恵を拝借いたしたく質問いたしました。 上述のサイトを作りました。 オーサリングソフトはホームページビルダー13 (かんたん配置での作成)です。 「前提条件」 CSS、HTML、Javascriptは素人同然 オーサリングツールでデザイン、 コーディングはほぼ素人 お力をお借りしたいのはタイトルの通り 「Htmlデザインで、入れ子にして、外部サイトを中に表示したい」 ということです。 サイトの目的は部活動の内部ネットワークの活性なのですが、 私の個人的なデザインの趣味で、このような形になりました。 希望はこの余白の中に外部サイトを展開させたいんですが、 やれる限りのことをしましたが ●フレームで上中下三分割→真ん中三分割での5分割 しか思い浮かばず実行してみました。 現在のサイトでは背景画像が一枚絵ですが、 フレーム分割だと一枚絵でないので Photoshopでスライスしてそれぞれのフレームの背景に 設定して組み合わせてデザインしたものの著しく崩れました。 目的は ●BBSやMailフォームなどの外部CGI使用サイトを入れ子にして  余白に外部リンクとして内部にデザインしたい ということです。 (内部ページも展開できればなお良しですが、無理矢理デザインすれば  一枚のhtmlとして作れるので逃げ場はありますが避けたいです) CSSや別のhtmlテクニックを使って、上述のサイトのデザインを土台に 入れ子デザインを実現することはできないでしょうか? 難しいのであれば気合と根性と努力で乗り切ります。 頭の悪い文章でスイマセン。 どうかよろしくお願いいたします。 質問者

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
noname#83877
noname#83877
回答No.1

一番大きな背景の画像ですが、cssのbakcgoroundで指定すると良いと思います。 その上で外部サイトの読み込みは、frameではなくiframeを使うのが一番解決が早そうです。

160217733c
質問者

お礼

とても鮮やかに解決しました! iframeというタグがあったのですね! なかなかHtmlは難しいです。 でも勉強になりました、ありがとうございました!

関連するQ&A

  • 外部CSSで画像の挿入は出来ますか?

    外部CSSで、背景画像ではなく、「画像」の挿入は出来ますか? <IMG SRC="●●">をCSSで。 もし出来ましたら、外部CSSとHTML両方の記述を教えていただけると助かりますm(_ _)m

    • ベストアンサー
    • CSS
  • サイトの著作権について。HtmlやCssは著作権?

    ある有名サイトがあり、htmlや外部Cssが非常に手が込んでいて、 かなり時間がかかったであろうサイトがあります。 そのサイトとほぼ同じレイアウトや配置で、 HTMLとCSSを見てみると、これまた全く同じでした! メモの部分も同じで、驚きました。 しかし、デザインや文章などは自分でつくったらしく、 サイトのHTMLやCSSの構造部は同じだけれど、 デザインや文章は盗作していないようです。 これは著作権侵害になりますでしょうか?

  • ブログのデザインについて

    独自ドメインで、自分のブログを立ち上げるに際についての質問です。 ブログのデザインの為にHTMLやCSSを学ぶ必要があると思うのですが、 HTMLは必須としても、CSSを学んだところで、いかにも素人の手作り感があるサイトしか作れないのではないでしょうか? プロっぽい(OKWave等のメジャーサイトのような)デザインのサイトを、CSSで作れるとは思えないのですが、プロっぽいサイトはどのようにして作られているのでしょうか?

  • cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい

    cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a>     <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS(親リストの指定) ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。

  • CSSを使ったサイトデザインについて

    最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。(当然、場合によって違うので答えはないのでしょうが) たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。

    • ベストアンサー
    • CSS
  • このサイトでは http://www.magonote-seifuku

    このサイトでは http://www.magonote-seifuku.com/ 繰り返しCSSで画像が背景として使われているようですがここから自分のHPでこの画像を使わせてもらう場合CSSの記述の場所をHTMLの文字列のどこにおいたらよいのか?またそのサイトが外部CSSを使っている場合はそのCSSの記述はどこにあるのか?教えていただけませんか?

  • CSSの外部ファイルの作り方

    こんにちは、いつもはサイトのデザインをCSSで設定する時 HTMLファイルの<HEAD></HEAD>部分に書き込んでるのですが それらの量が段々多くなってきたので前ページ共通のCSSは外部ファイルでリンクさせようと思いました。 でも外部ファイルでCSSを作るのは初めてなので何分書き方などで少し分からないところがあります。 例えば1.文字の大きさ2.リンク下線消し3.行間の幅 などを指定する時これら全部を一つのCSSファイルに書いていいのですか? それとも一つのファイルには一つの設定しか書けないんでしょうか? あと、外部ファイルの場合<STYL>でまとめなくてもいいらしいのですが、もし一つのファイルに複数の設定を書けるなら その場合は一行あけて書いたりするのでしょうか? そして、これらCSSの外部ファイルにリンクさせたHTMLファイルの <HEAD>部分に後から他のCSSを書き込んでもそれは反映されますか? いろいろ多くて少し分かりづらい説明かもしれませんがお願いします。

    • ベストアンサー
    • HTML
  • デザインについて意見を聞かせてください。

    WEBデザインについてはずぶの素人ですが、このページについてお聞きします。 http://www.gaba.co.jp/aboutgaba/index.html ●CSSを使っているか否か ●CSSを使わなければこういうデザインは無理か、HTMLだけで作れるか ●そもそもデザインか良いと思うか悪いと思うか、その理由 ●企業サイトとしてお勧めのデザインのサイトがあれば教えてください 自社のサイトを作る参考にさせて頂きます。

    • ベストアンサー
    • CSS
  • サイトのデザインを委託されてる者です。

    サイトのデザインを委託されてる者です。 そのサイトというのは、 http://jbbs.livedoor.jp/school/ のあとに 21722 と入力してください。 なお、上記サイトの運営者にはここにURLを記述することに了解しています。 上記のサイトで、掲示板の左右に、フレームをつくりたいと思っています。 そのフレームはCSSによる「疑似フレーム」にしたいのですが、 IEではうまくいきません。 スクロールバーが途中で終わってしまうのです。 google choromeやfirefoxなどではうまく表示されるのですが・・・ どなたかアドバイスください。

  • 1つのデザインを作る、複数の方法について

    ------例------ http://ccfa.info/cgi-bin/up/src/up15455.jpg a:サイト名と画像。 b:「案内」「日記」などメニュー(コンテンツ)一覧(出来れば画像を仕様) c:bでのリンク先を表示する部分 D:copyrightなど グリーンの部分:背景色、または背景画像 希望としては、a、b、Dは常に変わらぬ位置に表示させておき、cのみがスクロール可能という状態にしたい。 定位置にあるaやbの画像が別のコンテンツに飛ぶたびに点滅するのが嫌なので、出来ればメニューをクリックする度にページ全体が再読み込みになるのは避けたい。 ------例------ このようなデザインのホームページを作りたいと思い、HTML作成支援のサイトや、似たデザインのサイトのソースを覗いたりして調べてみたところ、4つの方法があるようでした。 1.cをアイフレームにする 2.5つのフレームを使い、各メニューのリンク先をcにターゲット指定する 3.全てテーブルを使ってデザインし、cの部分のみスクロールバー付きテーブルにする 4.div構造・ブロック要素で作成 Web上のサイトで実際に見かけたのは1.2.4で、3はありませんでした(実際に作っていないので表示の正確性も未知数です)。 4に関しては、スクロールするのはページの一部(上の画像で言えばC)なのにフレームを使っていないサイトが1.2と同じくらいあり、はじめはどういう原理なのかさっぱり分かりませんでした。 そんな時に http://beginners.atompro.net/agss/011-015.html こちらのテンプレ配布サイト様の10番や12番を見つけ、DLしてソースを見たところ、まるでブログのテンプレートのようなCSS・HTMLの書き方でした。これが、おそらく「div構造」といわれる方法なのだろうと認識しましたが間違っていたらすみません。 他のフレーム未使用のサイト様も、外部CSSは不明ですがHTMLの内容(div idや、メニューの画像などにh1、h2などを使用しているところ)が同じだったので、同じ構造なのだと思います。 長々と書いてしまいましたが、質問したいこと↓ 画像の例ようなデザインのサイトを作る場合、(私の知る限りで)4つの方法のうちどれが一番、閲覧者様に優しいか。また、デメリットが少ないか。 クリックの度に点滅~を避けるとするならば、c以外の部分を読み込まない1と2の方法が楽でしょうし私自身はとても便利だと感じます。 ただ、フレーム(特にアイフレーム)は相当なフレーム嫌の方も多いと聞き、調べている最中、フレームの使用を徹底批判するような文章も見かけました(古いものだと思われますが)。 SEO対策にも不利のようですし、ブラウザによっては表示が崩れるという問題もあるので「フレームはやめておいたほうがいいのでは?」と悩みはじめたのが、この質問の発端です。 div構造で書く方法だと、私自身がそのような書き方でHTMLを作成したことがないため勉強の時間が必要ですが、フレームよりも見る人の抵抗が少ないということならば色々調べてどうにかしようかとも考えています。 分かりにくい上長文で申し訳ないですが、回答よろしくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう