サイト構築の練習サイト

解決済

質問者：kumiko-t
質問日時：2012/08/09 16:15
回答数：1件

ＤＴＰの仕事をしていますが、これからＷＥＢの仕事もすることになり、独学で勉強中です。

いままで、http://m.i474.info/archives/214　こちらのサイトを使って、
ＨＴＭＬとＣＳＳの基礎練習をしていました。

まもなく終わりそうなので、別の練習をしたいと思っていますが、
探しても探してもここのサイトのように、ＣＳＳのカンプ＋画像添付付きのサイトがありません。

サイトを作ってみることが一番の近道だと思っています。

初心者向けで、ＣＳＳカンプ＋添付画像付きの練習サイトがありましたら教えていただきたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2012/08/09 18:34

そのサイトをクリアすれば、もうすることはないような・・

ただ、すこし古い情報を基にされていますので注意は必要です。
本来
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』ものなので、class名は、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名が良いでしょう。
　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/h … )
　のように、XMLとしても通用するHTMLを書くようにすれば良いでしょう。

　これからは、実際に自分のデータを元にページを作りましょう。
そのときに参照するのは、解説サイトではなく仕様書ですよ。
★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
★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/h … )