質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1957閲覧

html、css tableの画像配置について

pa29monster

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/16 04:26

編集2016/07/16 09:05

kei344さんに教えて頂いたやり方でうまくいきました。
皆さんもご協力ありがとうございました。

htmlを触り始めて一ヶ月ぐらいの初心者です。
参考書やネットで調べながら少しずつホームページを作っています。

ここで本題です。
イメージ説明

見にくいですが図の上の左ようにtable内の各セルに画像を配置し、両サイドの縦列A,Cを図の上の右のようにtableのレイアウトを変えずにマウスオーバーで拡大するようにCSSとhtmlで設定しました。
ですがローカル環境で見てみると、Firefoxでは思い通りに見れるのですがIEでは図の下のようにA,C画像が上にずれ、画像の中心が上の罫線乗っかるような形になってしまいます。マウスオーバーは正常に効きます。

テーブルのhtml、CSSのスタイルはこのような感じです。
上記の図とは多少ことなりますが貼っておきます。
実際のテーブルにはAの左手前に名前欄とCの右後にリンクボタンが付いてあるので一応下記のスタイルに書いておきました。

<table> <tbody> <tr> <td class="title01" colspan="5"> タイトル名 </td> </tr> <tr> <td width="170"> 名前 </td> <td width="110"> A </td> <td width="190"> B </td> <td width="110"> C </td> <td width="90"> PAGE JUMP </td> </tR> <tr> <td class="nameA"> NAME <span class="nameA">NAMEの補足</span> </td> <td class="A"> <img src="A.jpg"> </td> <td class="B"> <img src="B.jpg"> </td> <td class="C"> <img src="C"> </td> <td class="pagejunp"> <a href="http:・・・"> <img src="pagejunp.jpg" style="width:75px;"> </a> <a href="http:・・・"> <img src="pagejunp02.jpg" style="width:75px;"> </a> </td> </tr> </tbody> </table>
table td{ border:2px solid #715500; } table td.title01{ background:url(tytle01.jpg) repeat; background-size:contain; color:white; height:30px; font-size:18px; font-weight:bold; } table td.nameA{ width:100px; color:black; font-size:14px; text-align:left; padding-left:10px; font-weight:bold; line-height:1.5; background-color:#FFFECD; } td span.nameA{ display:block; color:black; font-size:11px; text-align:right; padding-right:20px; margin:5px 0 10px; border-bottom:1px solid red; padding-bottom:5px; width:140px; } table td.A{ position:relative; height:100; } table td.A img{ width:110px; position:absolute; top:0; left:0; right: 0; bottom: 0; margin:auto; transition:0.2s; text-align:center; vertical-align:middle; } table td.A img:hover{ width:156px; z-index:9999; } table td.B_size{ width:200px; height:100px; background:url(back.png) no-repeat; background-size:35px; } table td.B img{ width:200px; } table td.C{ position:relative; height:100px; } table td.C img{ width:110px; position:absolute; top:0; right:0; left: 0; bottom: 0; margin:auto; transition:0.2s; } table td.C img:hover{ width:156px; z-index:9999; table td.pagejunp{ width:100px; height:100px; } table td.pagejunp img{ padding:4px; }

何か間違いはあるでしょうか?
もっと別の簡単スタイルシート等あると思いますが頭がパニックに
なるのでこのスタイルをベースに訂正等お願いします。
ちなみにDOCTYPEというのも最新をちゃんと設定ししました。
可能性の話でもいいです。わかる範囲内で回答お願いします。
初心者なもので出来るだけ分かりやすく教えて頂けるとうれしいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/16 04:28

CSSはHTMLとセットで動くものです。HTML全体を追記してください。 また、コードブロックは```で囲んで、シンタックス機能を使って見やすくしてください。
kei344

2016/07/16 04:40 編集

図が貼られていませんのでご確認ください。
退会済みユーザー

退会済みユーザー

2016/07/16 05:21 編集

HTML「全体」を追記してください。そのままでなくても良いです。最低限不具合を確認できるだけのミニマムソースを提示してください。table部分は最低限必要です。
Lhankor_Mhy

2016/07/16 06:12

動作確認をしたIEのバージョンはどれですか?
kei344

2016/07/16 06:42

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
guest

回答3

0

html

1 </body> 2</table>

html

1 </tbody> // <- ここ 2</table>

HTMLが文法的に破綻しているので、

http://www.htmllint.net/html-lint/htmllint.html#

上記のようなツールを使ってチェックしてください。
HTMLが正しくないと、CSSやJavaScriptは意図したように動作しません。

投稿2016/07/16 06:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pa29monster

2016/07/16 06:43

tが抜けていたのはこちらにコピーするときの間違いでした。 実際のデーターは抜けていませんでした。 教えて頂いたツールはサーバーにアップしていないローカル環境にあるデーターはできないのでしょうか?
guest

0

CSS

1table td.A img{ 2 width:110px; 3 position:absolute; 4 top:0; 5 left:0; 6 right: 0; 7 bottom: 0; 8 margin:0 auto; /* ここを変更 */ 9 transition:0.2s; 10 text-align:center; 11 vertical-align:middle; 12}

これでとりあえずそれっぽくなると思います。
なんでこうなるのかについては考え中。

投稿2016/07/16 07:53

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pa29monster

2016/07/16 08:15

回答ありがとうございます。 確かにそれっぽくなりました。 微調整してみます。
guest

0

ベストアンサー

<th><td>にpositionの指定はできません - blogですかい】
http://oh-sky.hatenablog.com/entry/2013/11/07/095209

このあたりを御覧ください。


追記:

動くサンプル:https://jsfiddle.net/1bmeboyy/1/

投稿2016/07/16 06:44

編集2016/07/16 08:34
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pa29monster

2016/07/16 07:08

回答ありがとうございます。 上記のものを読ませていただきましたが少し理解できていません。 <td>を<div>または<p>で挟んでcssでも同じく書き換えれば出来るということでしょうか? 下記の解釈でよろしいでしょうか? ``` <div> <td class="A"> <img src="A.jpg"> </td> </div> ``` ``` table div td.A{ position:relative; height:100; } table div td.A img{ width:110px; position:absolute; top:0; left:0; right: 0; bottom: 0; margin:auto; transition:0.2s; text-align:center; vertical-align:middle; } table div td.A img:hover{ width:156px; z-index:9999; } ```
kei344

2016/07/16 07:17

提示した記事に書いてあるコードと、コメントに書かれたコードが肝心な所が違いますので、もう一度ご確認ください。
pa29monster

2016/07/16 07:41

何度もすいません そしてありがとうございます。 内包するんですね こちらでいいでしょうか? やってみたのですが特に変化がありませんでした。 ``` <td class="A"> <div> <img src="A.jpg"> </div> </td> ``` ``` table td.A{ position:relative; height:100; } table td.A div img{ width:110px; position:absolute; top:0; left:0; right: 0; bottom: 0; margin:auto; transition:0.2s; text-align:center; vertical-align:middle; } table td.A div img:hover{ width:156px; z-index:9999; } ```
kei344

2016/07/16 08:33

「table td.A{」⇒「table td.A div {」ですね。 質問文にある、テーブル内の「</tR>」は「</tr>」、CSSの「table td.C img:hover{」は閉じ括弧「}」が足りません。 また、図で描かれているものとHTMLのコードが違いますが、出来るだけ同じものを提示されたほうが良いと思います。 あと、コメント欄でコードを書かず、質問文に追記したほうが他の回答者にも読みやすいので、次からはそうしてもらえるとありがたいです。 IE/Firefoxで同じように表示できるものを追記しておいたので、よければ御覧ください。
pa29monster

2016/07/16 08:52

いろいろとありがとうございいます。 このサイト自体もまだ慣れておらず、ご迷惑おかけしました。 教えて頂いたやり方を一度ためしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問