痔になりやすい生活習慣とは?

こんにちは。

Webサイトを製作しているものです。今朝下記のような質問をしてしまったものです。

// 以下、引用-----------------------

題名:CSSが間違ってデザイン崩れ困っています


こんにちは。

http://oshiete.goo.ne.jp/qa/7315867.html で質問したものです。お世話になりました。

回答者のみなさんのアドバイスを参考に頑張っていたのですが、どうしてもデザインが崩れてしまいます。あげく、IE系(それを利用するSleipnir)以外はキチンとコンテナの外枠が表示されたのですが、IE系(それを利用するSleipnir)は100%で線が止まり、何とこれ100%以上、下に行けなくなりました。ただし中のコンテンツが何故か<object>化されたみたいになりスクロールが出来るようになったので、コンテンツは見ることが出来ます。

よく考えてみたのですが、私がfloatをする理由は無いように思われました。5~6年前に興味本位でfloatを利用しただけで、上記質問 http://oshiete.goo.ne.jp/qa/7315867.html のORUKA1951さんの仰る、
>> 例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れている

ということは何も考えずに適当にfloatを利用していたのです。ですのでfloatを利用しない方法で移行に行こう(苦笑)と考え始めています。

ですが、肝心のhtmlファイルの中身が、

・3ペインの右側
・3ペインの真ん中
・3ペインの左側

と言う順序で書かれています。これを、

・3ペインの左側
・3ペインの真ん中
・3ペインの右側

と言う風にhtmlを巧く書き換えるフリーウェアがあるのかどうかというのを困っています。htmlファイルは確かに500ページ程と多いのですが、良いことに全て同じ構造(3ペインの順番等)になっています。私は『grep』というのでしょうか、その様なUNIXの知識は全くないので、フリーウェアを利用するしかないと考えています。ですが、どのフリーウェアを利用したらいいのかが『窓の杜』、『vector』を見ても分かりませんでした。

ここのカテゴリではもしかしたらカテゴリ違いかもしれませんが、この悩みの解決法、ご教示願えないでしょうか?

教えて君になっていることは重々承知しておりますが、昨日一日これで悩んで全く解決致しませんでした。

何卒よろしくお願い申し上げます。

失礼致します。

// 以上、引用-----------------------


1つのファイルを上記のようにやって、floatを消してみたんですが段落ち(と言うのでしょうか!?)をしてしまいました(当然?)。上記、多分バカな質問だったと思います。
-----------------------
質問1: floatなしで要素を横に揃えることなんて無理ですよね?
-----------------------
現状、ローカルではファイルが色々と重すぎるのかIEでは表示されません。それでSleipnir3でローカルとWeb上で確かめたのですが、ローカルではキチンと要素の上下左右が線で囲まれているのですが、Web上のは上記の質問内の状態になっています。IEも同様にダメです。Firefox、Safari、Chrome、Operaでは実現できています。

-----------------------
質問2: なぜ同じブラウザ(Sleipnir)でWeb上とローカルとで見え方が違うことがあるのでしょうか?(ファイルはもちろん同じ内容です。)
-----------------------

以上、何かご意見がある方、よろしくお願いいたします。

失礼致します。

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

A 回答 (6件)

>ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか?


「高さを揃える css」で検索してみてください。私が先に挙げたカラムレイアウトの手法つまり、
float
position
table-cell
のすべてで左右のみならず、3コラムになってどのコラムが高くなっても高さを揃えたり、そろえているように見せることが出来ます。table-cellが一番簡単ですがね。

この回答への補足

DrFellさん、

ご回答ありがとうございます。緊急避難としてIEとそれ以外でCSSを分けておきました。後ほど時間が空きましたら検索してやってみようとおもいます。

ありがとうございました。

補足日時:2012/02/24 07:28
    • good
    • 0
この回答へのお礼

DrFellさん、

改めましてご回答ありがとうございます。現在もCSS切り替えで乗り切っている次第です。本当に時間が空きましたら改めて最初からやっていきたいと思います。

