- ベストアンサー
HP作成について
- HP作成に興味があり、受験がひと段落し作業に取り掛かっている者です。
- テンプレート等に頼らず手打ちでHPを作ろうとしていますが、いくつかの問題にぶち当たりました。
- 具体的な問題として、テキストエディタやFC2内のプレビューと実際のHPの表示が異なることや、外部CSSの装飾がプレビューで反映されないこと、ファイルのアップロードが即座にHPに反映されないことがあります。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
やはり皆さんが言われるように基本から学ばれるほうが良いと思います。 まず、hpじゃありません。hpはヒューレッドパッカードですよ。HPもまずい。 ⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) HTML,CSSも大文字です。これらはabbreviated form(頭文字)ですから・・受験だと減点ないし× まずテキストエディタで始められる事は、とてもよいことだと思います。もともとHTMLはそのようにつくられていますからね。 それは、HTMLは文書をそれを構成するパーツ--要素に分解し、それぞれの要素(Element)をタグを使ってマークアップするのですから、最初の文書の内容を読み、理解してそれが、その文書全体や、それが含まれる集団にとってどのような要素であるかを判断しマークアップしていく作業は人でないと、けっして出来ません。 ＞ｈｔｍｌやｃｓｓのマニュアルやｈｐを見て勉強はしていてどういうものかは一応わかっている ここが出来ていないのだと思います。 まず、学ばれたと思っていることをすべて忘れて ⇒はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) を全部、そのまま復習してください。 とても古いページですが、HTML4.01仕様書の邦訳( HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )メンバーの代表ですから、正確に仕様書を理解されたうえでのマニュアルです。 当時は、まだスタイルシートが未完成の時代で今の時代には合わない部分がありますが、とっても参考になるでしょう。 この時点で一切のclass名は次のようにつける。もしくはつけない、idはページ内リンクのターゲットのみに抑えておきましょう。重要なことはデザインのためにHTMLを書かないことです。HTMLは文書構造しか書かない!! 私は３種類程度を練習に薦めています。 1) 比較的長文で挿絵などがあちこちに入る文書 2) アルバムのように、画像とその説明(caption)のリストからなる文書 3) サイトのトップやサイトマップのようにナビゲーションメニューが主体の文書 <html> <head> </head> <body> </body> </html> は、皆同じですが 1) header/footer共通 <body> <div class="header"></header> <div class="section"> <h2>見出し</h2> <div class="section"> <h3>見出し</h3> <p></p> <div class="figure"><img src="" width="" height="" alt=""></div> </div> <div class="section"></div> <div class="section"></div> </div> <div class="footer"></div> 2) <div class="section"> <h2>見出し</h2> <div class="section"> <h3>見出し</h3> <ol> <li>タイトル <ol> <li><img src="" width="" height="" alt=""></li> <li>説明</li> <li>説明</li> </ol> </li> <li>タイトル <ol> <li><img src="" width="" height="" alt=""></li> <li>説明</li> <li>説明</li> </ol> </li> </ol> </div> </div> 3) <div class="section"> <h2>見出し</h2> <div class="nav"> <h3>見出し</h3> <ol> <li><a href=""></a></li> <li><a href=""></a> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </li> <li><a href=""></a> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </li> </ol> </div> </div> その上でスタイルシートでデザインしていく練習をするのですが、その前に、HTMLが正しく出来ているかを ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) などで必ずチェックします。なぜなら 『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』 あとは文書構造にしたがってデザインして行きますが、そのとき利用するのはセレクタやカスケーディングと言うCSSの最大の利点でもあり特徴でもある機能です。 [例] div.section div.section{font-size:0.9em;} とすると、２階層目以降は段階的に文字が小さくなりますが div.section div.section div.section div.section{font-size:100%;} で４階層目以降は字が小さくなりません。 ★参考書はほとんど役に立たないでしょう。とても進歩のめまぐるしい世界で本が出た頃には陳腐化してしまっている。 ★様々な仕様書が邦訳されて公開されています。まずそれを読みましょう。 必要なことは、そこに書いてある。それを知らない人が書いているとしか思えない本が多すぎます。 どの本がよいかの判断が身についた頃には本は要らない 1)あなたの表示のトラブル原因は、たぶん文法ミスがあることでしょう。
その他の回答 (4)
- 澁谷 聡美（@roseheart）
- ベストアンサー率45% (15/33)
Webデザイナーでない限りは、素敵なホームページを作るのは、 困難ですよ。 無料のテンプレートでは、テンプレートパーティを おすすめします。 flash技術が、なくてもスライドショーにも 出来るのが、javascriptこれは、触れませんが、 HTMLとCSSでとても素晴らしいホームページが、 出来ます。 どうしても自力で作成したいのでしたら、 無料のトレタマやドットインストールで教わって下さい。 質問は、出来ませんのでわからないことが、 あれば私が、こちらのコーナーで教えます。
- 参考URL：
- http://dotinstall.com/
お礼
ご回答ありがとうございます。 今までの作業状況と、皆様のご回答で素敵なサイトをつくる難しさを痛感しております。 で、ど素人の私が一から作るのはとても困難ということでシンプルなテンプレートを使わせていただき、それをがんばってアレンジしていこうと思います。 やはりそれでも難しい…けどまずそうして頑張ろうと思います。 またわかんないことが…出てしまうと思いますが、 お暇がありましたら答えていただけると幸いです。
- Palswet
- ベストアンサー率35% (24/68)
私も独学でホームページを作成しました。 参考にしたのは、図書館でホームページの作り方が記載してある本を数冊借りて読んだこと。 HTML、CSSのリファレンスの本を購入。（テキスト作成なら必須） 参考書やリファレンスの記述を参考にメモ帳でローカルフォルダにHTMLファイルを作成。 作成したHTMLファイルをダブルクリックすればブラウザで表示されます。 思ったように表示されなければ、どこか記述が違っているので修正します。 ブラウザで表示が修正されていないときは、キャッシュが表示されていることがあるので 修正後は、再読み込みをしたほうが間違いがないです。 思った表示になるまでこれを繰り返します。 思い通りのものが作成できたら、レンタルサーバにアップロードします。 アップロード先をブラウザで確認して問題がなければ完成です。
お礼
ご回答ありがとうございます。 ホームページ制作は地道な作業の賜物ですね。 リファレンスの本か…確かに必須そうですね。 こつこつと頑張ります。
- hirama_24
- ベストアンサー率18% (448/2473)
１．間違ってるんでしょう ２．手打ちだから気にしない ３．反映されますよ、あなたのPCに反映されるかは別です。 手打ち（手打ちと言いながらサイトのエディタを使ってるし(^_^;）HP製作のマニュアル本がありますから、まずそれを読みましょう
お礼
ご回答ありがとうございます。 メモ帳という方法もありましたがエディタを使ったほうが良いとのことなので…(;´∀｀) なんとか勉強しながら頑張りたいと思います。
- naokita
- ベストアンサー率57% (1008/1745)
＞テンプレート等に頼らず手打ちで作ろうとしているですが… Ａ、 それは手打ちとはいわん・・・WYSIWYG方式、勉強にもなりませんよｗ 手打ちってのは、そんなプレビュー画面なんて利用しません。 プレビュー画面は、簡易画面＝素人さん用ですから・・・ ウェブ制作を勉強する気なら、 本格的なテキストエディタで上書きしながらブラウザで表示させます。 上書き保存したら、F5キーで更新しなきゃ
お礼
ご回答ありがとうございます。 そうですね…プレビュー画面をあてにしちゃがめですよね。 今はブラウザで表示させながらやってます。 こっちのがいいですね。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 何事も基本が大事、受験でも身に染みて感じたことです。 わかっていたつもりでしたがやはりウェブサイトづくりは大変ですね。 初心者なりに頑張ってみようと思います。 URLもありがとうございます。参考になります<(_ _)>