一列に?並べたい

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: のんち : 2007/01/27(土) 11:13  ID:vd4TFr0s sub-zH
初めて書き込み致します。
かなり初歩的な質問だと思うので恥かしいですが、
大学の課題をやっていて分からなかったとこが
あるので分かる方いればせひ教えて下さい。




下のように表示させたいのですが、


■Dateオブジェクト

■マウスオーバー

■肥満度計算

■Google Map



今の状況ですと



Dateオブジェクト


マウスオーバー


肥満度計算


Google Map

このように表示されてしまうのです。


現在のソースはこんな感じです;;
<html><head>
<style type="text/css">
a {
text-decoration: none;
color: #66c;
font-size: 0.9em;
    font-weight:bold;
}

h1 {
color: #ff0;
}

a:hover{
color: #933;
text-decoration: underline;
}


</style>
<title>stylesheet sample</title>
</head><body>

<table>

<h1>■</h1><a href="22seiki.html" target="right">Dateオブジェクト</a><br>

<h1>■</h1><a href="event3.html" target="right">マウスオーバー</a><br>

<h1>■</h1><a href="event4.html" target="right">肥満度計算</a><br>

<h1>■</h1><a href="kokyou.html" target="right">Google Map</a><br>

</table>

</body></html>


是非宜しくお願い致します!!!

1   名前: ぬぬ : 2007/01/27(土) 11:13  ID:fS.o6ZYH sub-t1
htmlがむちゃくちゃです^^;
h1は見出しをマークアップするための要素です。
何のために■をh1でマークアップしているのですか?
tableの中に直接文章を入れることは出来ません。
せめて
<table>
<tr>
<td>
ココに文章
</td>
</tr>
</table>
これくらいしましょう。大学の課題が何の課題かわかりませんがもし「webページを作る」課題なのでしたらもう少し基本的なhtmlの知識が必要かと思います。

2   名前: イサ : 2007/01/27(土) 11:13  [URL]  ID:0yJG31Zh sub-Ds
以下ではどうですか?

<html>
<head>
<style type="text/css">
<!--
a {
text-decoration: none;
color: #66c;
font-size: 0.9em;
  font-weight:bold;
}

.ff0 {
color: #ff0;
}

a:hover{
color: #933;
text-decoration: underline;
}

-->
</style>
<title>stylesheet sample</title>
</head>
<body>

<p>
<span class="ff0">■</span><a href="22seiki.html" target="right">Dateオブジェク</a>
</p>

<p>
<span class="ff0">■</span><a href="event3.html" target="right">マウスオーバー</a>
</p>

<p>
<span class="ff0">■</span><a href="event4.html" target="right">肥満度計算</a>
</p>


<p>
<span class="ff0">■</span><a href="kokyou.html" target="right">Google Map</a>
</p>

</body>
</html>

リストタグ<ul>を使ってもいいでしょう。

ソースはコピペしたので、そのままにしていますが、target="right"って何ですか?
僕の知識不足かもしれませんが、はじめてみました・・・?
いずれにしてもtargetは、推奨されていないようですよ。

<table>〜</table>
だけでは、何も反映されませんよ。

例)
<table>
<tr>
<td>AAA</td>
</tr>
</table>







3   名前: のんち : 2007/01/27(土) 11:13  ID:vd4TFr0s sub-zH
回答ありがとうございます。
かなり初心者ですいません。
自分でかなりと考えてやってきてこんな感じになりました。


このソースはフレームの一部なもんで
target="right"っていうのを使ってるんです・・・
上手くここでは説明出来なくてすいません。


>h1は見出しをマークアップするための要素です。
>何のために■をh1でマークアップしているのですか?
ただ■の色を変えるためだけに使ってしまいました。

もう一度皆さんのを参考にしてやっていきます。

4   名前: Z ◆XTzyosZXcL : 2007/01/27(土) 11:13  ID:CSqyQR5N sub-Cl
 基礎はいたって簡単ですが、「大学の課題」なのであれば仕様書の存在は知っておいたほうがよいかと思います。

HTML4.01仕様書)
http://www.w3.org/TR/html401/

XHTML1.0仕様書)
http://www.w3.org/TR/xhtml1/

XHTML1.1仕様書)
http://www.w3.org/TR/xhtml11/

参考・仕様書の読み方など)
http://www.kanzaki.com/works/2001/pub/wsd01.html

その他参考資料)
http://web.xii.jp/iec/links/html
http://web.xii.jp/iec/links/xhtml
http://web.xii.jp/iec/links/css

5   名前: 匿名 : 2007/01/27(土) 11:13  ID:RKsDHNH5 sub-Ds
<h1>■</h1>これ間違いですよ。
<h1>はページに1つだけの大見出しです。
<h1>は見出しで、改行される約束になっています。

約束を破らせるには、cssで指示しないといけません。
私は、無理やりに約束を破らせるより、本来の意味にあったタグを使うことをお薦めします。

