ＨＰ作成を独学で学びたいがまずやるべきことは？

質問

ＨＰ作成の基礎知識を身に着けたいと思っています。
プロになるためではなく、自営の会社のＨＰメンテナンス等が主な目的です。
業者さんに作ってもらったＨＰがあるのですが、簡単なメンテナンス等を自分でやりたいのです。
少し変更したいなと思っても、「勝手に変更するとレイアウトなどが崩れますよ」と言われると
何もできません・・・・。

画像も外注でその都度作ってもらっています。これもまた自分では限界があります。

これらのことを少しづつで構わないので、自力でできるようになりたいというのが最大の目的です。
ＨＴＭＬ、ＣＳＳ、イラストレーターやフォトショップなどなど学ばないといけないことは
たくさんあると思うのですが、どういう順で学んでいけばいいでしょうか？
質問がわかりにくくて申し訳ありません。

画像加工が先？ＨＴＭＬなどを先にやったほうがいいでしょうか？
わかりにくい質問で申し訳ありません。

通信講座なども考えましたが、高額でちょっと手が出ません。

ＷＥＢクリエーター講座などは上記の内容を網羅しているようですが、
どういった形で進んでいくのでしょうか？

あと、独学で学ぶ場合、おすすめの書籍などありましたらアドバイスをお願いいたします。

回答No.9

kaisinjuku04 · ベストアンサー

「ＨＰ作成の基礎知識を身に着けたい」ということであれば、まずは会社のサイトをいじるのではなく、自分のサイトを作ってみることをお勧めします。その中で得たノウハウが、きっと後々役立つでしょう。

作成ソフト頼りになると、基礎知識が身に付きません。ここはぜひ、タグ打ちで挑戦しましょう。
とはいえ、すべてのタグやセレクタを覚えるなどと言うことは現実的でもなければ、必要もありません。

そこでおすすめなのが、「html5」と「css3」で検索しながら作成することです。
基本が身に付く作成ツールとしては、NetBeans(下記URL)がオススメです。
Web学習用途であれば、php版をダウンロードしておけばよいでしょう。

さて、画像ですが、トリミングと画質調整ができればよいのであれば、Photoscape(検索してください)をお勧めします。
GIMPやPhotoshop、IllustratorやInkscapeを使いこなそうと頑張るよりは、まずはWeb作りに専念するほうが良いと思います。
必要に応じて、より高度な処理ができるものを学習されればよいでしょう。

参考URL：

http://ja.netbeans.org/

回答No.8

maiko0318

業者さんに作ってもらったHP・・・変更していいか確認しましょう

業者さんがコピーを持っていて、変更依頼の都度、そのコピーを
変更してまとめて持ってくる可能性があります。

回答No.7

DrFell

【Ｑ】少し変更したいなと思っても、「勝手に変更するとレイアウトなどが崩れますよ」と言われると
　　　何もできません・・・・。
【Ａ】コピーをとってそれで練習すれば、崩れてもいいのでは？

【Ｑ】これらのことを少しづつで構わないので、自力でできるようになりたいというのが最大の目的です。
　　ＨＴＭＬ、ＣＳＳ、イラストレーターやフォトショップなどなど学ばないといけないことは
　　たくさんあると思うのですが、どういう順で学んでいけばいいでしょうか？
【Ａ】変更したい部分からどうぞ
ＨＴＭＬ☆文章を校正したい。見出しや本文を追加したいならここから
ＣＳＳ☆サイトデザインの変更。文字の大きさを変えたい、見出しを違う表現にしたいなど
イラストレーターやフォトショップ☆
画像を変更したいならここから。自営の会社のＨＰメンテナンスに、商品写真などがあり追加したいなどなら、photoshop。
ロゴを作りたい、キャラクターを作りたい、ボタンやアイコンを変更したいならill……。ボタンやアイコンはphotoshopでも可。

【Ｑ】通信講座なども考えましたが、高額でちょっとあ手が出ません。
　　あと、独学で学ぶ場合、おすすめの書籍などありましたらアドバイスをお願いいたします。
【Ａ】デザイナーを目指すわけではなく、事務所内更新を前提に提案します。お住まいの地域にもよるのですが、在職者訓練でサイトの作り方入門講座を実施している都道府県がかなりあります。訓練に掛かる費用は書籍代金程度（1000円）～で通信講座と比べても安価です。開講は夜が殆んどですので、お疲れかとは思いますが、入門として利用するのも手です。
【例】
長崎県
http://www.sasebo-tc.ac.jp/img/pdf/semina/H24homepage.pdf
神奈川県
http://www.pref.kanagawa.jp/cnt/f238/p3914.html
岩手県
http://www.iwate-it.ac.jp/seminar/noukai_itiran.html#design
愛知県
http://www.pref.aichi.jp/0000036895.html
京都府
http://www.pref.kyoto.jp/kyokgs/resources/1330934285861.pdf
……他

回答No.6

corokorocoro

>そもそも「勝手に変更するとレイアウトなどが崩れますよ」なもの普通は作りません。(^^)
何も知らない人がタグを消したりしてレイアウトを崩すなんてよくあること。

>在使用中のホームページの構文をまず手中に収めることです
>手中に収める方法はご自分で検討してください
>そのプログラム全文をプリントアウトして熟読します
>プログラムは行為の順番に記述されています
HTMLやCSSはプログラミング言語ではない。マークアップ言語。
だからプログラムとは言わない。

回答No.5

39jin

リバースエンジニアリングという言葉をご存知ですか
現在使用中のホームページの構文をまず手中に収めることです
手中に収める方法はご自分で検討してください
そのプログラム全文をプリントアウトして熟読します
プログラムは行為の順番に記述されています
この流れを理解します
プログラムを手中にして、目で見るために必要な用具類があります
エデイター、プリンター等々、必要になった順番に手に入れればよいでしょう
手に入れたプログラムを理解するために、躓いたときごとに、必要そうな書籍を選択すればよいでしょう
要は粘りです

