-
ID:C16whA さんの質問

お久しぶりです、素人です。以前『はじめまして素人です!現在「ゼロからわかる HTML&CSS超入門」なる教科書片手に、勤め先の子会社のHPをイチから一人で作ることになりました~・・・』の書き出しでお世話になったものです。その節は皆様から大変参考になるアドバイスをいただきまして、本当に本当にありがとうございました。
その後も子会社HP製作業務が続いておりまして、現在4社目を製作中なのですが、躓きまして...皆様へ質問させていただきます。
tableタグ内に背景画像を読み込むと、内容のある部分までしか画像が表示されず、途中で切れる格好になります。使用しているブラウザはGoogleChlomeで、IE6やSafariでは表示がうまくいっています。

<table class="top_page_frame">
<tr>
<th height="36px" colspan="3" style="text-align:center; line-height:normal;" ><a href="news.html">ニュース一覧</a>
</th>
</tr>
<tr style="line-height:2.2;">
<td width="100px" style="padding-left:30px;">formatDate("")</td>
<td width="70px"><img src="" alt="" width="46px" height="20px" /></td>
<td><a href="">.ニュース記事.ニュースタイトル</a></td>
</tr>
</table>

と、このようなタグのth部分にCSSで背景を呼び、表示されるのは下の段のニュース記事などの文字が入力される幅まで、という感じです。
うまく伝えられているか不安ですが、何かお気づきの方がいらっしゃいましたらアドバイスいただければ幸いです。よろしくお願いいたします。

みんなの回答 9 件

ID:BT/TZg さんの回答

最終的にどの部分まで背景画像を表示させたいのか分かりませんが、thのheightの高さを変更するだけではダメですか?

ID:C16whA

トピ主です。コメントありがとうございます。どちらかというとwidthですかね。高さはすべて表示が出ていて、差し込みたい画像は543*36で、tableのwidthは556です。borderは1px、paddingは0にしています。
追記事項で何かわかりますでしょうか。。。

ID:BT/TZg

う~ん、ちょっと分からないですね。
CSSの記述も書いてくれると分かるかと思います。

ID:C16whA

コメ主さま、トピ主です。申し訳ありません。解決しました。thのwidthを指定して解決できました。初歩ですよね、きっと。。。お時間割いてくださってありがとうございました。

ID:wmuLTY さんの回答

そろそろ人に聞くのはやめて仕様書しっかり読もうよ

ID:BiT5fs

素人だって言ってるんだから教えてあげればええやん

ID:C16whA

トピ主です。コメントありがとうございます。今、いただいたコメントで初めて「仕様書」という言葉を知り、少し調べてみたのですが、おそらく、製作初期から自分で書き込んで行ったりしなきゃいけないものですよね?大変申し訳ありません。。。このレベルです。。。

ID:HsSDki さんの回答

こんなんで躓いて、こういうとこでいちいち聞いてるような人に務まる仕事でもレベルでもないと思う。

ID:C16whA

トピ主です。コメントありがとうございます。務まらないと言われてしまえばそれまでですが、もはや私もだからといって投げ出せるものでもないことだけはわかったのです。ここで質問させてもらうことも勉強だと思っています。「仕事」なのに「勉強」と言っているようじゃ・・・と思われるかもしれませんが、自分で調べるしかないのでその1つの手法としてプロの皆様にお聞きしています。
不快に思われたらすみません。。。

ID:GqVw3t

トピ主が務まるかどうかなんて質問してないし、Q&Aサイトで「いちいち聞いてるような」って正気ですか?

ID:d0Clm7

優しいんですね。ぜひ答えてあげてください。

ID:8QNb0L さんの回答

とりあえず“とほほのWWW入門”の内容を覚えるところから始めてください。
tdのwidthとheightに単位は必要ありません。

とほほのWWW入門

http://www.tohoho-web.com/www.htm
ID:C16whA

トピ主です。コメント、ならびにサイトのご紹介ありがとうございます。tdのwidthとheightに単位は要らないとのことですが、デフォルトでPX単位として読み込まれるのでしょうか。とほほ、ませていただきます。ありがとうございます。

ID:8QNb0L

数字だけの場合はpxです。解らないと感じたら即“とほほ”をよみましょう。
読むってか暗記しましょう。
以下:抜粋
”H3-H4T/e2+/N2+。セルの高さを 300 のようなピクセル値、または 50% のようなパーセントで指定します。HTML5 では廃止予定です。”
www.tohoho-web.com/html/td.htm

ID:C16whA

コメ主さま、トピ主です。今現在では抜粋部分も理解できなかったので、読んで、暗記します。ありがとうございます。

ID:kuiJCP さんの回答

もういい加減tableタグから脱却しようじゃないか。
そして、cssも直書きはやめようじゃないか。

ID:C16whA

トピ主です。コメントありがとうございます。恐れ入ります、質問させてください。
tableタグからの脱却ですか・・・;サイト性質上、会社概要や役員名簿などで表を使いたい場合が多いのですが、そういう時はどんなブロックレベル要素をお使いですか?質問を増やしてしまってすみません。可能であればお教えください。
あと、CSSの直書きは次のコメ主様もおっしゃってるインラインスタイルのことでしょうか。確かに自分でも混乱することがあります。整理してCSSはCSSでまとめるようにします。ありがとうございます。

ID:d0Clm7

表は表でtable使うのは必然。
コメ主はレイアウト全般にtable使うのをやめようと言っている。
と思いたい。
たまに、table見ただけで反射的に時代遅れ!と言い出す輩もいるが。

ID:C16whA

↑コメ主様、トピ主です。
コメントありがとうございます。なるほど、です。一応ページ全体はdiv class名をつけて分割して、floatとかで配置しています。いまだにどういった方法が正解かわかりませんが。。。