その時はお書き下さったアドバイスも参考にさせて頂きます。

ご回答ありがとうございました。

お礼日時:2012/02/27 02:25

>ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか?



body>div.section{position:relative;}/* このdivの子孫要素の位置基準とするため */

div.section{background-color:silver;min-height:400px;}
                    ^^^^^^^^^^^^^^^^^
1) この最小高さを主文以外の高さの最大予想値よりも大きくしておく。
2) footerの巾を小さくして差し支えないようにする。
3) 常にもっとも長くなるものを基準にし、それ以外をabsoluteさせる。

 こんなところかな・・・・
positionの長所は、
★デザインのためにHTMLの構造が制約を受けない===>本来の文書構造を保てる
★デザインの制約が少ない
と言うことでしょう。

 なお、ウィンドウ巾の制約も受けませんから、様々な解像度(ウィンドウ巾)でも確認してください。

この回答への補足

ORUKA1951さん、

ご回答ありがとうございます。
緊急対策として、IEとそれ以外でCSSを分けてやりました。時間が空きましたらやらせていただきます。

補足日時:2012/02/24 07:26
    • good
    • 0
この回答へのお礼

ORUKA1951さん、

改めましてご回答ありがとうございました。一向に進まないので現在はCSSの切り替えで乗り切っております。後ろ向きの姿勢はいけないですが、しょうがありません。

大変お世話になりました。

またお世話になるかもしれませんが、その時はよろしくお願い致します。

お礼日時:2012/02/27 02:22

質問の趣旨とずれているかもしれませんが、段組(横並び)の方法として、positionとfloatで悩まれているのであれば、floatをおすすめします。

段組の実装方法として、positionは汎用性が高いですが、初心者の方からすれば、実装の難易度はfloatよりもpositionの方が高いです。また、floatでしっかり組んであれば、ほとんどの場合、困ることはありません。floatで組みきれなかったといって、positionに逃げるのは、ちょっと違う気がします。

質問2は解決されているようなので、質問1だけにお答えします。数あるブラウザの中でもIEだけは特殊です。特殊というより間違った解釈をします。ご質問の内容も、IE(sleipnir)だけおかしいということなので、floatやpositionの前に、IEの挙動を理解することが解決策といえます。とはいえ、それほど難しいことはありません。たとえば以下のようなサイトの情報に目を通すだけでも十分ですよ。

http://css-bug.jp/win/ie/
    • good
    • 0
この回答へのお礼

tracerさん、

ご回答ありがとうございます。floatがオススメなのですね。ご意見、考えてみます。

ご提示のサイト、見てみました。こんなにあるのですね。大変参考になりました。

本当にありがとうございました。

お礼日時:2012/02/23 12:53

htmlを最初の段階できちっとしていればcssで表示場所を変えることは、できます。

htmlをいじらなくても、cssで表現を変えるだけです。そのあたりhtml+cssの基本概念を理解してください。

5年以上前のサイトを紹介します。
http://blog.html.it/layoutgala/index.html
下の方に薄紫色の、htmlがあります。そのhtmlはその1つのみで変化しません。そしてcssをいじるだけで、40ほどのパターンのカラムレイアウトの紹介を上でされてます。htmlは変えなくても柔軟にレイアウトが変化することが可能であること、文章構造と見た目は分離して管理することを理解し、柔軟に対応できるhtmlを最初に組むことは大切であることもご理解ください。

今は当時よりさらに、プロパティが充実してきています。より簡単に多彩な表現が可能になっています。

・3ペインの右側
・3ペインの真ん中
・3ペインの左側

と言う順序で書かれています。これを、

・3ペインの左側
・3ペインの真ん中
・3ペインの右側

