『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

スタイルシートを使用して文字を一番下の中央に表示する事は出来ますか?
(ウインドウサイズを変更しても常に一番下中央に。)

宜しくお願いします。

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

A 回答 (6件)

No.5です。

すみません。style属性閉じるの忘れました…。

<span style="
position:absolute; bottom:0%;
width:100%; text-align:center;">真ん中・下</span>
    • good
    • 4
この回答へのお礼

この方法で問題なく表示出来ました。
回答どうもありがとうございました。
また宜しくお願いします。

お礼日時:2004/12/10 00:03

No.2にプラスwidth:100%;で。



<span style="
position:absolute; bottom:0%;
width:100%; text-align:center;>真ん中・下</span>
    • good
    • 0

No.2の方の回答で大丈夫そうだと思ったのですが、自分の環境では真中に表示できませんでした。


ので、真中と下を別々に指定して入れ子にしたほうが良いかもしれません。
IE6.0でしか確認してませんが。(^^;


<p style="text-align:center;">
<span style="position:absolute; bottom:0%">
真ん中・下
</span>
</p>
    • good
    • 0
この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

お礼日時:2004/12/10 00:02

こんにちは。


まず初めに、あまりおススメ出来る方法ではないと断らせてください。
スタイルシートではありませんが、最も簡単に出来ると思う方法です。

ページの<body>直下から</body>直前までを、ひとつのテーブルで囲む。
テーブルのheightを100%に。
セルは上下二つに分け、下のセルには一番下になるテキストを入れる。残りは上のセルに。
下のセルには<TD VALIGN="bottom" ALIGN="center">と指定する。

<body>
<table border="0" width="100%" height="100% align="center">
<tr><td>
ページ内容
</td></tr>
<tr><td valign="bottom" align="center">
最後の一行
</td></tr>
</table>
</body>

こんな感じですね。
この方法だと、全体をテーブルで囲っているため、全て読み込んでから表示されるので体感的にページが重く感じます。
中に更にテーブルなどがあり、入れ子になっていれば実際重くなって時間がかかることもあります。
また、テーブルの高さは対応していないブラウザでは無視されますので、効果がありません。
レイアウトにテーブルを使用するのもあまり好ましくないこととされています。
以上のような理由で、あまりおススメはしません。

ですが、ページ内の内容が然程多くない(よく見るEnterページのようなものとか、そう長くないテキストのみのページとか)場合は手軽な方法なので、自分も実は使っています。
サーバーにもよりますので、アップロード後の表示速度などチェックして、いけそうだったらご参考にしてください。
    • good
    • 0
この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

お礼日時:2004/12/10 00:01

<span style="text-align:center; position:absolute; bottom:0%">


真ん中・下
</span>

な感じで自分の所では表示できてます。
style内をスタイルシートにまとめてしまってclassで呼び出しても大丈夫でしょう。
    • good
    • 1
この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

お礼日時:2004/12/10 00:01

ちょっと無理みたい・・・。


理由は、どの様にしてブラウザの高さ(縦の長さ)を求めるか・・・。

ジャバスクリプトと組み合わせれば、
ジャバスクリプトでブラウザの高さ(縦の長さ)を求めて、
それを div 要素の高さとして、基点を左端上にし
文字列をvertical-align:baseline(ベースラインあわせ)のtext-align:center(中央)にすれば・・・。

というか、それより背景にして
background:no-repeat(1こ) scroll(一緒にスクロールする) center(中央) bottom(下端) url("URL");
とされた方が良いかも・・・。

とりあえず、例示でした。
使えたら使って下さい。
また、詳細が疑問でしたら、改めて御質問下さい。
    • good
    • 0
この回答へのお礼

回答どうもありがとうございました。
また宜しくお願いします。

お礼日時:2004/12/10 00:01

このQ&Aに関連する人気のQ&A

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

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

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

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

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

Qフッターの位置を一番下に表示させたいのですが・・・

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。

そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。

サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。

これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか?

ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

表示方法について質問をさせてください。

現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。

しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。

コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、...続きを読む

Aベストアンサー

>今回のこの手法はポイントとしては・・合ってますでしょうか?

相対値の中の絶対値を指定する(分かり難くてすいません。)ことで画面最下部へ持ってきています。

positionについては代表的なものを挙げると、
position:relative;←相対
position:absolute;←絶対
※z-index←重なり順(ブラウザによって解釈の違い有)
などがあります。
また、
position:fixed;bottom:0;
などを使って固定してしまう方法もあります。
今回のようなフッターの位置指定については多くのサイトが
いろいろ例などを挙げているので参考にして試してみてください。

>その際に、このpositionを使った・・などはありませんでしょうか?

positionに限らずですが、ブラウザによってはいろいろと不具合があります。
とくにIEは大変です。「CSSハック」などを覚えておくと対応できると思います。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング