ネットが遅くてイライラしてない!?

(度々の相談で失礼します。
 netでいろいろと調べましたが、解決できませんでしたので相談します)
htmlで作成していたHPをCSSを使って表示できる様に・・と努力しています。
(但し、html及びcssとも初心者です)

疑似フレームを使って、ヘッダー、フッターと中間に左右の2つのフレームを用意しました。
中間の左側をメニューとして用意し、それを選択すると右へ表示されるようにしたいのですが上手く行きません。

現象は、
左メニューを選択すると右に表示されるのではなく、新たなページで内容が表示されます。
(内容は写真のサムネールを多数並べてあります・・・htmlで作成した物で、cssは入っていません)

●何を、どうすればよいのかアドバイスを頂けると助かります。
下記に関係あると思われる構文を下記に抜粋しました。

・Htmlに下記リンクを用意しました。
<link rel="stylesheet" type="text/css" href="style1--dl.css" />

・下記はHtmlのbody内の記述抜粋です。
<body>
<div id="header" class="item"> ・・・itemは参考ソースのコピーのままです。
<h1>swiss 20168/26~9/11</h1>
</div>
<div id="footer" class="item">フッター(固定)問い合わせ
</div>

<div id="left_frame" class="menu"> ・・・menuは参考ソースのコピーのままです。
<dl class=tripschedule> ・・・tripscheduleは参考ソースのコピーのままです。
<dt><FONT color="#ff99ff" size="3">8月</FONT></dt>
<dt><FONT color="#ff99ff" size="3"> 26日 成田発</FONT></dt>
 (申し訳ありません、上記の参考箇所は要不要と使い道が判っていなくてそのままです)

<dd><a href="to-zurich/to-zurich1.html" target="right_frame"><FONT color="#FFcccc" size="3">⇒チューリッヒ空港⇒市内</FONT></a></dd>

・下記はstyle1--dl.css内の記述の抜粋です。
cssへどの様に記述すればよいのか判らず、下記を入れてあります。
body, .menu {
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 100%;
overflow: auto;
}

#right_frame {
float: right;
width: 75%;
}

#left_frame {
float: left;
width: 25%;
}

質問者からの補足コメント

  • うれしい

    編集して確認しました。
    サンプルのレフトフレーム「A」のA.htmlを「to-zurich/to-zurich1.html」の書き換えて、右に表示される事を確認しました。

    これが、やりたかったことですが、右側ウインドウが2段になっています。
    これは何処を編集すればよいのでしょうか?

    ><iframe class=flexItem id=rightcts name=right src="e.html"></iframe>
    この"e.html"はどの様に?・・・・右フレームに名前を付けていると言事なんでしょうか?

    "CSS flexible box" と <iframe>は、今から用語等の確認になります・・・。

    「html 左メニューから右への表示方法」の補足画像1
    No.8の回答に寄せられた補足コメントです。 補足日時:2017/01/11 08:32
  • 度々の補足で失礼します。
    サンプルの表示について、ブラウザの問題があるような記述がNETで確認できましたので、
    下記ブラウザ3点で確認しました。

    クロームで表示させると添付画の様に正常に表示されました。
     IE11では一部正常に表示されないとか・・・
      (今回の質問はIE11でした)
     クロムは最新版で55.0でした。
     ファイヤーフォックスでも正常に表示されました。

    今からはクロムで編集を行ってみます。
    注意点等ありましたら、アドバイス頂ければと思います。

    「html 左メニューから右への表示方法」の補足画像2
      補足日時:2017/01/11 14:23
  • つらい・・・

    wixを調べました。
    無料貸し出し枠は500Mbという記述を確認し、今の私のアルバムには使えないと・・・。

    やはり、今使用しているサーバーを利用するしかないと言う事になりました。
    一度は先日のアドバイスで出来ましたが、dlを複数記述したらレイアウトが崩れてしまいました。
    更に、IEで表示が崩れるのは、一般的ではないと思い、IEで何とか表示させたいです。

    それで、html+css のレベルで、
    何とか左側メニューを選択したら、右側へ内容を表示する方法のアドバイスをいただけないかと・・・

    No.10の回答に寄せられた補足コメントです。 補足日時:2017/01/13 18:19

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

A 回答 (12件中1~10件)

No.11です。



> ・<a href="example.html" target="フレーム名">は「target="right"」としています。
> このtarget="right"の「right」が右のフレームだと言う定義がうまくできていないのだろうと考えていますが・・。
> 左右にフレームがあって、右側は「right」とどの様に定義づけるのかと・・。
> (htmlのフレーム分割の構文をそのまま引用しています。)

