• ベストアンサー

サイト構築の練習サイト

DTPの仕事をしていますが、これからWEBの仕事もすることになり、独学で勉強中です。 いままで、http://m.i474.info/archives/214 こちらのサイトを使って、 HTMLとCSSの基礎練習をしていました。 まもなく終わりそうなので、別の練習をしたいと思っていますが、 探しても探してもここのサイトのように、CSSのカンプ+画像添付付きのサイトがありません。 サイトを作ってみることが一番の近道だと思っています。 初心者向けで、CSSカンプ+添付画像付きの練習サイトがありましたら教えていただきたいです。

  • CSS
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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/ )

関連するQ&A

  • オークションサイトを1から構築するには?

    ヤフオク、楽天オークションなどのオークションサイトを自作するには? オークションシステムを無料または有料で借りることはできますが、 それを1から作りたいと思っています。 WEBに関する知識は、HTMLとCSSを少しだけ記述することができる程度です。 もちろんこの2種類だけでは、オークションシステムを構築することはできないので、 どういうものを使えば作ることができるか知りたいです。 完成度は、ヤフオク並みのものを望んでいます。 独学での勉強とサイト構築で約2年以内で完成させたいのですが実現できると思いますか?

  • 短縮URLサイトをつくるには

    こんにちは。 HTMLやCSSがいじれる程度のプログラム初心者ですが、短縮URLサイトを作ってみたいと思っています。 例)http://tinyurl.com/ まずは、どのような本やサイトを参考にするのが一番近道でしょうか? 道筋を教えていただけると幸いです。よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • エクセル練習でおすすめのサイトを教えてください

    こんにちは。 エクセルの基礎から応用までを学ぶことができて、 かつ練習用のエクセルファイルを逐一用意してくださっているサイトはありますか? 私がとてもお世話になっているサイトはこちらです。 http://moritahyoukeisan.com/index.htm 項目ごとに、練習用のエクセルファイル (たとえば、データがすでに入力されていて、あとはvlookupするだけ、 という状態になっているエクセルファイル など)を添付してくださっていて、 とても助かります。 練習する際に、自分で元データから作る、もしくはどこかから見つけてくる、 というのが手間なので、元データを用意してくださっているととてもありがたいです。 このようなサイトが他にもありましたら、教えてください。 よろしくお願いします。

  • CSSで画面上の下側に文章を入れる方法が知りたい

    http://matomade.2chblog.jp/archives/cat_802073.html ↑のサイトの広告の上にある画像のように http://nyafu.livedoor.biz/archives/cat_50054988.html ↑のサイトの左ちょっと下の週間人気記事ランキングのように画像のように 画像上の下にHTML&CSSで文章を入れたいのですが、方法がわかりません。 教えてください。

  • WEBトレース練習簡単おすすめないですか?

    ドットインストールでWEBサイトの作成を勉強して HTMLとCSSを勉強しました。 WEBサイトをトレースしてサイトを0から作れるようになりたいのですが、 お薦めの練習台となるサイトはありませんか? よろしくお願いします。

  • お勧めの本またはサイトはありませんか

    書籍の編集の仕事をしています。普段はWindowsで仕事をしているのですが、ときにはMacを使い自分でDTPを行ったりします。PageMakerなどでDTPは一応できるのですが、フォントや出力などの基礎的な知識が足りません。 DTPに限らず、仕事でMacを使う場合の基礎知識を習得するために、お勧めの本またはサイトがあったら教えてもらえないでしょうか。 よろしくお願いします。

    • 締切済み
    • Mac
  • HTMLとCSSで軽いWEBサイトを作るには?

    HTMLとCSSでWEBサイトを作ったのですが、 読み込みに時間がかかることがあります。 画像をいれたりしてないのになぜこんなに重いかわかりません。 どのようなことに気を付ければ読み込みの早いWEBサイトがつくれますか? HTMLやCSSで読み込みが遅くならないサイト作りのアドバイスを よろしくお願いいします。(*´ω`)

    • ベストアンサー
    • CSS
  • このサイトでは http://www.magonote-seifuku

    このサイトでは http://www.magonote-seifuku.com/ 繰り返しCSSで画像が背景として使われているようですがここから自分のHPでこの画像を使わせてもらう場合CSSの記述の場所をHTMLの文字列のどこにおいたらよいのか?またそのサイトが外部CSSを使っている場合はそのCSSの記述はどこにあるのか?教えていただけませんか?

  • 多言語対応のサイト構築

    お世話になります。 いま、会社案内のサイトを構築しようとしています。 内容はおもにテキスト+画像で、DBを持つなど凝った仕組みは必要ないと思われます。 こちらのサイトを日本語・英語に対応したものにしようとしています。 日本語でも英語でもページのデザイン・レイアウトは同じものを使いたいと思っております。 純粋に/JP/ENなどディレクトリを作って、同じ数だけページを用意すればいい話なのですが、 できればデザイン・レイアウトに関しては一元管理をしたいと思っており、 なおかつ、サイト内で表示する文章や、文章と一緒に表示する画像は HTMLページとは切り離して管理できればと思っています。 (運用する人間がHTMLタグを知らないものですから・・・) 質問は、以下の2つです。 ・このようなことをHTML、JavaScript、CSSなどのクライアント側の技術のみで実現することは可能ですか?  サーバーサイドの技術(ASP、Parl、PHP)などはサーバーで対応しているかわからないので避けたいのです。。。 ・スマートな、いまどきの多言語対応はどういったものがありますか? ・多言語対応のやりかたを紹介しているサイトがあるようでしたら教えてください。 やりたいことをつらつら書いてしまい、わかりにくい点もあるかと思います。 不明点は補足させていただきますのでご指摘ください。 以上、ご回答お待ちしております。

  • CSSを使ったサイトデザインについて

    最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。(当然、場合によって違うので答えはないのでしょうが) たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。

    • ベストアンサー
    • CSS

専門家に質問してみよう