CSSを使ったフレームを使わないサイトのリンク表示方法
- フレームを使わないサイトのリンク表示方法について、CSSを使って実装する方法について解説します。
- フレームを使わずにサイトのリンクを表示するためには、CSSを利用する必要があります。CSSを使ってリンクのスタイルや配置を調整し、適切にリンク先を表示させましょう。
- フレームを使わないサイトでは、HTMLの要素やCSSプロパティを使ってリンクを表示させることができます。具体的な実装方法について、詳しく解説していきます。
- ベストアンサー
フレームを使わないサイトのリンクの表示方法について（cssの勉強中です
フレームを使わないサイトのリンクの表示方法について（cssの勉強中です） 今までフレームを使ったサイトはきちんと出来ました。しかし、デザインの自由さや 今後、フレームを使わない方向に行くと聞き、急遽cssを勉強し始め、実際、施設の サイト作りをしています。簡単な本を読んでみましたが、cssは良く分かりません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="various software"> <style type="text/css"> <!-- html,body{ padding:0px; margin:0px; } body{ background-color: rgb(180,180,180); } h1{ text-align:center; } div#top{ position:relative; width:60%; margin-left:auto; margin-right:auto; background-color:blue; color:white; height:60px; } div#bodyText{ position:relative; width:60%; margin-left:auto; margin-right:auto; background-color: white; height:1200px; } --> </style> <link rel="START" href="../index.html"> </head> <body> <div id="top"> <font color="#ff0000"><この文字列をクリックした時に下のid="bodyText"に link_a.html を表示させたい></font> </div> <div id="bodyText"> <h2>ここに本文を表示したい</h2> <p>ここにlink_a.htmlの内容を表示させたい</p> </div> </body> </html> こんな感じで書いてみましたが、画面上部に複数のリンク先の文字化画像を置き、 bodyText の所にそれに該当する .html ファイルを表示させたいのです。 初歩の初歩でつまづいています。 よろしくお願い致します。
- ホームページ作成ソフト
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>フレームを使わない方向に行くと聞き もう、既に「フレームスタイル」「テーブルスタイル」は過去の遺物です。 今後フレームを使わない方向に行くのではなく、もう既にフレームを使わない方法にシフト済です。 >bodyText の所にそれに該当する .html ファイルを表示させたいのです。 これは「インライン・フレーム」という手法を使おうとしているのだろう、と思われます。 インラインフレームもフレームも、どちらも「もう使わなくなった技術」です。 このため、こうしたサイト設計自体が「もはや時代遅れ」です。 ページ内に別ページを表示させる技術は、今はPHPなどにシフトしており、HTML＋CSSの勉強の比じゃなく難しい内容になっています。 HTMLが理解できていなくてもPHPは習得できますが、PHPからHTMLを生成する事が出来ても、HTMLをどう生成すれば正常表示するかは別問題なので、結局はHTMLも理解していなければサイト構築は出来ません。 …分業制ならば、PHPはプログラマーが書いて、HTMLはデザイナーが書くという方法でもいいですけれどね。 まず、今のWebページ作りの常識を学びましょう。 私はHTMLをある程度理解できている、という時に、お師匠さんから紹介された本を読んで勉強しました。 ＭｄＮコーポレーション 発行 黒須 信宏 著 「Ｗｅｂデザイン 明解テクニック １００」 ISBN978-4-8443-5969-2 書いてある内容の全てが、今のWebデザインに役立つ内容ばかりで、ある意味バイブル状態で使っています。 また、オーサリングソフト（ホームページ制作ソフト）にも問題がありそう。 いまどき、metaタグでGENERATORを記述するオーサリングソフトって…。 （ホームページビルダーも標準設定ならば勝手に記述しますが、要するにビルダーもダメだコリャというレベルだって事です） 私はホームページビルダーを長く使ってきましたが、正直これだと「今の常識スタイルを書くには全然向いていない」ので、Dreamweaverに乗り換えました。 オーサリングソフトを必ずしも使う必要はありませんが、使えないオーサリングソフトを使うくらいならばメモ帳を使った方がいい、という見方もあります（機能的に便利かどうかってのは別として）。 色々と否定をしてしまって申し訳ないですが、本音で言えば上記した通りなのです。 使っているテキストによっては、あなたがサンプルで載せられたHTMLのように、スタイルを内包させた書き方をしていますが、今はこういう「HTMLの中にスタイルを含む」書き方もしません。 HTMLは、コンテンツ＋マークアップのみ。 スタイルは全てCSSで外部ファイル化。 …これが基本中の基本です。 JavaScriptを入れる場合、ブラウザ別のスタイル適用を行なう場合は、どうしてもHTML内に書く必要がありますので、上記基本を理解した上で別途「どう書くか」を考えなくてはなりません。 （JavaScriptも本体は別ファイル化するのが常識です） 今のWebページ制作の常識を学んで、脱初心者を目指してください。 またこの常識はコロコロ変わります。 HTML4.01＋CSS2.1 は今の常識ですが、近い将来、これが HTML5.0＋CSS3.0 または XTHML（1.0または1.1）＋CSS3.0 に移行します。 その後もどんどんこの常識は変わっていきます。 （私はWeb制作に関してはプロではないのですが、XHTMLでのデザインは出来ますし、HTML5.0やCSS3.0については既に勉強を始めています） HTML4.01＋CSS2.1 の今の常識を理解すれば、次の常識へのシフトは難しくはありません。 まずは今までの経験を全て壊して、今の常識を学ぶ事からスタートです。 頑張ってください。
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
css とか、全く関係ありません。 ページの中に、html ファイルを表示させるなどしません、個別のページを必要数作るだけです。
補足
フレームを使わずにフレームの様な事をしようとしていたと、今分かりました。 ご回答ありがとうございます。
関連するQ&A
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
- xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に さらにfloatさせてleft、lightの２つ横並びのボックスを 配置することは可能でしょうか？ また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
- CSSで擬似的にフレームを作りたい
CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？
- ベストアンサー
- HTML
- IEでホームページが表示されず、CSSが表示されます。助けてください。
ビルダーで作ったホームページをFTPで転送したらホームページが表示されず、CSSがポップアップされてホームページが表示されません。（IE8の場合。）IE６でホームページを開こうとしたら、「・・・ダウンロードできません。・・・」とエラーメッセージがでます。 ホームページ作成初心者ですが、こんな事初めてでどうしたらいいか困ってます。どなたか分かる方いらしたらぜひ教えて下さい。よろしくお願いします。 ちなみにアドレスは、http://www.life-is-best.sakura.ne.jp/kogao HTMLの一部 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>小顔cute</title> <meta name="description" content="小顔に「小顔cute」"/ > <meta name="keywords" content="小顔"/> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <link href="kogao.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="cent"> <div class="cont"> <table cellspacing="0" cellpadding="0" id="container" summary="テーブル"> <tr> <td colspan="3" id="header"></td> </tr> CSSの一部 @charset "shift_jis"; body { color: #333333; margin: 0px; padding: 0px; text-align: center; background: #FFFFFF url(bg.gif); /*壁色と壁紙設定*/ font-family : "MS P ゴシック", sans-serif; /*全体の文字サイズ*/ } .cent { text-align: center; } .cont { margin-left: auto; margin-right: auto; width: 920px; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } .color1 { color: #FE5F04; } img { border: none; } .uline1 { background: url(uline_1.gif) repeat-x left bottom; } /*全般のリンク設定。（a:hoverはカーソルオーバー時）*/ a { color: #000080; } a:hover { color: #cc0000; } /*コンテナー（HP全体の枠） ------------------------------------------------------------------------*/ #container { width: 920px; border: 1px solid #808080; /*HPを囲む枠の色と幅*/ text-align: left; margin-right: auto; margin-left: auto; }
- ベストアンサー
- Windows Vista
- ３つのボックスを１つとして中央揃えするとき
詳細は下記のページソースを見ることになりますが、私はdivで指定している #header,#sidemenu,#infoのボックスを１つのボックスとして中央揃えをしたいと思ってます。しかしなかなか上手くいかないのでどなたかご教授お願いします。 一応上記３つのボックスを新たにdivタグ（id指定）で囲んでセンタリングしてみましたがネスケとFirefoxは表示が変わらず、IEは#headerのボックスだけがセンタリングされてしまいました(HTML+CSSでのレイアウト) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Top Page</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } #box { text-align: center; margin-left: auto; margin-right: auto; } #header { width: 800px; height: 100px; color: #ffffff; background-color: #ccffff; } #sidemenu { width: 300px; height: 500px; color: #ffffff; background-color: #87ceeb; float: left; } #info { width: 500px; height: 500px; color: #ffffff; background-color: #0000ff; float: left; } --> </style> </head> <body> <div id="header"> </div> <div id="sidemenu"> </div> <div id="info"> </div> </body> </html>
- ベストアンサー
- CSS
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- ｃｓｓで見出しの両側に文字を表示したい
ｃｓｓ+ｈｔｍｌでWebページを作成しています。 その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。 （完成イメージは画像参照）。 ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。 見出しの両側に表示させるにはどうしたらよいですか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.heading h3 { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; font-size: 100%; line-height: 100%; text-align: center; } span { float: left; width: 100px; text-align: center; } span.back { float: left; } span.next { float: right; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。どうせやるなら誇れるサイトにしたいです。 ソフトはご察しの通りホームページビルダーです。 頑張って勉強しようと思います。自分のサイトと、施設のサイトと。 ありがとうございます。