- 締切済み
ホームページのレイアウトが上手く出来ません
お世話になります。ブログを開いているのですが、画像と文字のレイアウトが、したいように上手くできません。 画像を２個横に並べて、そのさらに横に文字を配置したいのですが。画像を■で表すと、このような感じです。↓ ■■文字 テーブルを使ってやってみると、文字が何故か大きくなってしまって、フォントサイズを小さくしてみても小さくならず。 画像を２個ともにalign="left"を加えてみたら、配置は一応なったのですが、綺麗に揃わずガタガタになってしまいます。 何かいい方法があれば教えていただけないでしょうか。よろしくお願いいたします。
- baster21
- お礼率91% (108/118)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- SuperLe
- ベストアンサー率44% (434/977)
例えば、 <SPAN STYLE="width:画像１の幅;verical-align:top"><img src=画像１/></SPAN> <SPAN STYLE="width:画像２の幅;verical-align:top"><img src=画像２/></SPAN> <SPAN STYLE="width:文章の幅;verical-align:top">文字</SPAN> とこんな感じでどうでしょう。 あるいは、 <DIV WIDTH=*> <DIV STYLE="position:relative:top:0;left:0;vertical:align:top"><img～></DIV> <DIV STYLE="position:relative:top:0;left:画像１の幅;vertical:align:top"><img～></DIV> <DIV STYLE="position:relative:top:画像１と２の幅の合計;left:0;vertical:align:top">テキスト</DIV> </DIV>
関連するQ&A
- レイアウト
スタイルシートで BODY { text-align:center; } を入れ、本文のところで <div style="border:1px solid #8B4513;width:650;padding:5px;"> 内容 </div> としていますが、センタリングされないで表示されてしまいます。 また内容部分に <span style="border:1px solid #000000;width:300;height:75;text-align:left;"> ～～～ </span> と言った感じのものを入れており、 横においた画像でalign="left"を指定しているにもかかわらず、画像の横に表示されず、ぐちゃぐちゃになってしまいこれもうまく表示されていません。 IE5.5や6ではきちんと表示されるおり、このまま行こうと思っていたにもかかわらずNetscape7ではかなり崩れてしまい、びっくりしています。 テーブルで同じようにすることも出来ると思いますが、テーブルレイアウトはあまり好ましくないと聞きます。 そもそも上の方法が間違っていますか？ 上のように枠線の中にコンテンツを入れる、という形はどうしても使いたいのですが…。 文中、分かりにくいところが多くて申し訳ありません。 アドバイスよろしくお願いします。
- 締切済み
- CSS
- ホームページレイアウト
いつもお世話になっております。 ホームページ制作をしています。（が、未熟者です。） Illustrator8でデザイン・レイアウト作成→ある程度OKが出たらイラレデータを分解・画像化→Dreamweaver8でコーディングという流れです。 自分でイラレ上レイアウトをする場合はコーディングのことを考えて行うのですが、今回別の方がイラレデータをつくり、コーディングのみを行うことになりました。 あまりHPやDreamweaverに詳しくなく、イラレのプロな方なので、重なった画像を多用したりと、Dreamweaverでのレイアウトが難しいものを出されてしまいました。 具体的には複数の写真が重なり、その写真から吹き出し（イラスト）が出ているというものです。 それだけなら画像として扱えばいいのですが、吹き出しの中の文字はDreamweaverで打たないと読めないのです。 こういう場合は、まず吹き出し中の文字を消した画像データを用意→Dreamweaverでテーブルを作り背景画像にする→テーブルをうまく吹き出し部分に合わせ文字を打つ という方法しか思いつかないのですが、間違っているでしょうか？ テーブルレイアウトはよくないと言われますが、この場合もCSSなどででいけるものでしょうか？（CSSレイアウトは勉強中で詳しくありません。） 恐れ入りますがご回答お待ちしております。 長文失礼致しました。
- ベストアンサー
- ホームページ作成ソフト
- テーブルの配置
お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- IE8でtableのレイアウトが崩れる
Wordpress3のTwenty Tenテーマを使用して、投稿ページを作成しています。 複数列、行のテーブルを表示させていため、カスタマイズしているのですが、 どうしてもIE8のみレイアウトが崩れます。 IE7,9は正しく表示されています。 よろしくお願いします。 ■不具合点 ・テーブル内の文字を上部にしたいが、下部に表示されてしまう。 ■css table#testtable { border: 1px solid #e7e7e7; text-align: left; background: #f2f7fc; margin: 0px; padding: 0px; background: #FFFFFF; line-height: 20px; font-size: 12px; height: 100px; width:700px; word-break:break-all; } th#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-weight: bold; font-size: 12px; height: 30px; width:110px; word-break:break-all; } ・ ・ ・ ・ td#testphoto { text-align: left; margin: 0px; padding: 0px; line-height: 30px; font-size: 12px; height: 90px; width:110px; word-break:break-all; } ・ ・ ・ ・
- ベストアンサー
- CSS
- レイアウトを常に中央に配置したい
始めまして、まったくの初心者で御座いますが、 下記現在レイアウト(テーブル)、左よりになっていますが、ブラウザの幅や大きさや、デイスプレイのサイズにかかわらず。 常に中央に配置したい場合、下記をどう書き換えればよいでしょうか、 宜しくお願い致します。 <style type="text/css"> <!-- body { font-size:80%; background:#fff; color:#000; } table.form { border:1px solid #7777bb; border-collapse:collapse; margin-top:1em; } table.form th,td { text-align:left; border:1px solid #7777bb; padding:8px; font-weight:normal; } table.form th { background:#cccce6; } table.form td { background:#f0f0f0; width:500px; } strong.ttl { text-align:left; border-left:solid 4px #cc0000; display:block; padding:2px 5px; margin-top:1.5em; } input.button { width:90px; } --> </style> 宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- ホームページのレイアウト崩れ
ホームページのレイアウト崩れについての質問です。 全画面でページを表示するのは問題ないのですが、 ウィンドウを小さくすると、レイアウトが崩れてしまいます。 それを防ぐための方法をご存知の方がいましたら、教えてくださると嬉しいです。 （このページのように、窓のサイズを変更しても、 文字や画像がが縦に崩れないようにしたい、ということです。）
- ベストアンサー
- その他（インターネット・Webサービス）
- ＦＬＡＳＨを横並びにしたい
ＦＣ２ブログのメイン記事部分に 100 x 100のＦＬＡＳＨ画像を ３つ横に整列配置させたいのですが、 いまいちやり方がわかりません。 普通の画像の回り込みの仕方 （align="left"）は一応、解るのですが。。。 お詳しいかた何卒ご教授願います。
- ベストアンサー
- Flash
- レイアウトの崩れについて
先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。 どうすればdivの中にtableがおさまるでしょうか。 (XHTML) <div id="main"> <div class="contents"> <table> <tr> <td id="tdl" rowspan="4">>映像</td> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> </table> </div> </div> <div id="sub"> 内容 </div> (CSS) #main { width: 600px; float: left; } .contents { width: 600px; height: 155px; background-color: #f5f5dc; font-size: 16px; float: left; } table { width: 590px; height: 150px; border-collapse: collapse; table-layout: fixed; border: solid; border-color: #f1f1f1; } th { width: 100px; height: 32px; border-bottom: solid; border-bottom: thin dotted; background-color: #f1f1f1; font-size: 16px; text-align: left; } #tdl { width: 160px; height: 145px; border: none; } td { width: 320px; height: 32px; border-bottom: thin dotted; font-size: 16px; text-align: left; } #sub { width: 150px; height: 145px; background-color: #999; float: right; } 関係あるか分かりませんが、サイト全体の幅は770pxです。 書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- ブログとブラウザについて
先日、ライブドアでブログスペースを借り、ブログを始めました。 ブログを付けるのは初めてなもので分からないことだらけなんですが、 IEでブログを閲覧した場合と、Firefoxで閲覧した場合に、レイアウトにズレが生じてしまいます。 常にFirefoxを使用しており、Firefoxでしか自分のブログのレイアウトを確認していませんでした。 ですが、今日IEで閲覧したところレイアウトがすごくズレていて・・・。 特に記事本文がガタガタになっていました。 改行を考慮して1行に文章をまとめていたのに、IEでは2行にわたって本文が続いていたりしていて。 デザインは"デフォルト2005 (ブラック)"を使用しており、カスタマイズ出来るのでCSSを確認してみました。 .main,.mainmore{ font-size:x-small; margin:10px 20px 0; text-align:left; 最初、上記のようになっていたのを、 .main,.mainmore{ font-size:9; margin:10px 20px 0; text-align:left; ブラウザ間でCSS内の"x-large"や"x-small"にズレがあるのかと思ったもので、上記のように直しました。 するとIEではレイアウトがきれいに整ったんですが、Firefoxでは文字が小さすぎて非常に読みづらくなってしまいました。 フォントサイズには、ブラウザ間で差があるのでしょうか。 上の方法はIEで見やすくなったのは良いんですが、Firefoxで見にくくなってしまうのはどうも・・・。 既にたくさんの記事を書いたので、新たに行を整え直すというのは困難を極めます。 同じフォント、同じフォントサイズにも関わらず、ブラウザによって微妙に生じてしまうズレを無くすのは不可能なのでしょうか。 ちなみに、CSSの知識については皆無なので、上記のようにフォントサイズを変えるくらいしか出来ません。 分からないところがあれば訊いてください。 難なく補足します。 贅沢な質問かもしれませんが、回答よろしくお願いします。
- ベストアンサー
- ブログ
- レイアウトはテーブルよりＣＳＳですか？
今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをＣＳＳに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・ＣＳＳでレイアウトを組むとき、左上を基点にされていますか？全体を中央に配置するようにされていますか？ ・ＣＳＳで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか？簡単なやり方がありますか？ ・やはり、レイアウトにはテーブルよりも、ＣＳＳを使ったほうがいいですか？ ご意見・ご回答いただきたく、どうぞよろしくお願いします。
- ベストアンサー
- CSS