大学の課題らしいので、ヒントだけ。
大きなお世話ですが、tableよりlistを使われるほうが自然ですよ。


6   名前: のんち : 2007/01/27(土) 11:13  ID:vd4TFr0s sub-zH
回答ありがとうございます。

イサさんのをコピペさせて頂きました;;
ちゃんと出来ました。

tableタグは消すのを忘れてました。。。
一応tebleタグの使い方は理解しております。

大学のJavaの資料やスタイルシートの教材などもあるんですが
読んでも読んでも全く理解できなくて困っている状態です。
先生の言っていることも理解出来ず;

匿名さんの言われるlistも参考にさせて頂きます。

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

7   名前: Z ◆XTzyosZXcL : 2007/01/27(土) 11:13  ID:CSqyQR5N sub-Cl
>>3を見落としていたので追記。
>このソースはフレームの一部なもんで
 えーと、そもそもフレームは「使うべきではない(使う場合には非対応環境のことも考慮すべき)」技術なのですが(^^;。どうしても使うなら、フレーム定義を行っているページにNOFRAMES要素で「適切な代替手段」を設定してください。

「フレーム 否定」のキーワードでGoogle検索した結果:
http://www.google.co.jp/search?hl=ja&q=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%80%80%E5%90%A6%E5%AE%9A&lr=lang_ja

余談:
http://hyper-text.org/archives/2006/11/xhtml_css_master_mistakes.shtml

8   名前: のんち : 2007/01/27(土) 11:13  ID:vd4TFr0s sub-zH
Zさん

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

>そもそもフレームは「使うべきではない(使う場合には非対応環境のことも考慮すべき)」技術

そうなんですか!?それは知りませんでした;
フレームは今日習ったばかりなのでよく知りませんでした。
課題はフレームを使って仕上げればならなかったので・

色々教えてくださって勉強になりました。
ありがとうございました。

9   名前: Z ◆XTzyosZXcL : 2007/01/27(土) 11:13  ID:CSqyQR5N sub-Cl
>>8
 なるほど、条件付でしたか(^^;。それは失礼致しました。

 まあ、一応下記もご参考に・・・。

http://web.xii.jp/iec/links/accessibility
http://web.xii.jp/iec/links/usability
http://web.xii.jp/iec/links/glossary

#レス不要です。

10   名前: K+S : 2007/01/27(土) 11:13  ID:nROqylMa sub-YS
余談ですが…。
大学などでHTMLを扱うというところは、そのほとんどで不適切な内容の講義が行なわれている気がします。
妥当性の欠如は未だしも、某あやしい本のように自信満々に虚偽を教示しているのには呆れてしまいます;閑話休題。


見るからにフレームのメニューページなので、こんな風に書いてみました。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; CHARSET=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>stylesheet sample</title>
<style type="text/css">
span.marker {
	color: #ff0;
}
ul#menu_list {
	margin:0;
	padding:0;
	list-style:none outside;
}
ul#menu_list li {
	line-height:1.7;
}
a {
	text-decoration: none;
	color: #66c;
	font-size: 0.9em;
	font-weight: bold;
}
a:hover{
	color: #933;
	text-decoration: underline;
}
</style>
<base target="right">
</head>
<body>

<ul id="menu_list">
<li><span class="marker">■</span><a href="22seiki.html">Dateオブジェクト</a></li>
<li><span class="marker">■</span><a href="event3.html">マウスオーバー</a></li>
<li><span class="marker">■</span><a href="event4.html">肥満度計算</a></li>
<li><span class="marker">■</span><a href="kokyou.html">Google Map</a></li>
</ul>

</body>
</html>
コピペするくらいなら、記述されている内容のそれぞれの意味を理解してください。

11   名前: 匿名 : 2007/01/27(土) 11:13  ID:WTZ0n2F. sub-Ds
<a href="22seiki.html" target="right">Dateオブジェクト</a><br>
<a href="event3.html" target="right">マウスオーバー</a><br>
<a href="event4.html" target="right">肥満度計算</a><br>
<a href="kokyou.html" target="right">Google Map</a><br>

本当に勉強する気があるなら、表示させたい事に必要な、htmlは上記だけです。
見た目の為に■を入れたいなら、aへの指定でcssで処理したほうがいいですよ。
もちろん、リストを使うのもグッドです。
http://www.tagindex.com/html_tag/list/index.html
一番最初にマーク付きってありますよ。

理解せずに、コピペで対処してきたから、
    大学のJavaの資料やスタイルシートの教材などもあるんですが
    読んでも読んでも全く理解できなくて困っている状態です。
    先生の言っていることも理解出来ず;
になっているんですよ。

判らない事は、先生に質問しなさい。あなたにはその権利がある。
努力しないで、わからないでは話になりません。
答え丸写しのカンニングでその場しのぎは止めて、先生に質問&相談して、
つまづいている場所を発見して、そこから学びなおしなさい。それが一番早いです。

一覧へ戻る