ウェブサイトの作成方法について

質問

このようなサイトを作ってみたいと考えています。

http://lavistanz.co.nz/

私のスキルレベルはさておいて（本当はさておいてはいけないのは重々承知しています）、動画、写真加工、ギャラリーの写真の表示方法など、こういうサイトを作るにはどのような方法（ソフト）があるのか教えてください。

どうぞよろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

一見したところ、特別なオーサリングツールは使われていないようです。
テキストエディタ(メモ帳の高機能な物)だけじゃないかと・・
　非常にシンプルなHTMLになっています。

　ただし、素材はプロの写真家に依頼した自前でしょうかね。
　アルバムは、jquery(javascript)を利用しています。それにshadowbox系のアドオンを追加していますね。
　⇒Shadowbox.js( http://www.shadowbox-js.com/ )

＞（本当はさておいてはいけないのは重々承知しています）
　そんなことありません。
　画像や文章の内容は流用は出来ません。デザインについても、そんな特殊な物じゃないですから、アイデアを拝借する分には問題ないでしょう。jqueryや付随するboxshadow.jsも自由に使えます。

＞こういうサイトを作るにはどのような方法（ソフト）があるのか教えてください。
　基本的にメモ帳ひとつで出来ますが、いくらなんでも機能が貧弱なので高機能なテキストエディタ( 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.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )が良いでしょう。

お礼

ご丁寧なお返事ありがとうございます。
実は私は今までメモ帳でチョコチョコと書いてサイトを作っていたので、それは本来のやり方ではないのではないか、、、と思っていたので、とても嬉しかったです。

勉強中なので恥をしのんでお聞きしますが、jqueryは未だ使ったことがありません。どのように取りかかれば（勉強すれば）よいか教えていただけますか。
併せて教えてくださったshadowbox系のアドオンも勉強したいと思っています。

高機能なテキストエディタはたくさんあるようですが、お勧めがあれば教えていただけますでしょうか。
（色々聞いてスミマセン、、、）

このレベルのサイトを半年間で作りたいと思っているので、頑張って勉強したいと思っています。
どうぞよろしくお願いいたします。

回答No.3

ORUKA1951

＞CSSで縦×横をどんなサイズに設定すればよいか
　最近の主流は、背景に関しては一部しか表示されなくてもすむようにして、コンテンツの表示サイズを%、min-widthとmax-widthで指定しておいて、max-widthにあわせます。
　また、内容的にfigure(挿絵)的な画像やそれ自体が目的の画像は当然固定することが多いのですが、その場合も伸縮させる必要があるときは、最大サイズに合わせます。印刷が想定されるページは、解像度を数倍にしています。

div.section{
　width:80%;min-width:620px;max-width:980px;
　margin:0 auto;
　background:url() 50% 50%;
　background-size:cover;/* CSS3 */
　position:relative;
}
div.section div.figure{
width:20%;
position:relative;
float:left;
}
div.figure img{
display:block;
width:90%;height:auto;
margin:5px auto;
}
＞こういうサイトを作るにはどのような方法（ソフト）があるの？？
　スタイルシートを身につけること。さすがにツールはありません。

　初心に帰って、仕様書を読破すること。

お礼

本当に最後まできちんとお答えいただきまして、ありがとうございました。

頑張って勉強します！

回答No.2

ORUKA1951

＞このレベルのサイトを半年間で作りたいと思っているので、頑張って勉強したいと思っています。
　そのサイトのHTMLソースをご覧になると分かるように、極めてシンプルですよね。まさに、『HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的であることから、・・・( 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.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )』を地で行っています。スタイルシートをはずしたり、Lynxで見ると添付のようになります。DoctypeはXHYML1.0 strict でね。
　ポイントは2点
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
・XHTML1.0 strictであること=HTML4.01strictでもよい!!
・class名などは、「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」にのみ使われていること
　・・・idやclass名は、HTML5の「新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」とほぼ同じような物が使われていることからも、DIVがデザインではなく、文書構造を示すために使われていることが分かるでしょう。

　strictでしたら、覚えることはとても少ないですね。
『HTML文書を作る場合には、・・・【中略】・・・strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

　その後、スタイルシートでデザインしてあります。スタイルシートもCSS2.1の範囲内ですから、高度なものは何も使われていません。jqueryと言ってもあくまで補助的に使われていて、javascriptが利かない、無効にしているブラウザでも使用に支障はありません。(javascriptで重要な動作はさせていない)
　『JavaScript、Cookie・・Flash などの特殊な機能が使用されているために・・・【中略】・・・検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』

【この様なサイトを作るためには】
・仕様書特にHTML4.01( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )を読んで理解すること
　なお、「HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff)」を読んでHTML4.01で不足している部分を理解しておくこと
・スタイルシートも仕様書を読んで身につけること
　REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
　　残念ながら現行のCSS2.1のよい邦訳は知りません。
　Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
　特に見落としがちな「セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )」「値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )」は確実に身につけること

★技術的な要素はこれだけでしょう。より重要な
　★デザインのセンス　天性のものもありますが、要は色々なサイトを見て歩くことですね。

1) strictで、率直なHTMLを書くこと
2) それには手を加えないで、スタイルシートで様々にデザインできる力をつけること
3) 色々なデザインのサイトを見て回り、それを(2)で実現できるよう実力をつけること。
　　ソースは写しません。デザインを自力で真似ることが出来ること

[例]
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　このページは、ひとつのHTMLに対して様々なスタイルシートが用意されています。
　ブラウザの[表示(Alt+V)]→[スタイル(シート)]から選択!!
　　　※Chromeにはこの機能がありません!!

＞高機能なテキストエディタはたくさんあるようですが、
　私は、EmEditor( http://jp.emeditor.com/#top )ですが、秀丸エディタやTeraPadも人気の高いテキストエディタです。

お礼

本当にありがとうございます。
全てわかりました！とは、言えませんが、おっしゃっていることは十分伝わってきました。
頑張って勉強したいと思います。

・・・ところで、あまりに細かいことで申し訳ないのですが、私が提示させていただいたサイトのようにブラウザいっぱいにサイトを作成するためには、CSSで縦×横をどんなサイズに設定すればよいか、、、などサイズはどの様に測ったらいいかご存知でしょうか。
例えば写真の大きさなど、いつも適当に作成していて、みなさんはどうやってサイズを決めていらっしゃるのかと思っていたもので。。。
横にそれて申し訳ありません。。。