回答No.4

鎌田 裕二（@yu2kama）

ホームページビルダーなど手軽なツールをまず市販の入門書で自習して、
その後は、実際の編集を試みながら、必要に応じて、入門書以上の使い方を覚えるのがいいと思います。
（そうでないと使うかわからない機能の数々を学習することになり、回り道だと思います。）
最初は思いがけない失敗をするでしょうから、誰かに教わりながらがいいと思います。

回答No.3

ORUKA1951

何も知らずに依頼すると大変ですよ。そもそも「勝手に変更するとレイアウトなどが崩れますよ」なもの普通は作りません。(^^)
　文章や記事を少々じゃなく書き換えたり加えたりしてレイアウトが崩れるようなものは作りません。内容の書き換えじゃなく、ユーザーが目が不自由でフォントを大きくしたらレイアウトが崩れてしまうようじゃウェブページとはいえません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　最近ではスマホのような小さくても解像度の高い端末や、とても幅広のディスプレイ、あるいはテレビを使った訪問など様々な利用が考えられるのです。ウィンドウ幅が小さくなったら横スクロールを強いられたりレイアウトが意図せず崩れたりしたのじゃウェブサイトを作った意味がない。

　この様な知識も含めて
まず、HTMLとスタイルシートを身につけましょう。
・はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
などは、初めての方には最適でしょう。
そして、
・1と2の間辺りからはじめるホームページ講座 ( http://www6.plala.or.jp/go_west/beginner/ )
・1と2の間辺りからはじめるCSS講座 ( http://www6.plala.or.jp/go_west/beginner/css/ )
あたりで、もう少し高度な内容を学ぶこと
そして、色々なサイトのソースを見てみることです。幸いに
・Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
のような検証サイトもいくつかあります。
また、firefoxブラウザの「開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )」には、
・Firebug ( https://addons.mozilla.jp/firefox/details/1843 )
・JSView ( https://addons.mozilla.jp/firefox/details/2076 )
・Html Validator ( https://addons.mozilla.jp/firefox/details/249 )
のような、豊富でこの様な用途に合致したアドオンがたくさんあります。

回答No.2

lv4u

>>たくさんあると思うのですが、どういう順で学んでいけばいいでしょうか？
>>画像加工が先？ＨＴＭＬなどを先にやったほうがいいでしょうか？

必要度が高いものからやっていけばいいのではないですか？

HTMLうんぬんより、掲載する大きな画像を自分の思い通りに作りたいとなれば、まずはフォトショップを学ぶことになるでしょう。
また、大きな画像よりも、ボタンとか飾り枠などを思い通りに作りたいっていうならイラストレータを先に学ぶことになるかもしれません。
そして、テキストや表組みをやりたいってなれば、HTML,CSSとかJavascriptなどを先に学ぶことになると思います。

>>通信講座なども考えましたが、高額でちょっと手が出ません。

「テラハウスＩＣＡ」のライブビデオがいいかもしれません。
一講座分（４０～９０分）のＤＶＤが５０００円で販売されていてグラフィックス関連では、３０本あるようです。３０本まとめて購入すると１０％引きになります。
とりあえずフォトショップだけ学びたいなら、半分だけ購入してもいいと思いますし、１本ずつ買ってもいいかもしれません。

私は、テラハウスＩＣＡがスポンサーとなり、スカパー放映していたものを録画して、勉強しました。
スカパーで放映したものと、販売されているライブビデオと内容が同じかどうかわかりませんが、イラストレーターやフォトショップの使い方を先生が実際に操作しながら教える形式です。書籍よりもかなり分かりやすいと思いました。

HTML,CSS,JavaScript,Unix,ネットワーク関連のライブビデオもあるようですので、興味あれば、それらも購入されればいいと思います。

http://www.terahouse-ica.ac.jp/index.html

回答No.1

neko-ten

＞ＨＴＭＬ、ＣＳＳ、イラストレーターやフォトショップなどなど学ばないといけないことは
＞たくさんあると思うのですが、どういう順で学んでいけばいいでしょうか？

それ以外にもサーバの動作に対する知識、サーバサイドスクリプトを動作させている場合にはそれらの知識が必要ですね。
最近はJavaScriptも必要に。

基本的にはHTMLから始めることになります。
大体はCSSはHTMLとセットで始めることになります。
きちんとした業者さんが作っているのであれば、CSSを使ってデザインしていますから、はじめにHTMLだけで非推奨要素を使うようになってしまうと非常に困ります。

画像に関しては全く方向が別になりますから、いつ始めてもいいのですが・・・
これらはツールの使い方よりもセンス等の問題になるんで、苦手な人はとことん苦手なままです。

また、サーバの知識もある程度必要ですから、基礎的なコンピュータの知識と通信の知識は必要です。
ApacheやIISの設定とまでは行かなくてもいいですが、最低でもFTPやHTTPの基礎は知っておいたほうがいいですね。

＞あと、独学で学ぶ場合、おすすめの書籍などありましたらアドバイスをお願いいたします。
基本的にリファレンスが必須になります。
また、ホームページビルダー等のオーサリングツールを前提にしている本は問題外なので除外しましょう。

http://www.amazon.co.jp/dp/4798016020/
この辺りとか
詳しい内容になると
http://www.amazon.co.jp/dp/4873111277/
http://www.amazon.co.jp/dp/4873115736/
http://www.amazon.co.jp/dp/4873115531/
とか。

基本的にHow to本はあてにならんと思ってます。