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

質問

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

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

回答No.6

ORUKA1951 · ベストアンサー

もちろん可能です。
　そのサイトが、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をキーワードで作成されたソースをテンプレートに流し込んでいるだけです。

補足

丁寧なご回答ありがとうございます。オーサリングツールを使っていないというのは、例えばDreamweaverなどは使わず、htmlコードをべた打ちしていっているということですね？ウェブデザイナーの方はやはり知識があるのでその方がやりやすいのでしょうか。私はhtmlの超基本的なタグを覚えるのでも精一杯なので、自ら打っていくなんてことは到底できそうにないです。

1については、なんとなく私の頭でもおっしゃってることが理解できたような気がします。デザインの要素はスタイルシートとjavascriptでコントロールされていて、htmlは内容の部分ということですね？リンクどうもありがとうございます。

2なのですが、動的にコンテンツを作り出すというのはどういう意味でしょうか？Strutsというのは初めて聞きました。

このサイトで記事を書いている人は、おそらく雑誌の編集者的な人なので、多分なにか簡単に記事を作成してアップする仕組みがあるはずなのではないかと思うのですが、このサイトのニュース記事投稿などは、CMSを使っているのでしょうか？そのあたりのつながりがいまいち想像できないので、教えていただけるとありがたいです。

回答No.8

ORUKA1951

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

　目的によって色々でしょう。
★HTML&CSSの勉強方法について - HTML - 教えて！goo ( http://okwave.jp/qa/q7673765.html )
★HTMLとCSSのお勧めの本を教えてください - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7670050.html )
★今から本格的にHTML勉強するなら - HTML - 教えて！goo ( http://okwave.jp/qa/q7656262.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 )』
で、なんとか

　動的なページ作成は、ページ数が増えるまで待っても良いと思います。

お礼

ありがとうございます。

回答No.7

ORUKA1951

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)に分解し、タグでそれがその文書のどのような構成要素であるかをマークアップするものに過ぎません。デザインとは一切関係ありません。

　デザイン/プレゼンテーション=表現は、スタイルシートで指定していきます。<H1>で括られていたら太字で大きく表示され、読み上げソフトでは大きな声で読み上げられるのは、ブラウザが持っているスタイルシートによるものです。

　このことを理解して、数十個のタグでマークアップしていけば、そんなに苦労しなくてもHTMLはかけるでしょう。プログラム手に頼らなくても作成できるように作られたものですからね。そもそも、文書を読み解き内容を理解して、要素に分解して最適なタグで括るなんて作業が機械にできるはずがありません。---何億もする人工知能--スーパーコンピューターなら可能かもしれませんが、たかだか十数万円のプログラムじゃ無理でしょう。
　やはり、HTMLを知った人の手助けが必要です。--オーサリングツールに頼ったら、こんなサイトはできると思わないでください。HTMLを理解したうえに、ツールのマニュアル--仕様書の十数倍ある---の二つを理解しなけりゃなりません。
・・・・・覚えてしまえば、手打ちのほうが楽なのです。手打ちができなければツールも使いこなさない。

　このサイトのデザイン自体は、決して難しいものではありません。JQueryはどこからか拾ってくれば良いです。スタイルシートは、ツールでは無理です。(対応していると説明してあっても、それは利用できるという意味だけです。)
　たとえば本文中<div class="section">中の、段落中のリンクの色は緑にしよう・・なんて、手書なら、div.section p a:link{color:green;}と書けばよいのですが、ツールはそんなこと出来ません。あなたが指定するしかありません。

　デザインは、そこまでにしてプログラムですが、個人サイトではそこまでしなくても・・
そのサイトは、一種のCMSと考えてよいのですが・・・SSIで十分対処できるでしょう。また、掲示板の出力を一記事ずつしてテンプレートに入れても良いですし・・

★CSSを使って定型文を挿入できますか？ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7662666.html )
　画面の大部分は、定型分ですからね。

補足

早速のご回答、大変ありがとうございます。一語一句、慎重に読みました。こんな私でも大体書かれていることが理解できました。親切にわかりやすく書いてくださり、ありがとうございます。

HTML4.01 transitionalは使うべきでないとされているとのことですが、一番使うべきHTML形式は、現在何でしょうか？タグが80種類と聞いて、少しだけ希望がわいてきました！私みたいなのでも、意思さえあれば、覚えられるということですね！将来を見据えて少しずつその勉強もしていきたいと思います。

ところで、オーサリングツールに頼ったらこんなサイトはできない...とありましたが（CSSを書くにも人が書かないといけないという点も含め）、Dreamweaverのようなソフトは、どこに需要があるのでしょうか？初心者ですか、それともプロの方も使うのでしょうか？

JQueryやSSIについても、知識がないので少し調べてみたいと思います。

質問にあったWordPressについてはどなたも触れてくださらなかったのですが、思い切り素人の感覚で聞かせていただいてもよろしいですか？質問にあるサイトと全く同じもの..というよりも、同じような要素（まず上にヘッダーがあって、その下にスライドメニューがあって、その下に記事などのコンテンツを例えば3コラムにわけて表示して、さらに記事に対するコメント機能もあり（誰でもコメントできる）最新コメント5件の最初の3行などがトップページの当該記事の横に表示されたりして、あとは一番下にフッターといいますか、サイトマップ的なコンテンツの一覧があり...といったもの）を実現したと思っており、例えばこんなWordPressサイトをみつけました。　http://www.lawebshop.ca/　　（このサイトはコメント関係がありませんが）。　こういった要素でも良いんです。その場合は、Wordpressをダウンロードして、加工するなどしたほうが、よりはやくできあがりますでしょうか？　アドバイスをいただけると助かります。