えっと。。。内容から察しますにFRAMEタグの機能(指定できる属性の種類とその役割)を理解されておられない。。。フレーム分けの基本中の基本を理解されていないように見えます。
メニュー側で「target="right"」という指定をするということは、そのフレームの名前(name)がrightだということです。

あと、blタグでフレームが自動的に増えた、、、なんていう話は聞いたことが無いですしもちろん経験もありません。
ちなみに間を空けるだけならbrタグ(改行)では駄目なのなですか? もっと微妙な調整が欲しいという事なのですかね?

微妙な調整が欲しい場合は枠の無い表にしてて行ピッチを調節するという方法もあります。
あと行頭を上の行より下げたい場合、日本語表記なのでしたら全角ブランクを置く方法も。
いろいろ工夫のしようはあると思います。それにはまず土俵であるHTMLを知らないとアイデアは出て来ない。
人のソースを見て真似ているだけではそれは難しいことですよね。その辺を今実感されているのだと思います。

No.11を最終コメントするつもりでしたが、あまりに、、、だったのでつい口出ししてしまいました。
これが最後です。

ではでは。
    • good
    • 0
この回答へのお礼

何度もアドバイスを申し訳ないです。

>内容から察しますにFRAMEタグの機能(指定できる属性の種類とその役割)を理解されておられない。。。フレーム分けの基本中の基本を理解されていないように見えます。
・ご指摘もっともです。
見よう見まねで、作成していましたので、編集しながら動作を確認し、NET情報を確認し・・・と作成していました。

今回、html+cssで4フレーム(ヘッダー、フッター、ミドルの左右2つ)をトライしたんです。
>メニュー側で「target="right"」という指定をするということは、そのフレームの名前(name)がrightだということです。
・rightと書かれている事で、右フレームがrightと認識されると言う事ですね。
左フレームのメニューに右へ表示する様に(target="right")記述してありますが、新しくページが作られてしまう。
 cssの記述の問題だろうと思っていますが・・・・
これをいろいろ相談させて頂き、html+css3 等になり、判らない領域が更に・・・・。
dlの件はこのhtml+css3 での事でした。
(フレームが増えた件は、クロムで表示させても同じでした)

htmlで出来ていましたので、cssも何とかなるだろうと思ったのが、知識のないところで無理だったのでしょう。

今の壁は、何故右フレームに表示できないのだろうかと・・・、
時間がかかるかも知れませんが、「機能として出来る」のならtryを続けようと思います。

有難う御座いました。

お礼日時:2017/01/14 14:09

No.10です。



すみませんが全フォロー内容を詳しく追っていなので詳しくは分かりませんが。。。

> 一度は先日のアドバイスで出来ましたが、dlを複数記述したらレイアウトが崩れてしまいました。

一度出来たものが出来なくなった、、、ということは出来た時の物に戻せばよいだけではないでしょうか?
いじり過ぎて壊してしまったのですよね?

あと「dlタグを複数記述したら・・・」についても具体的に何をどうしたらどう崩れたのかが分かりませんのでコメントのしようがありません。
まずはdl、dtタグ(加えてddタグも)は何のするものでどう使うのが正しいのかを学んでください。<dl>のみで</dl>で閉じてないとかではないですか?

書店か住まわれている市町村の図書館へ行かれてHTMLの説明をしているホームページ作成の入門書的なものを入手されるとよいように思います。


> 更に、IEで表示が崩れるのは、一般的ではないと思い、IEで何とか表示させたいです。

 IE & Edgeは確かWebブラウザのシェア2位だったかと思います。1位はChrome。3位はFirefoxで、ChromeとFirefoxを合わせると50%を超えていたはずです。
 なのでIEを重視し過ぎることは無いでしょう。


> それで、html+css のレベルで、
> 何とか左側メニューを選択したら、右側へ内容を表示する方法のアドバイスをいただけないかと・・・

例えばハイパーリンクなら <a href="example.html" target="フレーム名">といった感じでtarget属性を使えばよいだけです。これをメニュー側に書けばtarget指定されたフレームの内容が変わります。それだけのことです。
そういったこともたぶん「HTML フレーム」とか「HTML フレーム リンク」といった簡単なキーワードで検索すれば方法を説明したページがみつかるはずです。そういった自力で知りたい情報を見つける工夫をされていますか?

