プロが教えるわが家の防犯対策術!

web制作会社に未経験の者です。今後、自分でつくったサイトのCSS/HTMLなどを誰かに見てもらいたいのですが、どこかに自分のコードを批判してくれるような場所はありますでしょうか?

リアルで勉強会などに参加して先輩に見てもらうなどのことは抜きにして、ネット上でそういったことができるサービスやコミュニティをご存知の方がいらっしゃったら教えてください。
もっとサイトを上手に作れるようになりたいです。よろしくお願いいたします!

A 回答 (2件)

読み返してみると、なぜないかの説明にはなってませんね。


ちょっとHTML/CSSの歴史を復習されると分かると思いますので、まずHTML4.01仕様書の
2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
2.4 HTML 4による文書の著述( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 を読んでください。それでピンと来るかも。

 また、
HTML5“とか”アプリ開発入門(1):Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - @IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
 の「【問題2】文書内に埋め込まれた「意味」が不明確」あたりも良いですね。

 肝心な事は、あなたが作成するHTMLにおいて、良いマークアップとは、
「「どこからどこまでが重要な本文なのか」「この<ul>要素はナビゲーションメニューを表しているのか、文書中の個条書きなのか」すらも分からない」
 ではダメだという事ですね。

 HTML4.01では、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたね。具体的にいうと
・ここは、このHTMLのヘッダに当たる(本文じゃない)ので
 <div class="header">~</div>
・ここは本文なので
 <div class="section">~</div>
・ここは内容とは直接関係しないので
 <div class="aside">~</div>
の様にマークアップされてこられたと思いますが、記事のその部分が、作者にとって主題なのか、そうでないのかは他人には判断できないのです。
 今後、HTML5が主流になると思いますが、HTML5では
『文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』新しい要素が追加されますので、よりこの流れが進むでしょう。HTML4.01のように、何でもかんでもDIVとclass名はできなくなります。
"Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )"
 (著者は、他に適切な要素がないときの最後の手段としてdiv要素を使用することが強く奨励される。)
 文書のアウトラインを構成するブロックはsectionを階層をつけてでマークアップするなど・・。
<body>
 <header></header>
 <section>
  <h2></h2>
  <p></p>
  <section>
   <h3></h3>
   <p></p>
   <section>
    <h4></h4>
    <p></p>
   </section>
   <aside></side>
   <nav></nav>
・・・・
 4.3.3 The section element( http://www.w3.org/TR/2014/REC-html5-20141028/sec … )

 他人の書いた、マークアップはその著者が意図してマークアップしている物なので、他人がその正否を判断することはできないのです。

 スタイルシートは、そのHTMLにおける文書構造に基づいてセレクタ書くのですから・・
section{margin-left:2em;font-size:0.95em;}
とすればsectionの階層ごとには左が字下げされ、文字は少しずつ小さくなる、
section section section{margin-left:0;font-size:100%;}
とすれば3階層以降は字下げもフォントサイズ縮小もない。

 要は自分で仕様書をよく読んで理解して、自分の意図した通りにマークアップすることが正しいのですよ。 
 とりあえずHTML4.01とCSS2.1の仕様書くらいはマスターしましょう。誰から文句のつけようがないマークアップを自分ですればよい。



 
    • good
    • 0
この回答へのお礼

ありがとうございました!すごく参考になりました!

お礼日時:2014/12/19 10:40

機械的なものでしたら


 ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
 ⇒The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
などがありますが、あくまで文法以上のチェックはしてくれない。
<p>この章の見出し</p>
<h4>ここは記事だよ・・・</h4>
でもエラーにはならない。

 そのようなサービスはないでしょう。時間の無駄・・・。例えば、ここでHTMLやCSSに突っ込みを入れようなら、猛反発を受けるのが必至です。
 そもそも、仕様書には懇切丁寧に、とても詳しく説明されています。そこにすべて書かれている。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!