回答No.5

e_16

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>VegNews Magazine | Vegan Recipes, Food, News, Travel, Health, Blogs, TV, Jobs, Events</title>
<link href="http://vegnews.com/web/rss.do" title="VegNews RSS Feed" type="application/rss+xml" rel="alternate"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" rev="stylesheet" type="text/css" href="/web/css/styles.css" />
<link rel="stylesheet" rev="stylesheet" type="text/css" href="/web/css/twiigs.css" />
<style type="text/css">
<!--
div.TWIIGSPOLL { width: 175px; }
-->
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/web/js/infinitecarousel3/jquery.infinitecarousel3.min.js"></script>
<script type="text/javascript" src="/web/js/global.js"></script>
<script type="text/javascript">
$(function(){

$("ul#slideShow").infiniteCarousel({
imagePath: "/web/js/infinitecarousel3/images/",
transitionSpeed: 500,
displayTime: 6000,
displayProgressRing: false,
thumbnailType: "buttons",
internalThumbnails: true,
showControls: false,
autoHideCaptions: true,
autoPilot: true,
customClass: "header_carousel"
});
});
</script>

<meta name="keywords" content="vegan, vegetarian, vegan magazine, vegetarian magazine, vegan news, vegetarian news, vegan travel, vegetarian travel, delicious vegetarian recipes, delicious vegan recipes, easy vegetarian meals, easy vegan meals, vegetarian food, vegan food, healthy vegetarian, healthy vegan, healthy vegetarian meals, healthy vegan meals, vegan blogs, vegetarian blogs, green living, eco-friendly, conscious media, vegan events, vegetarian events, vegan jobs, vegetarian jobs, vegetarian shopping, vegan shopping, environmentalism, environment, natural beauty, organic beauty, health & beauty, organic living, vegetarian cooking, vegan cooking, raw cooking, natural living, organic products, eco-living, earth friendly, animal rights, animal welfare, recycle, recycled paper, planet, earth, 30 minute meals, one pot recipes, lacto vegetarian, low fat vegetarian meals, low fat vegan meals, organic vegetarian, recipe thai vegetarian, restaurants vegetarian san francisco, restaurants vegan san francisco, restaurants vegetarian new york city, restaurants vegan new york city, thai vegetarian recipes, thai vegan recipes, tofu vegetarian recipes, tofu vegan recipes, vegetarian cajun recipes, vegan cake, vegetarian cake, vegan cheese, vegetarian cheese, vegetarian chili recipe, vegetarian chondroitin, vegan chondroitin, vegetarian clothing, vegan clothing, vegetarian cooking, vegetarian cooking magazine, vegan cooking magazine, vegetarian dates, vegan celebrity, vegetarian celebrity">
<meta name="description" content="VegNews is an award-winning vegan magazine and website packed with recipes, travel, news, food, reviews, and so much more.">
<meta name="verify-v1" content="JdlBrKCAOx0VSbGm+JJJgVC1lI222VZREyeY68aY3t4=" />
</head>
<body>
<div class="home" style="background-color: #FFF;width:961px;height:auto;min-height:2250px;margin:0 auto;padding:0;position:relative;">
<div id="headercont">
<div id="header">
<img src="/web/images/logo.png" width="411" height="109" alt="VegNews" class="logo" />
<span class="tagline"><b>Vegan.</b> Think. Eat. Thrive.™</span>
</div>

<ul id="slideShow">
<li>
<img src="http://vegnews.com/web/uploads/asset/4460/file/VegNews.Peaches2.jpg" width="921" height="366" alt=""/>
<p>Ripe, juicy, easy peach crisp <a href="http://vegnews.com/articles/page.do?pageId=837&catId=10">Read on &gt;&gt;</a></p>
</li>
<li>
<img src="http://vegnews.c

お礼

ご回答ありがとうございます。このコードは、これが重要ということでしょうか？理解力がなくてすみません...

回答No.4

too_bad

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

お礼

正直、jQueryと聞いても　？？？　です...。　javascriptの一種なのでしょうか。もっと勉強しないとですね.. 誤報なんてとんでもないです、わざわざ書いてくださりありがとうございます。

回答No.3

too_bad

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

補足

iphoneで問題なく表示できるということはフラッシュじゃないと思っていたので少し混乱していました。クリアにしてくださりありがとうございます。使ってなくてよかった... ですがHTMLとCSSとJavascriptの理解ですね... とほほ...

回答No.2

noname#163561

Dreamweaverで作る予定ですか？

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

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

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

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

お礼

DreamweaverとPhotoshopとIllustratorは持ってます！かじる程度しか出来ませんが...。もうすでに皆さんとても親切に回答してくださっているので、ひとつひとつ教えてもらおうなんてとんでもないです... ありがとうございます。

回答No.1

atamagawarui5

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

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

頑張って見てください。

お礼

HTML4... 4?その時点でもうついていけません（泣）時間とやる気さえあれば、ですね。励ましのお言葉ありがとうございます。