「こんなキーワードで検索すると・・・」というコメントを何度か書かせていただいたかと思いますがその応用かと。

失礼ながらとてもCSSとかHTML5とか新しい、初心者には敷居がちょっと高いものをどこかから引っ張ってきたがために、しかもそれを手掛かりに基本的な所、体系的なところの理解を飛ばしてチャレンジしているがために、しなくてよい苦労を一所懸命しているように感じます。

・HTMLの基本を入門書を使って理解する事
・ネット上のタグ辞典(使用例もあったりする)を上手に使う事
・ネット上にある説明を上手に見つけ利用する事
・HTMLエディタなどを使って土台となるHTMLを作り利用する事

この四つをされるとよいように強く思います。

頑張ってください。
ではでは。
    • good
    • 0
この回答へのお礼

有難う御座います。
>あと「dlタグを複数記述したら・・・」についても具体的に何をどうしたらどう崩れたのかが分かりませんのでコメントのしようがありません。
・左フレームのメニューを作成していて、文字行の先頭を合わせる為と行間を設けると言う事で<dl>~</dl>を使用しました。
これを、2つ続けたら、左フレームの更に左へフレームが出来てしまったのです。

><dl>のみで</dl>で閉じてないとかではないですか?
・これはありませんでしたが、</dt>、</dd>はありましたので修正しても同じでした。

>なのでIEを重視し過ぎることは無いでしょう。
・PC購入からブラウザを変えていない知人、友人がいると言う事で・・・

>例えばハイパーリンクなら <a href="example.html" target="フレーム名">といった感じでtarget属性を使えばよいだけです。これをメニュー側に書けばtarget指定されたフレームの内容が変わります。それだけのことです。
・<a href="example.html" target="フレーム名">は「target="right"」としています。
このtarget="right"の「right」が右のフレームだと言う定義がうまくできていないのだろうと考えていますが・・。
左右にフレームがあって、右側は「right」とどの様に定義づけるのかと・・。
(htmlのフレーム分割の構文をそのまま引用しています。)

>しなくてよい苦労を一所懸命しているように感じます。
ご指摘もっともです。
自分のHP作成をhtmlで行っていましたが、cssを利用する事で表示が綺麗になると知りましたので、cssで今やっている事が出来ればと・・・。
複雑な事は考えておらず、必要最小限的に覚えて、それからやりたいことを少しずつ加えようと・・・素人的に考えての事でした。

>この四つをされるとよいように強く思います。
ご指摘がもっともで・・・
>・ネット上にある説明を上手に見つけ利用する事
これで何とかしのげないかと思ってはいるのですが、
今悩んでいるところが、これが超えられなくて・・・
右ページの写真配置等のcss表現にはいられない状況です。

飛び越えられない、高いハードルになってしまったようです。

お礼日時:2017/01/14 08:25

No.9です。



> だんだん・・・・自分のレベルを超えている様です。
> HTML・・・HTML+css・・・HTML+css3・・・と、難易度が倍々に(^^)

 「いいな」と思ったWebページのソースを見てそのまま真似していると「おまじない」、しかもHTMLやらHTML5やらCSSやらJavascriptやらごちゃごちゃの「多言語のおまじないの断片の塊」になって行き、しかも流用するだけでそこを起点とした該当言語の系統立てた学習もしていないとなると、、、まぁ、、、そうなりますよね。。。普通だと思います。
 そういう匂いを感じたのでNo.5を書いた次第です。

 で。既に使われていらっしゃるのかもしれませんが、有償あるいは無償のホームページ作成ソフトを使う方法もあります。これなら画面デザインに集中出来て便利かと思います。

https://allabout.co.jp/gm/gc/31797/
http://websae.net/websitebuilder_20130507/
この回答への補足あり
    • good
    • 0
この回答へのお礼

有難う御座います。
発端はサムネール画に影がついてセンスを感じましたので、トライしてみようと・・・
で、メニューの右フレームに今のhtmlを表示するだけだから少しの努力で出来るのではないかと、甘い考えもありました・・・・
これが出来れば、それで終わりだったのですが・・・今でもそう思っているのですが。

ご紹介頂いた、無料で作成するHPのWixについてトライしています。
私がやろうとしている、3フレームが出来るのかどうか
メニューから、アルバムへ飛べるのか
サムネール表示から、大きな写真が表示されるのか。
写真をアップロードする事になるようなのでちょっと考えるところです。
無料と言うのは・・・何時かは、消えるのか・・。
サポートに問い合わせています。