htmlを変えなくても、単純にcss でfloat:leftをfloat:rightじゃダメなの?と思ってしまいます。
横並びにさせるには、floatの他に、positionを使ったり、displayで表の様に扱うプロパティがよく使われます。floatを嫌いな人がいるように、positionはもたつきだすから嫌いって言う人もいますし、想定外になった場合、文字が重なるので嫌う人もいます。displayは対応ブラウザが新しいものに限るからちょっと……という人も。どれを選ぶかはもう少しいろいろと経験してからでもいい気がします。floatは横方向には柔軟ですが、縦方向には無力です。(後ろに書いたものを右や左に持ってくることはできるが、後述のものを前述のものより上に表示することはfloat1ではできない。)

おっしゃっている症状下にいけない?はfloatが問題ではないです。他に問題があります。レンタルのスペースをつかっておられて、そこにアップすると自動で入る広告などの表現方法と、ローカルで作っておられる表現がぶつかってしまっている気がします。

position等を使ってレンタルスペース会社がサービス名や広告を固定配置させる時によくおきる症状に似ていますが、ソースがなければ憶測の域を超えません。どういうものを挿入されるのか知ってご自分のcssを組まないと作り直してもまた、崩れる可能性は大いにあります。自分の用意したhtmlとダウンロードしたhtmlでは変化があるはずです。比べてみてください。

そして、そのことは規約などで、了承しているからこそ、使える筈なのですが把握されていないのはまずいです。大切なことを読まずに承諾・契約されたのでしょうか?

横道、長文になってきましたので、この辺で
    • good
    • 0
この回答へのお礼

DrFellさん、

ご回答ありがとうございます。ご紹介のサイト見ました。すごいと単純に思いました。

>>柔軟に対応できるhtmlを最初に組むことは大切であることもご理解ください。
痛み入ります。

ご回答、ありがとうございました。

お礼日時:2012/02/23 12:45

前の質問の続きということで・・・


絶対配置にすると、記述の順番に依存しないのですから、ひっくり返せば、
・3ペインの右側
・3ペインの真ん中
・3ペインの左側
であろうと
・3ペインの左側
・3ペインの真ん中
・3ペインの右側
であろうと、まったく関係ないことになります。
たとえば、
<body>
_<div class="header">
__<h1>見出し</h1>
_</div>
_<div class="section">
__<div class="news"><!-- float時代の左-->
___<h2>新着情報</h2>
___<p>記事</p>
__</div>
__<div class="section"><!-- float時代の中央 -->
___<h2>本文見出し</h2>
___<p>記事</p>
__</div>
__<div class="tableContent"><!-- float時代の右 -->
___<h3>新着情報</h3>
___<ol>
____<li><a href="#top">ページトップへ</a></li>
____<li><a href="#section1">1章</a></li>
____<li><a href="#section2">2章</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
(注)タブは_に置換してあります。

だったとしますが、position:absoluteだと、<div class="section">内のサブブロックがどのような順番で並んでいても、デザインは変化しません。
★これが、文書構造が正しければどのようにも配置できる。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★デザインのために文書構造を変える必要がないという意味です。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

★大事なことはHTMLが文書構造にしたがってきちんとかかれているかだけです。これさえできていれば、どのようにもデザインできます。
 全体をborderで囲むときは<div class="article">ででも囲んでください。

下記CSSを一宣言ごとに記述して、表示の変化を確認してください。

HTMLは、
「HTMLで並べるテーブルに関して - HTML - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7318537.html#a3 )」と同じです。
<!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:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}/* おまじないを書いておきます */
body{background-color:gray;}/* わかりやすくするため背景に色を付けておきます。 */
h1,h2,h3,h4{margin:0;line-height:1.4em;}/* 見出しのmarginがはみ出すのを防ぐ */
/* これは、下のborderを消してみると効果がわかる */
div{border:solid 1px red;margin:0;}/* わかりやすくするためすべてのdivに枠線を引きます。 */
/* 同様にわかりやすくするため、それぞれのブロックに背景色を付けておきます。 */
div.header{background-color:aqua;min-height:100px;}
div.section{background-color:silver;min-height:400px;}
div.section div.section{background-color:white;min-height:0;}
div.section div.tableContent{background-color:green;}
div.footer{background-color:lime;min-height:100px;}
/* ここまで、わかりやすくするため色・枠づけ・高さ--これをしておくとわかりやすいです。 */
/* ただし、borderのサイズだけそのブロックの外周サイズが大きくなっています */

