- ベストアンサー
ウェブサイトの作成方法について
このようなサイトを作ってみたいと考えています。 http://lavistanz.co.nz/ 私のスキルレベルはさておいて(本当はさておいてはいけないのは重々承知しています)、動画、写真加工、ギャラリーの写真の表示方法など、こういうサイトを作るにはどのような方法(ソフト)があるのか教えてください。 どうぞよろしくお願いいたします。
- yumi2007
- お礼率93% (278/298)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
一見したところ、特別なオーサリングツールは使われていないようです。 テキストエディタ(メモ帳の高機能な物)だけじゃないかと・・ 非常にシンプルな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 )が良いでしょう。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>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; } >こういうサイトを作るにはどのような方法(ソフト)があるの?? スタイルシートを身につけること。さすがにツールはありません。 初心に帰って、仕様書を読破すること。
お礼
本当に最後まできちんとお答えいただきまして、ありがとうございました。 頑張って勉強します!
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>このレベルのサイトを半年間で作りたいと思っているので、頑張って勉強したいと思っています。 そのサイトの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で縦×横をどんなサイズに設定すればよいか、、、などサイズはどの様に測ったらいいかご存知でしょうか。 例えば写真の大きさなど、いつも適当に作成していて、みなさんはどうやってサイズを決めていらっしゃるのかと思っていたもので。。。 横にそれて申し訳ありません。。。
関連するQ&A
- ウェブサイト制作について
今回、シンプルでお洒落な写真展示サイトを作りたいと思っているのですが、 根本的にどうすればいいのか全く検討がつかないので教えてください… http://www.keatleyphoto.com まさにこういう、一覧で表示されて、クリックして閲覧するようにしたいのですが Flashの知識がないとできないのでしょうか… まだ、無料のFlashフォトギャラリー等で似たものがありましたらぜひ教えて頂きたいです カテゴリがわからずに適当なものを選択してしまいました、すみません。
- 締切済み
- その他(インターネット接続・通信)
- ウェブサイト内の動きのある写真の作成及び埋め込み方
下記URLのサイト内に一部動きのある写真?動画?(女性がジュースを飲んだり、水をすくったり)があります。この写真?動画?の作成方法及びサイト内の埋め込み方法をお伺いしたいです。 http://www.urban-research.jp/special/snap_plus/ Flashで作成しているわけでもなく、GIFアニメーションで作成しているわけでもなさそうな この上記の画像はいったいどのようにして作成されているのでしょうか。 javascriptですか? 最近見かけるので、気になりました。 javascriptだと思ったので、カテゴリーをjavascriptにしましたが、 違ったらごめんなさい。 だれかご存知の方、ご教示いただけますと幸いです。 何卒宜しくお願いいたします。
- ベストアンサー
- JavaScript
- photoshopの加工について
photoshopの加工について質問です。 端がかすれたようなデザインをしたいのですが、やり方 がわかりません。分かる方いましたら教えてください。 photoshop以外のillustratorかfireworksでも可です。 スキャンは機械がないので、それ以外の方法で お願いします。 下記のサイトのような加工です。 http://www.hhband.com/ http://www.soulpurpose.co.nz/
- 締切済み
- ホームページ作成ソフト
- 写真のような横長い画像の作成方法
ホームーページの上部などに 横長い画像をよく見かけます。 その横長い写真のような画像の作成方法についてです。 説明がしずらいのですが、イメージしている画像が乗せてあった URLを記載させて頂きます。 http://www.civil.jp/ ←(背景が本当にデジカメなどで撮ったようなも空の写真で、しかも、それが横長い画像になっている) http://www.softkaihatsu.co.jp/ ←キーボードがうっすら入ったような写真が入ってあり、その上からいろんな加工をしているもの。 実際に写真をとって、横長くソフトで加工しているんでしょうか? それとも撮ったカメラがパノラマが作成できる写真なのでしょうか? こういうパノラマっぽい写真の横長画像の素材の作成サイトが 乗ってあるものがあればどこかいいサイトを教えていただけないでしょうか? よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 動画作成
カメラで撮影した動画や写真、タイトルロゴやエンドロール、文字などを色々組み合わせて短編映画を作りたいのですが、いいフリーソフトはないですか? 文字は「http://www.flash.co3.jp/page/f1.html」このサイトみたいなことが出来ることが原則としてのお願いです。
- 締切済み
- フリーウェア・フリーソフト
- 英語の詳しい方教えてください。
ニュージーランドにて一人暮らしのできる住まいを探しているのですが物件サイトが英語のため本当に一人暮らしができる部屋なのか分かりません。 http://www.trademe.co.nz/propertyこのサイトです。私の聞いた所によるとこのサイトは一人暮らし用の住宅専用のサイトらしいのですが本当なのでしょうか?http://www.trademe.co.nz/Browse/CategoryAttributeSearchResults.aspx?search=1&cid=5748&sidebar=1&rptpath=0350-5748-4233-&132=FLAT&134=1&135=&153=&29=&122=0&122=0&59=0&59=25000&178=0&178=0&sidebarSearch_keypresses=0&sidebarSearch_suggested=0たとえば私が検索したこのページは全て一人暮らしが出来る物件なのでしょうか?面倒な質問ですがよろしくお願いします。
- ベストアンサー
- その他(生活・暮らし)
- 写真(静止画)などをFlash動画にする方法
撮った写真を動画のようなFlash(ストーリー調)にしたいんですが、やり方が分かりません。 そういうFlash動画を作れるフリーソフトはないでしょうか? 下のサイトのギャラリーにあるFlash動画みたいにしたいのですが…!! やはり、ソフトは買わないといけないのでしょうか? 教えてください! ●参考(?)サイト● http://pbh.kill.jp/index2.html
- 締切済み
- Flash
- ウェブサイトで作る作品ギャラリー
以下のサイトのようなギャラリー(作品集)を作りたいと思っています。 同一サイトの上にスクリーンがひろがり、周りが黒く暗転する感じです。 しかしながら作り方がわからず、教えて頂きたく質問致しました。 当方はドリームウィーバーを導入したばかりで細かい操作方法は まだまだ未熟ではありますがご指導頂けると幸いです。 どうぞ、よろしくお願い致します。 参考URL http://www.portrait-photo.jp/gallery/mika/mika.html
- ベストアンサー
- デザイナー・クリエイティブ職
- ウェブサイト作成について
動的なページと静的なページってありますよね?今のところ静的なページは作ることができたのでしたが,動的なページの作り方を教えていただきたいです. 今自分が作ろうとしているサイトは,自分が趣味で作ったものなどを公開するサイトで,なにか出来たたびにサイトを更新しようと思っています.毎回htmlファイルを書き換えてアップロードするのはしんどいと思い,ファイルをアップロードするだけでそれを認識して適切に表示してくれるような動的なページを作ろうとしています. 少し調べたところ,MySQLとphpの組み合わせでできるのではないかと思ったのですが(もちろん現時点ではどちらもさっぱりです),それ以外にもっと簡単にできる方法があれば教えてください.また,何かヒントになる情報があればください.お願いします. ファイル検索システムなどを作ろうとしているのではなく,それぞれのファイルを階層的(?)に自動的に並べるようなものを作りたいと思っています. <イメージ> ・絵(階層1) ・ドラクエ(階層2) ・ドラクエ3(階層3) ・ゾーマの絵へのリンク ・バラモスの絵へのリンク ・ドラクエ5 ・FF ・FF1 ・小説 ... といった感じです.(わかりにくくてすいません)上のイメージの階層というのは,それぞれhtmlで別のページというわけではなく,同じページの中であり,階層1がH1タグで書かれて,階層2がH2タグで書かれて,という感じです. できれば階層上になっているフォルダ(絵/ドラクエ/ドラクエ3/ゾーマ.jpg とか)に入れるだけでサイト上に表示できたりすると楽なのですが可能でしょうか.それとも全ての絵を同じフォルダに入れて,それとは別にデータベースを作成してそこで各ファイルにタグをつけて管理するほうがいいのでしょうか. 正しい知識がないため見当はずれなことを書いて質問しているとは思いますが,わかる方がいましたらアドバイスください.
- ベストアンサー
- その他(インターネット・Webサービス)
- WindowsLiveフォトギャラリーとピクチャ
デジカメやメール写真の保存時WindowsLiveフォトギャラリーで名前を付けて保存と 何気に名前を付けて保存をした時 保存をしたファイルを開く時花の様なマークで表示される場合 と写真そのものが表示される のが有ります。 写真で表示させたいのですがダウンロードさせる時の方法が違う様な気がします。 又WindowsLiveフォトギャラリーでは加工がすぐに出来ないようで デジカメやメールで来たものを画像表示で保存させる場合の選択方法をお願いいたします。 どこを、どうしたら、こうなった の 流れがいまいち学習能力が無いためか良くわかりません よろしく順序立ててお願いいたします。
- 締切済み
- Windows 7
お礼
ご丁寧なお返事ありがとうございます。 実は私は今までメモ帳でチョコチョコと書いてサイトを作っていたので、それは本来のやり方ではないのではないか、、、と思っていたので、とても嬉しかったです。 勉強中なので恥をしのんでお聞きしますが、jqueryは未だ使ったことがありません。どのように取りかかれば(勉強すれば)よいか教えていただけますか。 併せて教えてくださったshadowbox系のアドオンも勉強したいと思っています。 高機能なテキストエディタはたくさんあるようですが、お勧めがあれば教えていただけますでしょうか。 (色々聞いてスミマセン、、、) このレベルのサイトを半年間で作りたいと思っているので、頑張って勉強したいと思っています。 どうぞよろしくお願いいたします。