このwixもどういう物か判っていませんが、サンプルを見ると洗練されていますね。

お礼日時:2017/01/12 11:03

No.5です。



Webブラウザの種類やバーション(メジャーバージョン)によってHTMLのタグの細かな解釈(=描画仕様)やJavascriptやcssの解釈が異なります。昔から結構有名な話しです。
特にIEは要注意です。
対策はHTML内にJavascriptでブラウザの種類とバージョンを読み取り、対応したHTMLへの書き換えを行う事です。
具体的な方法は「javascript ブラウザ 判定」といったキーワードで探すと簡単にみつかるでしょう。

なお、Webサーバ上に配置したCGIプログラムで動的にHTMLを生成する場合はこの処理をCGIプログラムで行います。サーバー側でもそれらの情報を得ることが出来ます。

参考まで。
    • good
    • 0
この回答へのお礼

有難う御座います。
だんだん・・・・自分のレベルを超えている様です。
HTML・・・HTML+css・・・HTML+css3・・・と、難易度が倍々に(^^)

構文を見て、区別がつかないのに出来るところだけ手を付けている様な感じですね。

今は、Ogre7077さんのサンプルを編集しながら、トライしている状況です。
このサンプルで、ul、liの代わりにdl、dtを使用して、左側のメニュー列の幅を狭くしていますが、「dl」の2つ目を追加すると、レイアウトが崩れてしまうんですね。
これが、何をどうしてよいのか・・・・・病んでいます。

どういう制約があるのでしょうか?

お礼日時:2017/01/11 18:43

最近の web ブラウザならば "CSS flexible box" と <iframe> が使えるので、


スクリプトを使わずに HTML/CSS のみでも提示の要件は満たせます。

以下サンプルです。

<!DOCTYPE html>
<html><head>
<style>
body { width:100vw; height:100vh; margin:0; padding:0; }
.flexV { display:flex; flex-flow:column; }
.flexH { display:flex; flex-flow:row; }
.flexItem { flex:1 0 auto; position:relative; overflow:auto; }
.flexItem#header { order:1; flex:0 0 120px; background:#ffc; }
.flexItem#footer { order:3; flex:0 0 40px; background:#cff; }
.flexItem#middle { order:2; }
#middle > .flexItem#leftnav { order:1; flex:0 0 25%; background:#cfc; }
#middle > .flexItem#rightcts { order:2; }
iframe.flexItem { border:none; }
.flexItem > .flexItemInner { position:absolute; }
</style>
</head>
<body class=flexV>
<section class=flexItem id=header><div class=flexItemInner>ヘッダー</div></section>
<section class=flexItem id=footer><div class=flexItemInner>フッター</div></section>
<div class="flexItem flexH" id=middle>
<nav class=flexItem id=leftnav><div class=flexItemInner>
<ul>
<li><a href="a.html" target=right>A</a><!-- iframe 内にページ表示 -->
<li><a href="b.html" target=right>B</a>
<li><a href="c.html" target=right>C</a>
<li><a href="d.html" target=right>D</a>
</ul>
</div></nav><!-- /#leftnav -->
<iframe class=flexItem id=rightcts name=right src="e.html"></iframe>
</div><!-- /#middle -->
</body></html>
この回答への補足あり
    • good
    • 0
この回答へのお礼

有難う御座います。
サンプルを用意頂き申し訳ないです。
サンプルの左メニューをクリックしたら、右フレームに表示する方法はどういう記述になりますか?

下記がそれなんでしょうか?
><li><a href="a.html" target=right>A</a><!-- iframe 内にページ表示 -->
まだ、リンクを試していませんが確認したいと思います。
その時に、cssへの記述はどの様になるのでしょうか?

ul だと左側に自動的に文字(数字?)が入る様に思います。
これをやめて、dl、dt、ddを使用しています。
同じような事だと思いますが・・・。

済みません、よろしければアドバイス頂けないでしょうか。
もうやめようかな~と思っているところです。

お礼日時:2017/01/10 18:35

No.5です。



