このようなサイトを作りたいのですが

Question

http://vegnews.com/
上記サイトのデザインやレイアウトがとても気に入っています。
例えばWordPressなどのテーマを使って、近いものを実現することは可能でしょうか？
また、初心者でも、やる気と理解力があれば、可能でしょうか？
必要なソフトやおおまかな手順をアドバイスしていただけると助かります。

Dreamweaverの初心者なので、わかりやすく説明していただけると大変ありがたいです。
宜しくお願いいたします。

ORUKA1951 · Accepted Answer

もちろん可能です。
　そのサイトが、Webオーサリングツール ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB )を使っているのかそうでないかは判断できませんが、ざっと見る限りオーサリングツールのテンプレートではないようです。
　比較的、文法的には???な部分が多々ありますが、きちんとHTMLを記述して、それに対してスタイルシートとjavascript--JQuery--を使ってデザインされています。
★frashでもtableでも、巨大な画像も使われていません。
　--ブラウザの表示メニューからスタイルシートを選択し「スタイルシートなし」で見れば良いでしょう。

この程度のサイト---オーサリングツールのテンプレートにない---デザインでしたら、きちんとHTMLを記述し、スタイルシートを書けば良いでしょう。それは、慣れればそんなに難しいことではありません。唯、このサイトのそれぞれのページへ進むとわかりますが、明らかにページは動的に作成されています。それに使用されているサーバーサイドのプログラムは、Apache Struts ( http://ja.wikipedia.org/wiki/Struts )ですね。javaを言語にしたウェブアプリケーションです。

したがって、このサイトを考える場合は二つに分けて考える必要があります。
1) HTMLのマークアップと、CSS,javascriptを利用したページの作成
2) 動的にコンテンツを作り出す仕組み

まず(1)について説明します。
a) 文書をそれを構成する要素に分解して、それがどのような要素であるかタグを使ってマークアップしていきます。
　サイトを見る限りでは、デザインのためにHTMLが書かれているように見受けませんから、オーサリングツールではなくテキストエディタのようです。そのため、好きなスタイルシートを適用させてデザインは自由に変更できます。
　　印刷プレビューを確認すると印刷にはまったく別のスタイルが適用され余分なものは
　印刷されませんね。
b) それをスタイルシートとJQueryを使ってプレゼンテーションを指定してあります。
　jQueryは、
★画像を使ったいろいろなjQueryプラグイン224個まとめ( http://kachibito.net/web-design/224-image-jquery-collection.html )から好きなものを探してくればよいです。

(2)の動的なページ作成は、Strutsを使わなくても、SSIなりPHPなりCGIで良いでしょう。このサイトはURLから判断する限りQUERY_STRINGを利用しているようです。
　簡単に言うと、QUERY_STRINGをキーワードで作成されたソースをテンプレートに流し込んでいるだけです。

ORUKA1951 · Answer

＞HTML4.01 transitionalは使うべきでないとされているとのことですが、一番使うべきHTML形式は、現在何でしょうか？

目的によって色々でしょう。
★HTML&CSSの勉強方法について - HTML - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7673765.html )
★HTMLとCSSのお勧めの本を教えてください - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7670050.html )
★今から本格的にHTML勉強するなら - HTML - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7656262.html )

他のプログラムと連携するなら、親和性の高いXML/XHTMLでしょう。私は、世の大勢どおり(^^)、HTML2.0→HTML3.2→HTML4.01→XHTML1.0→XHTML1.1と進んできましたが、HTMLの登場予定で→HTML4.01strictに戻した手合いです。
　strictを身につけておけば、
『HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#toc )』
で、なんとか
　
　動的なページ作成は、ページ数が増えるまで待っても良いと思います。

ORUKA1951 · Answer

　No.6です。HTMLが手打ちだろうと思われる根拠は、「Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )」でチェックしたときに、手打ちでないとありそう見ないミスがたくさんあるからです。文法的には、とても多くの重大な誤りがあります。　使用されているタグ自身は３０種類ですから、どちらかと言うと少ないほうです。HTML4.01transitinalでは、要素は８９個あります。もしstrictで作成すれば、総数７８個です。このように、一般的に使用されるタグは数十個ですから、覚えられない数ではないでしょう。【中学校で学ぶ英単語は２,０００語ですから、その1/100ちょい・・】　そのサイトは、HTML4.01transitinalですが、trnsitinalは現在使うべきでないDOCTYPEです。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから著者　・・・【中略】・・・　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より　大事なことは、HTMLはデザインのためのツールではなく、あくまで文章を読み解き、それを構成する部品(要素=element)に分解し、タグでそれがその文書のどのような構成要素であるかをマークアップするものに過ぎません。デザインとは一切関係ありません。　デザイン/プレゼンテーション=表現は、スタイルシートで指定していきます。

