- ベストアンサー
サイト構築の練習サイト
ＤＴＰの仕事をしていますが、これからＷＥＢの仕事もすることになり、独学で勉強中です。 いままで、http://m.i474.info/archives/214 こちらのサイトを使って、 ＨＴＭＬとＣＳＳの基礎練習をしていました。 まもなく終わりそうなので、別の練習をしたいと思っていますが、 探しても探してもここのサイトのように、ＣＳＳのカンプ＋画像添付付きのサイトがありません。 サイトを作ってみることが一番の近道だと思っています。 初心者向けで、ＣＳＳカンプ＋添付画像付きの練習サイトがありましたら教えていただきたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
そのサイトをクリアすれば、もうすることはないような・・ ただ、すこし古い情報を基にされていますので注意は必要です。 本来 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものなので、class名は、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名が良いでしょう。 idは、リンクやjavascriptのターゲットやページに絶対に一箇所しか現れないところとかに指定します。具体的には目次からのターゲットとかですね。それ以外はclass名だけにするほうが良いでしょう。 <body> <div class="header"> </div> <div class="section"> <h2>+++</h2> <div class="section" id="What_is_HTML"> <h3>*******</h3> <p>******</p> </div> <div class="section" id="Tray_HTML"> <h3>*******</h3> <p>******</p> </div> HTML5に直すときは <body> <header> </header> <section> <h2>+++</h2> <section id="What_is_HTML"> <h3>*******</h3> <p>******</p> </section> <section id="Tray_HTML"> <h3>*******</h3> <p>******</p> </section> と直せます。 また、classを利用して、スタイルシートを書くと楽なのは想像できると思います。 HTMLは、HTML4.01strict(transitinalじゃない)を徹底的に学びましょう。次期HTML5にそのまま活用できます。そのときに、 Polyglot マークアップ: HTML 互換の XHTML 文書 ( http://standards.mitsue.co.jp/resources/w3c/TR/html-polyglot/ ) のように、XMLとしても通用するHTMLを書くようにすれば良いでしょう。 これからは、実際に自分のデータを元にページを作りましょう。 そのときに参照するのは、解説サイトではなく仕様書ですよ。 ★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) ★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ ) ★Polyglot マークアップ: HTML 互換の XHTML 文書 ( http://standards.mitsue.co.jp/resources/w3c/TR/html-polyglot/ )
