出産前後の痔にはご注意!

タグについて質問です。
現在サイトを改装しているのですが、文字の位置の固定がどうしても出来ません。
右・左・真ん中という固定ではなく、上・下という固定です。
ページの一番下側に固定したいのですが、どのようにやるのでしょうか…?
検索しても画像の固定の仕方しか出てこなくて困っています。
当方かなりの初心者ですが、何方か教えて下さると助かります。

A 回答 (1件)

ブロック要素で囲み、CSSで位置を指定すれば良いんじゃないかな。



<div style="position:absolute; top:0%;left:0%;">最上段左</div>
<div style="position:absolute; top:0%;right:50%;">最上段中央</div>
<div style="position:absolute; top:0%;right:0%;">最上段右</div>
<div style="position:absolute; bottom:0%;left:0%;">最下段左</div>
<div style="position:absolute; bottom:0%;right:50%;">最下段中央</div>
<div style="position:absolute; bottom:0%;right:0%;">最下段右</div>
    • good
    • 2
この回答へのお礼

お教え下さったタグを入れたら固定出来ました!
どうもありがとうございました!!

お礼日時:2008/01/11 21:49

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

Qスクロールしても文字を固定位置に表示させるには?

スタイルシートについての質問です。

スクロールしても画像が動かないようにすることができるので、
同じように文字も固定表示したいと思っています。
position:fixed;
を使おうと思ったらIEではサポートされていないようなので使えません。

何か他の方法で文字の固定表示はできないでしょうか?

Aベストアンサー

>ブレずに表示はできますでしょうか?
必死に追随しているって感じですよね~^^;
最近、どっかで、うまくメニューを同じ位置に表示しているのを見たんですけど、どうやってるかは調べなかったんで、今回のは、一応オリジナルなんですけど、スムーズにスクロールさせるのは、ちょっと思いつかないですね~。
onscrollで、すぐに、表示させようとしないで、ちょっと間をおいてから表示する方がいいかもしれません。今のところいい方法が浮かばないです。すみませんです。
画像が固定できるんだったら、文字を画像にしてしまうというのも1つの方法ですけどね~。

ところで、
#2で
("NoMove").scrollIntoView(true);
は、テスト中のゴミですので、不要です。
すみませんです。
m(_ _)m

Q自分のサイトを開いた時にウィンドウのサイズを固定したい

いつもお世話になります。
htmlもよく分からずに自分のサイトを作っている、初心者です。
生意気な事ですが、デザインの関係で
自分のサイトを開いた時にウィンドウのサイズを
固定して見てもらいたいのですが、
どうすればよいのか分かりません。
もしかしたらここで聞く事ではないのかもしれませんが
なにぶんにも初心者なのでおわかりの方がいらっしゃれば
ぜひご教授ください
よろしくお願いします。

Aベストアンサー

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a></p>
</body>
</html>

このようなソースにすると、このページのリンクをクリックした時に、JavaScriptで新しいウィンドウをサイズを指定して開き、そこに次のページを読み込むようになります。
もしJavaScriptが有効ではない環境で閲覧する場合には、新しいウィンドウは生成されず、トップページを表示したウィンドウ上で次のページが表示されるようになります。

ウィンドウサイズは、window.open()の括弧内にある、widthとheightで指定します。 単位はピクセルです。
その他にもいくつか指定を入れてありますが、このスクリプトの部分については、参考URLが詳しいので、そちらを参照してみてください。


ここからはアドバイスですが、可能であれば、やはりウィンドウサイズをリサイズさせなくてもすむデザインにしたほうが無難と思います。
先ほど書いた、フレームを使ってページの表示領域を制限する方法でも、ウィンドウサイズに左右されないデザインに近づけることができると思います。

他に、テーブルで囲んだり、スタイルシートによって表示の横幅を決めてしまえば、内容を表示する領域を固定値として確保できるので、ウィンドウ幅の差によるデザインの崩れを排除できる可能性もあるでしょう。
テーブルの場合は、通常のテーブルで横幅を指定し、その中に内容をすべて入れてしまえばよいだけです。
スタイルシートの場合は、
<div style="margin: auto; width: 600px;"></div>
で全体を囲めば、ウィンドウの横幅が変わっても内容の表示幅は変わらないようにできます。
もし、デザイン上のウィンドウサイズ指定が、ウィンドウの横幅が変わることでレイアウトが崩れることの防止策であるとするなら、これらの方法も対策になると思いますよ。

参考になれば幸いです。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm#open

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a...続きを読む

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の方も修正する方法でもよけ...続きを読む

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

Qウインドウを縮小しても文字をずれなくしたい

html初心者です、宜しく御願いします。

“タイトル・・・・・・・”という文字を横一列に表示させた後、ウインドウの画面を縮
小すると文字が縦方向にずれます。

これを「ウインドウを縮小しても文字が隠れても良いので、文字が縦方向に移動しないようにしたい」のですがどの様にすればよいのでしょうか。
ボーダーを作って、その中に文字を入れてやっても、文字は同じようにずれてしまいまし
た。
これを防ぐにはどの様なやり方があるのですか。
CSSで描いています。

以上宜しく御願いします。

Aベストアンサー

「見栄えを定義する場合はCSSで」
というのが推奨されてます。
ので、
<html>
<body>
<div style="white-space: nowrap;">
タイトル・・・・・・・
</div>
</body>
</html>
とか。

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなんですが・・・

ひとまず、周り込を回避する方法が優先です。
どうかよろしくお願いいたします。


@charset "shift_jis";


body {
margin: 0px;
height: 100%;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
html {
height: 100%;
}
img {
border: none;
vertical-align: bottom;
}

#left {
background-color: #666666;
width: 350px;
float: left;
min-height: 100%;
height: 100%;
}
#right {
height: 100%;
padding: 35px 0 0 0;
min-height: 100%;
width: auto;
margin: 0 0 0 350px;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


人気Q&Aランキング