/* 全体のサイズを決めます */
div.header,div.section,div.footer{
width:80%;min-width:640px;max-width:900px;
margin:0 auto;/* ウィンドウの中央に */
}
body>div.section{position:relative;}/* このdivの子孫要素の位置基準とするため */
div.section div.section{
min-width:0; /* 上での指定を消しておく */
width:auto;
margin:0 20%;/* 左右に余白を開ける */
}
div.section div.news,
div.section div.tableContent{
position:absolute; /* 絶対配置を指定します。 */
height:100%; /* 高さは親要素の高さを参照します。(親がrelativeなので */
width:19%;
top:0;/* 親要素の一番上 */
}
div.section div.news{
right:0;/* 親要素の右 */
}
div.section div.tableContent{
left:0;/* 親要素の左 上と入れ替えれば逆になる */
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>見出し</h1>
__<div class="nav">
___<ol>
____<li><a href="./">Top</a></li>
____<li><a href="./book">Books</a></li>
____<li><a href="./profile">Profile</a></li>
____<li><a href="./contact">Contact</a></li>
___</ol>
__</div>
_</div>
_<div class="section">
__<div class="news"><!-- float時代の左-->
___<h2>新着情報</h2>
___<p>記事</p>
__</div>
__<div class="section"><!-- float時代の中央 -->
___<h2>本文見出し</h2>
___<p>記事</p>
___<h2>本文見出し</h2>
___<p>記事</p>
___<h2>本文見出し</h2>
___<p>記事</p>
___<h2>本文見出し</h2>
___<p>記事</p>
__</div>
__<div class="tableContent"><!-- float時代の右 -->
___<h3>新着情報</h3>
___<ol>
____<li><a href="#top">ページトップへ</a></li>
____<li><a href="#section1">1章</a></li>
____<li><a href="#section2">2章</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>

この回答への補足

ORUKA1951さん、

ご回答ありがとうございます。floatなしでも出来るのですね。

今、サンプルをやっているのですが、ページによっては左側、または右側の高さが一番高くなることがあるのですが、その場合の解決方法をご教示願えないでしょうか?

補足日時:2012/02/23 12:32
    • good
    • 0

> 質問2: なぜ同じブラウザ(Sleipnir)でWeb上とローカルとで見え方が違うことがあるのでしょうか?(ファイルはもちろん同じ内容です。

)

Sleipnirに限定するなら
・ローカルでチェックしたときとWebでチェックしたときとで、レンダリングエンジンが違う
(途中で変えたとか、サイト毎の設定があるとか)
というのがありそうです。

御存じかもしれませんが、ブラウザ毎に見えかたが違うのは、最終的な「絵」を作る部分(レンダリングエンジン)が違うからです。
Sleipnirは、IEと同じエンジンと、Firefoxと同じエンジンを使っていて、切り替えできます。
IEのエンジンを使った時はIEと同じ表示になり、FIrefoxのエンジンを使えばFirefoxと同じ表示になります。

IEでは期待通りではなく、Firefox等では期待通り、だとすると、Sleipnirの設定がWebではIE,ローカルではFirefoxのエンジンを使ったのでないか、という予測ができます。
    • good
    • 0
この回答へのお礼

kmeeさん、

ご回答ありがとうございます。Sleipnirがエンジンを替えることが出来るとは知っていたのですが、
>>WebではIE,ローカルではFirefoxのエンジン

というのは知りませんでした。不勉強、申し訳ございません。

ググって発見してこようと思います。

ご回答、ありがとうございました。

お礼日時:2012/02/22 20:27

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

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

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

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

Qローカル環境とネット環境でホームページの文字の大きさが違う

Weboxというツールを使って、あるウェブサイトをまるごとダウンロードしたのですが、InternetExploreを使って閲覧すると、ローカル環境とネット環境とで、文字の大きさが一部異なる箇所があります。
(Firefoxでは一致しています)
CSSファイルのリンクはちゃんとできているので、なぜ違いがおこるのかがさっぱりわからないです。
ウェブサーバ側でなにかしらの補修をしているくらいしか考えつかないのですが、そんなことってありえるでしょうか?
またそれ以外にどんな原因が考えられるでしょうか?

どうか宜しくお願いいたします。

Aベストアンサー

成る程、apraxasさんの環境では違いますね(^^;

今少し時間があったのでソースも簡単に観てみたんですが、やはり Dreamweaver 使用してます?

余計な事かもしれませんしこの件にどれほど関係があるかは判りませんが…
自分が知る限りは、どのHP作成ソフトもレイアウトの際にかなり強引なソースを吐きます。
折角 xthmlでCSSにしても、気をつけてないとインライン要素の中にブロックレベル要素を置いたりCSSがあるのにhtmlタグでレイアウトを辻褄併せしたり…といった無茶なソースになりますからレイアウトを決めた後にソースの検証・手直し等をして気を付けた方が良いかと(^^;

Dreamweaver でローカル検証するとオンとオフのレイアウトがずれる…という話を聞いた事ありますけど、apraxasさんは WeBox からの保存ですもんね…。
キャプチャーを見る限りはOSやIEも同じですしCSSが関係している事だから後は記述方法が何等か作用しているとしか理由が思いつかないですね。

今仕事場のPCなのでCSSファイルは確認出来ませんが…
この感じだと恐らくはCSSの<div class="white_background">部分のクラス内容の記述と html 上でその中の<span style="font-size: x-small">が原因でしょうね。

時間がまだあるなら、早く帰宅出来れば自分で判る範囲をもう少し確認してみますね。

成る程、apraxasさんの環境では違いますね(^^;

今少し時間があったのでソースも簡単に観てみたんですが、やはり Dreamweaver 使用してます?

余計な事かもしれませんしこの件にどれほど関係があるかは判りませんが…
自分が知る限りは、どのHP作成ソフトもレイアウトの際にかなり強引なソースを吐きます。
折角 xthmlでCSSにしても、気をつけてないとインライン要素の中にブロックレベル要素を置いたりCSSがあるのにhtmlタグでレイアウトを辻褄併せしたり…といった無茶なソースになりますからレ...続きを読む

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サーバーによって見え方が違う

同じindex.htmlファイルを別々のサーバーにアップしたところ、
さくらインターンネットでは正常に映るのですが、ロリポップでは
レイアウトが一部崩れます。そんなことがあるんでしょうか?

Aベストアンサー

静的なHTMLだけでしたら、普通は有り得ない筈ですが、例えば参照している画像やCSSやJavaScriptファイルなどのパスの記載が相対参照ではなく、絶対参照であったりhttp://ドメイン/~の記述だったら、サーバを移行した段階で、参照先にそのファイルがない事になってしまいますから表示がおかしくなりますね。
それ以外にはちょっと思いつきませんが。

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

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 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

Qスタイルシートで colspan=3と定義することは可能でしょうか?

<style>
x {

}
</style>

<table>
<tr>
<td colspan=3 class="x">タイトル</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

また、有名なブラウザで対応している最新のCSSバージョンは何でしょうか?

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

Aベストアンサー

できないと思います。

colspan は、セルを連結する指定ですが、
もともと
<td></td><td></td><td></td>
であったものが
<td colspan=3></td>
のように連結するには、他の"<td></td><td></td>"を削除する必要があります。
それは、スタイルだけの話ではなくてセルの実体を操作する必要があるということですから。

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方の隙間が開く。

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

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

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

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

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

Aベストアンサー

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

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

Qアップロードすると、スタイルシートが反映されない

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡


人気Q&Aランキング