> 暫くして、分割フレームを見てそれを気に入り何とか使える様になりました。
> その後は、同じパターンで写真の入れ替えで作成し現在に至っています。
>
> 何が言いたかったのかと言うと、
> やりたい事だけマスターして作成したい。
> cssでの表示方法も同じ考え方でした。

 そういう趣旨で作成&運用しておられ、真似したページがたまたまCSSを使用していたので、、、ということなのでしたらしたらCSSの使用を止め、<FRAMRSET>タグでフレーム分割されれた方が簡単です。
 フレームの境目の枠線を消すなども出来ますから見た目は同じに出来ます。
 どのようなWebサイトなのか構成がわからないのでピント外れなコメントかもしれませんが、疑似フレームを使うと写真アルバム的なコンテンツの場合は一つのHTMLファイルが大きくなり更新作業などの際の画面上での取り回しがよくなくなる場合があります。
 ですので技術的な趣味的お勉強でやられておられるなら別ですが、写真を掲載したWebページを作成して公開することが目的でしたら目次ファイルとコンテンツファイルを分けた方が更新作業などは楽です。

 HTMLのタグ説明をした「HTMLタグ辞典」的なページはインターネット上にたくさんあります。

参考まで。
    • good
    • 0
この回答へのお礼

有難う御座います。
>CSSの使用を止め、<FRAMRSET>タグでフレーム分割されれた方が簡単です。
今のhtml3分割の造りで良いと言う事ですね。

「HTMLタグ辞典」は他でアドバイスを頂き、確認しており、
何かの時に必要だろうと保存してあります。

cssで表現すると、
多数のページが、cssで編集できるとか、
(ヘッダーの表示編集とか)
写真を外部リンクにする事でメンテナンスも容易になるとか。
影付きの写真表示もセンスが良かったんですね。

判って来た事ですが(htmlでも出来るのかも知れない)
4分割目をフッターにする事で、画面に左右されない情報を表示できる。
例えば、メール、掲示板等メインに戻らなくても・・・。

どうしても、と言う事ではなかったのですが、
どういう事が出来て、cssを組み込む事の違いも知りたかったのです。

お礼日時:2017/01/10 15:45

フレームは止めて、2カラム(2列)構成の普通のページ構成にした方がよいですよ。



左カラムをサイドメニューにして右カラムにコンテンツを配置する。
javascriptも必要なくhtml&cssだけで出来、その方がgoogleの評価が高くなりますし、簡単です。
    • good
    • 0
この回答へのお礼

有難う御座います。
上下と中間の左右の4分割も、
html&cssだけで考えていました。

もしかして、分割数が多くなるとhtml&cssではできないのでしょうか?
だとすると、3分割はどうだろう・・・。
(現在はHtmlで3分割です)

お礼日時:2017/01/10 14:59

No.2です。



> ご紹介頂いたHPではscript、javaを使用して説明されていますが、
> script、javaを使用して出来るのでしょうか?

 えっと。。。
 Javascript(じゃばすくりぷと)はJava(じゃば)とは目別物です。
 Javaはサーバ側のWebアプリケーションを作成する際に多く使われる言語で、C言語などと同じくコンパイルして実行ファイルを作成すます。
 対してJavascriptはHTMLファイルの中に「ここがJavascriptで記述した処理部分です」という形で記述し、HTMLの中から呼び出して使用します。実行はHTMLと同じくWebブラウザが1行ずつ読み込んで解釈することで行います。