ID:RpIQqC さんの回答

HTMLより、thに背景を指定してるCSSを提示した方がいいのでは。
あと、インラインstyleとclassが混在してるようだけど、インラインはやめたほうがいいよ。

ID:C16whA

トピ主です。コメントありがとうございます。確かに。CSS書かないとアレですよね。。。さらに恐縮ですが、質問させてください。前のコメ主さまもおっしゃったように、インラインのstyleは極力使わないようにしていきたいと思うのですが、idとclassはどんな風に使い分けていらっしゃいますか?最初にこの仕事を担当していた前任者が両方使っていたのですが規則性がわからず、私もところどころに混在するような使い方をしてしまっています。
そして先ほど、本題は解決いたしました!thのwidthを指定することで解決できました。大変お騒がせいたしました。

ID:C16whA さんの回答

トピ主です。
コメントを下さった皆様、ありがとうございました。
本題、解決いたしました。ありがとうございます。コメントくださった皆様に個別に質問をしてしまっている部分もあるのですが、可能であれば教えていただけたらありがたいです。
本当にありがとうございました。
本職の皆様からしたら「おい、こんなの初歩だぞ!」と、思われるような質問もしてしまうかもしれませんが、Google先生でも解決できない問題が生じたとき、きっとまた頼らせていただきます。どうか寛大なお心でご回答いただければと思います。
またよろしくお願いいたします。

ID:d0Clm7 さんの回答

上のほうで厳しいこと言ってる方もいますが、あながち間違ってるわけでもないと私も思います。
私も始めたばかりの頃は、正直今から考えれば初歩のところでだいぶ苦戦しました。周りに聞く人もいませんでしたし。
が、結局その根本原因は基礎をすっ飛ばしたことにあると思っています。
今イチわかってなくても結果的に表示できちゃってたことがいかに多いかを基礎の本などのを読み込んでいるうちに思い知らされました。
コメ主さんは、googleやまたココに頼る前に基礎の勉強をする、そんな段階かと思います。
この先もその姿勢でないと、自分で壁を高くし続けることになるのではないでしょうか。

ID:vUU/6N

凄く良いアドバイスだと思います。

ID:C16whA

トピ主です。
アドバイスありがとうございます。たしかに、ゼロからのスタートで「なんで飲料卸会社でHPつくってんだろ」とか思いながらそれでもなんとか締め切りに間に合わせて形にしなければ、という段階からは抜け出せたように思います。
改めて、基礎を身につけ直さなければ、というか身につけなければいけないですよね。色々な本も紹介していただいたこともありますし、もう一度読み直して勉強します。ありがとうございました。

ID:cAgJrF

このコメントは的確ですね。

ID:d0Clm7

コメ主です。
上から目線で厳しいかもでしたが、ぜひ頑張ってください。
プロであろうが、専業でなかろうが、そもそもどんな仕事であろうが通ずる部分だと思います。
老婆心ながら付け加えると、「何度も読む」事になると思います。そしてぜひ例文などを丸写しでもいいので書いて動かしてください。おそらく本にもそう書いてあるはずです。読むだけの習熟度とは桁が違います。急がばまわれです。

ID:tr2HKx さんの回答

こんばんわ、素人です。
これじゃだめでつか・・・。

//HTMLソース

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style>
/* style */
table.top_page_frame col.news01 {width: 100px;}
table.top_page_frame col.news02 {width: 46px;}
table.top_page_frame col.news03 {width: auto;}
table.top_page_frame th,
table.top_page_frame td {padding: 10px 0;}
table.top_page_frame td.formatDate {padding-left: 30px;}

.news01 {background-color : #ccffff;}
.news02 {background-color : #ffccff;}
.news03 {background-color : #ffffcc;}
</style>
</head>
<body>
<table class="top_page_frame">
<colgroup>
<col class="news01" />
<col class="news02" />
<col class="news03" />
</colgroup>
<thead>
<tr>
<th colspan="3"><a href="news.html">ニュース一覧</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="formatDate">formatDate("")</td>
<td> </td>
<td><a href="#news">.ニュース記事.ニュースタイトル</a></td>
</tr>
</tbody>
</table>
</body>
</html>

ID:vUU/6N

テーブル組に頼るんでなくdivで組めるように少しずつなっていこうね。ということをコメント5番目の人は言ってくれてます。

適当だけど最初のウチはこんなんで良いと思うよ。

//HTMLソース

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<style>
/* style */
.box {padding:10px 0;}
.formatDate {padding-left:30px;}
.news01 {background-color:#ccffff; width:100px;}
.news02 {background-color:#ffccff; width:46px;}
.news03 {background-color:#ffffcc; width:auto; }
</style>
</head>
<body>

<div class="top_page_frame">
<div class="box"><a href="news.html">ニュース一覧</a></div>
<table>
<tr>
<td class="box news01 formatDate">formatDate("")</td>
<td class="box news02"></td>
<td class="box news03"><a href="#news">.ニュース記事.ニュースタイトル</a></td>
</tr>
</table><!--box_asset-->
</div><!--top_page_frame-->

</body>
</html>

ID:y8jOHb

あらら、文法違反。これは酷い。div中w

ID:Rk.vk4

>ID:y8jOHb2zBQlL
この内容でそこまで神経質にまともに回答する訳ねーだろあほか。ちょっと脳が残念すぎる。

ID:tr2HKx

↑指摘され、激おこぷんぷん丸。

ID:LEVLQb

めんどくさいなぁ。@Rk.vk4rzjMP7

ID:/olKb0

@Rk.vk4rzjMP7がオモロイ件。

ID:lL5sCm

ありがとう@Rk.vk4rzjMP7

最終更新日:2013-07-30 (2,787 views)

関連するトピックス

ページ上部に戻る