今年からWebディレクターをしています。
先日、あるデザイナーさんが、Webページのテンプレートを作ってくれたのですが、
ブラウザで見たところ、なんか表示が変で、作成した本人に聞いたところ、｢おかしくないです。これは一般的に使われている正しい書き方です。ちゃんとHTMLとCSSを勉強してください｣と怒られました。
今、勉強中なんですが、下記のタグ、これは正しいですか？申し訳ありません。教えてください。
=====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正しいタグの書き方</title>
</head>
<style type="text/css">
h2.header .photo {...}
h2.header p {...}
h2.header dd a ol {...}
</style>
<body>
<h2 class="header"><a href="#menu"><img src="photo.jpg" class="photo">
// ヘッダーここから
<p>テキストテキスト...</p>
<p>テキストテキスト...</p>
<p>テキストテキスト...</p>
<em><br>
<strong><br>
<h1>タイトル</h1>
<p>テキストテキスト...</p>
</strong>
</em>
<br>
<dl>
<dt>タイトル</dt>
<dd><a href="#menu">
<ol>// メニューここから
<li><a href="#01">メニュー1</a></li>
<li><a href="#02">メニュー2</a></li>
<li><a href="#03">メニュー3</a></li>
</ol>
</a></dd>
</dl>
</a> </h2>
</body>
</html>
=====
みんなの回答 20 件
「表示が変」と「書き方が正しいか」は別の話では...
<a>の閉じ方が変。「// ヘッダーここから」ってなにこれ？コメントアウトのつもり？
釣りですね、わかります。
まあ、見た目がよろしければ良い話ですから。
色々とおかしい。
まず、トピ主はWebディレクターなのに
「なんか表示が変っ」て素人なのか？
どの様に変なのか説明できないの？
で、デザイナー。
表示が変だと言われたのに
「一般的に使われている正しい書き方」って
答えになってないでしょ。
そのデザイナーは見た目にこだわらないの？
コードの書き方の方が大事？
ネストがすごいことになってますね〜。
HTMLのコメントアウト「<!-- -->」。
phpのコメントアウト「//」
「<h1>～<h6>」のheadingタグは階層構造にして使用し、入れ子にしない。
「<a>」の使い方が強引過ぎる。
「<em>」と「<strong>」の終了タグ（閉じタグ）が無い。
XHTMLは整形式（Wellformed）でコーディング、終了を意味する「 /」半角スペースにスラッシュ。
「<meta content-style-type="text/css">」でstyleの指定も無い。
javascriptを使用する際は「<meta content-script-type="text/javascript">」の指定をする。
「<style>」タグの中に、HTMLのコメントアウト「<!-- -->」が記述されていない。
という部分が気になりました。
これがマジだったら試されてるね。
何から突っ込んでいいの？(´･_･`)
h2の中に色々入ってる…。
HTMLは元々文書の段落や構造を指定するものなので、CSSでStyleを指定する前に文書としておかしくないか、間違った文法になっていないか等気をつけると良いと思います。
「表示が変」は致命的なので、基本をしっかりおさえておいた方が良いと思います。
表示のみ意識するのであれば、全て画像で問題ないかと思います。
<img src="表示部分全領域の画像へのパス" width="全画面" height="全画面" alt="HPです">
表示のどこが変ってちゃんとキャプチャなりとってフィードバックすればいいのにね、と釣られてみる
この程度のソースでデザイナーに言いくるめられていうようじゃディレクターは厳しいな。
「なんか表示が変」でみんなから答えをもらうのもディレクターとして伝達能力が乏しい。それに表示がどう変なのかデザイナーと付け合わせしていないようにも思えるね。
まあ、釣りだということを願うわ。
全然この質問の全貌が見えない。何コレ。
このソース、質問するために一部変えてますよね。その時にタグとかコメントアウト弄ってませんか？
もし質問者さんがテキスト以外のタグとか弄ってないようでしたら、ちょっとコーディングレベル低いと思います。これでは正しい表示ができません。このレベルですとCSSも怪しいです。タグが正しく書かれていてもCSSでレイアウトを正しく作れていなければ崩れます。
デザイナーには崩れてる箇所とここで集まった回答を伝えて下さい。
ブラウザチェックも忘れずに
お前らこういうレベルの低いトピックにバクバク食いつくな
こんなのがテンプレートとか終わってんな。
ページ量産されたら、たまったもんじゃない。
インライン要素にブロック要素突っ込んでるあたり、
基本すら出来てないし、正直まだ何も書かれてないほうがマシなレベル。
そもそもこのソースコードがデザイナーが作ったテンプレートなのか、勉強中であるトピ主が書いたものなのかすら分からない件。
トピ主さんが書いたに1票！
見れば見るほど制作に携わる人が書かないソースと思います。
webの第一歩を踏み出した人なら教科書通り書くと思うし、↑みたいな入れ子を多様して書く人なら、<h2><h1>〜</h1></h2>はしないかなと思いました。
矛盾したソースですね。
xhtmlなのにimgタグ閉じてない、width、height、alt書いてないのは文法違反
<img src="../images/hoge.jpg" alt="hage" width="hoge" height="hoge" />
イメージのソースパスは仮だけど、上の書き方が正しい。
これ素人がコーディングしてるでしょ。あきらかに釣りだね。
HTMLなんぞ素人でもちょっとやりゃ覚えれるんだから一度やったらいいのに。
…と釣りにレスしてみるテスト
関連するトピックス