> さらにハードルが上がって・・・ぐちゃぐちゃしそうですね。

 基本を理解すれば書式は難しくないです。CSSよりは。。。(^^;


> 一応、NETで説明されているフレーム作成で、
> 上下、中央左右の4つのフレームにはできているのですが・・
> 中央左右の左側のメニューと右側表示部のつながりと言うか、リンクが判っていないんですね。
> それを、説明したHPにまだ遭遇できていないんです。

 同じフレーム割の説明を探す必要はありません。「あるフレーム上のメニュー項目をクリックされた際に、メニュー項目があるフレームとは別のフレームの表示内容を変更するにはどうしたらよいのか?」を学ばれればよいだけです。つまにフレームが2個ある場合の説明を参照すればよいのです。

 で。数年前まで30年ほどシステム開発の仕事をしていてWeb関連のお仕事も後半10年以上していましたが、お仕事ではなく趣味の範囲なのでしたらHTMLとCSSをいっぺんに学ばれるのはあまり得策ではない、特にこれまでソフトウェ作りをしたことが無い方にとってはそのように思います。
 まずはHTMLの基本的な書式・文法を理解し画面遷移するWebサイトを作成した上で、ではそれをCSSを使ったものにしてサイト全体の表示デザイン変更などをCSSファイルを変更することで一括して行えるようにする、、、といった段階を経るのが妥当と感じます。
 その過程でHTML5対応とか、Javascriptを用いてちょっと動きのある画面にするとかいったことに発展させて行かれるとよいように思います。
 そうすると自然と系統立てて学ぶことが出来「ぐちゃぐちゃしそう」になるのを避けられるかと。

参考まで。
    • good
    • 0
この回答へのお礼

有難う御座います。
今の私のHPは10年前くらいに、誰かのHPを参考に作ったものでした。
暫くして、分割フレームを見てそれを気に入り何とか使える様になりました。
その後は、同じパターンで写真の入れ替えで作成し現在に至っています。

何が言いたかったのかと言うと、
やりたい事だけマスターして作成したい。
cssでの表示方法も同じ考え方でした。
難しい事を手広くとは考えていなかったので・・・

お礼日時:2017/01/10 14:55

ajaxについて知識がないのでしたらこのわけのわからない疑似フレームをやめて


普通のフレームにしてみてはどうでしょう?
(もちろんきょうびフレーム自体あまりおすすめできませんが)
    • good
    • 0
この回答へのお礼

有難う御座います。
もう少し努力してから判断したいと思います。
知らずにハードルの高いものに手を出しているかも・・・とは思っています。

お礼日時:2017/01/10 14:48

<dd><a href="to-zurich/to-zurich1.html" target="right_frame">



target="right_frame"
を削除する。
    • good
    • 0
この回答へのお礼

有難う御座います。
早速試してみましたが、結果は同じでページの上書きになりました。
(新たなページではありません)
期待しましたが・・・

お礼日時:2017/01/10 11:50

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

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

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

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

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

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

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

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

Aベストアンサー

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

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

Q左メニューをCSSで固定したい

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか?
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu  ■ main      ■
■      ■          ■   
■       ■          ■
■      ■          ■
■■■■■■■■■■■■■
・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる
・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール

【HTML】
<div id="main">
メインの内容
</div>
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
・・・・(26項目)
</ul>
</div>

【css】
#main{
float:right;
}
#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;
}

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか?
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu  ■ main      ■
■      ■          ■   
■       ■          ■
...続きを読む

Aベストアンサー

メニューのCSSを以下のようにしてみたらどうでしょう。

#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;

height: 100%;
overflow: auto;

}

overflow: auto;
としておけば領域からはみ出した場合だけ、スクロールバーが表示されます。

QCSSの擬似フレームでのリンク方について

今まではHTMLでフレームを使っていたのですが、勉強になりそうなので、CSSを使って擬似フレームでサイトを作ってみることにしました。

だいたいのカタチは出来たのですが、リンク時に疑問が。
HTMLの時のように、リンク先をどこに表示するか名前指定でリンクすればいいと考えていたのですが、CSSでは実際は1つのページなので、名前指定というわけにはいきませんよね?

リンクするときは新しいページに飛ぶ時・ページ内にリンクするとき以外は、擬似フレームのメニュー部を同じように記載したページを複製して、メイン部分を変えていくという解釈で良いのでしょうか?


回答、お願いします。

Aベストアンサー

一番初心者向きはそうです。cssと他の物を併用することで、フレームのように、1つを変えればOKにする事もできます。
http://q.hatena.ne.jp/1185063872

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!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 name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!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>
<met...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QIMGタグで画像の繰り返し使用は…

IMGについて質問させてください。

ページの背景として画像を使う場合、画像は縦・横方向に繰り返し使われてページ全面に貼り付けられると思います。
IMGタグで指定する画像を縦方向に繰り返し使うことはできますでしょうか?
テーブルの中で使用する画像なのですが、テーブルの高さが可変なために高さ指定ができないのです。

よろしくお願いします。

Aベストアンサー

IMGタグで繰り返し表示の背景を指定することが出来ないか、と言う趣旨にとって宜しいでしょうか?
答えは「出来ません」。もう少し詳しく言うとIMGタグは画像をそのまま埋め込む機能しか持たないため背景表示には不向きです。
入らないところを自動で切ったりなんだりするためには背景画像としての指定が必要で、
背景画像として折り返し設定などを行う場合はCSSが無ければ無理です。
ま、やり方は既に出ている通りなのですけど、勝手に解説しときます。
覚えておくといいことがあると思いますよ…多分。
…ってかCSSリファレンスのあるサイトである程度予備知識をつけておくと今後の質問の手間が省けたり、或いは質問が相手に伝わりやすくなったりすると思います。
http://www.tagindex.com/
http://www.htmq.com/
http://masaboo.cside.com/
http://heo.jp/tag/
http://www2.plala.or.jp/Cool/okite/

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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

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

Aベストアンサー

ソースをください。

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


人気Q&Aランキング