で括られていたら太字で大きく表示され、読み上げソフトでは大きな声で読み上げられるのは、ブラウザが持っているスタイルシートによるものです。　このことを理解して、数十個のタグでマークアップしていけば、そんなに苦労しなくてもHTMLはかけるでしょう。プログラム手に頼らなくても作成できるように作られたものですからね。そもそも、文書を読み解き内容を理解して、要素に分解して最適なタグで括るなんて作業が機械にできるはずがありません。---何億もする人工知能--スーパーコンピューターなら可能かもしれませんが、たかだか十数万円のプログラムじゃ無理でしょう。　やはり、HTMLを知った人の手助けが必要です。--オーサリングツールに頼ったら、こんなサイトはできると思わないでください。HTMLを理解したうえに、ツールのマニュアル--仕様書の十数倍ある---の二つを理解しなけりゃなりません。・・・・・覚えてしまえば、手打ちのほうが楽なのです。手打ちができなければツールも使いこなさない。　このサイトのデザイン自体は、決して難しいものではありません。JQueryはどこからか拾ってくれば良いです。スタイルシートは、ツールでは無理です。(対応していると説明してあっても、それは利用できるという意味だけです。) 　たとえば本文中
中の、段落中のリンクの色は緑にしよう・・なんて、手書なら、div.section p a:link{color:green;}と書けばよいのですが、ツールはそんなこと出来ません。あなたが指定するしかありません。　デザインは、そこまでにしてプログラムですが、個人サイトではそこまでしなくても・・そのサイトは、一種のCMSと考えてよいのですが・・・SSIで十分対処できるでしょう。また、掲示板の出力を一記事ずつしてテンプレートに入れても良いですし・・ ★CSSを使って定型文を挿入できますか？ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7662666.html ) 　画面の大部分は、定型分ですからね。

e_16 · Answer

全く同じ物を作りたいんだったら、そのページを保存してDreamweaverで開いて書き換えればいいだけですが？ VegNews Magazine | Vegan Recipes, Food, News, Travel, Health, Blogs, TV, Jobs, Events

Ripe, juicy, easy peach crisp Read on >>

too_bad · Answer

>>3です。
大変失礼いたしました。
スライドメニューはjQueryを使用するのでした。
誤報をお詫びいたします。

too_bad · Answer

>>1
>>2
あのページにFLASHを使っている場面は一つもないのですが・・・
トップのスライドはprototype.jsというJavascriptを使用した
スライドメニューです。
よって、FLASH技術は一切必要ありません。
トップ画像のVegNewsという名前については、背景色を透明にしたGIF画像を、
floatで浮かせて絶対パスでずらしてるだけですし、
メニュー部分については、ソースを見てないので定かではないのですが、
横一列すべてを1枚絵で作り、背景指定してその上に文字を書き、
areaタグで複数のリンク先に変更しているだけだと思います。
VegNewsDaialyについてはJavascriptで出来るタブ形式の切り替えですが、
何のJavascriptを使用していたか忘れました。
基本はtableデザインだと思いますが、やはりソースを確認していないので
定かではありません。
ただ一つ言えることは、HTMLとCSSを理解していないと作れないサイトである
と言う一点に尽きます。

noname#163561 · Answer

Dreamweaverで作る予定ですか？

CSとか、Studioなら、必要なソフトみんなセットで入っていると思いますが、個々で揃えるなら、最低限、DreamweaverとPhotoshopは必要でしょう。
イラスト関係も入れるなら、Illustraterとか。
その他に、アルバムのフラッシュのカスタマイズデータとか、使っているんじゃないかな？
自分で作るなら、Flashが必要になるし、カスタマイズされたデータを使うなら著作権フリーのものをダウンロードするとか。。。

たぶん、説明してもらっても、実現出来るかどうか、は目安として、
希望のサイトを見て、ご自身で何のソフトがどこに使われているのか、どうカスタマイズされているのか、など、自分の力で分析してやり方が探れる、本などで研究するのに何を買えばいいか、がまず出来ること。
こうしたコミュで、1つ1つ1から文章で習って作るのは、難しいかも知れません。

そこまでの親切指導してくださる回答者がいれば別ですが、必要なら、スクールとか、本を買われて研究した方が良いかもです。
お仕事にしている人などは　そういう技術を、ただでは教えたりしないものなので....。

そういう親切な方を求めているなら、ソフトウェアメーカーなどのコミュニティデ相談した方が良いかもしれません。

atamagawarui5 · Answer

W3CのHTML4で作ったページ見たいなので、初心者でもHTMLの本と、そのページのソース見ながら、何やっているか比較してみれば根性さえ有れば、現実出来ますけど。

別に特別なソフトもFLASHぐらいです。
Flash使わないでも、JavaScriptあたり勉強すれば限りなく近い物が作れると思います。
写真とか絵は自分で描くか、写真撮るかして作れば時間とやる気さえ有れば出きるのでは無いですか？

頑張って見てください。

このようなサイトを作りたいのですが

もちろん可能です。

この回答への補足

＞HTML4.01 transitionalは使うべきでないとされているとのことですが、一番使うべきHTML形式は、現在何でしょうか？

No.6です。

この回答への補足

全く同じ物を作りたいんだったら、そのページを保存してDreamweaverで開いて書き換えればいいだけですが？

>>3です。

>>1

この回答への補足

Dreamweaverで作る予定ですか？

W3CのHTML4で作ったページ見たいなので、初心者でもHTMLの本と、そのページのソース見ながら、何やっているか比較してみれば根性さえ有れば、現実出来ますけど。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　もちろん可能です。

　No.6です。