Webデザイナーの世界を体験してみよう
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
当サイトをご覧になって、「Webデザイナーってなんだかよさそう。よし、目指してみようかな！」と思われた方もいるかもしれません。しかし水を差すようなのですが、ちょっと待ってください。もしまだあなたがWebサイト制作の世界を体験したことがなければ、いきなり高額なスクールに申込みをしたり、ソフトを購入したりするのは早いかもしれません。
というのも、あなたがWebデザイナーの仕事、つまりWebサイトを作ることが面白いと思えるかどうかは、身をもって体験してみないと分からないからです。高いお金を出したのに、「Webデザイナーの仕事はあまり面白くなかった」ということでは、時間もお金も無駄になってしまいます。ですから、いきなりWebデザイナーを目指すよりも、まずはこの世界を体験してみるのが大事だと私は思います。
ぜひともWebの世界をじっくりと体験し、その面白さを知ってからWebデザイナーを目指してください。
Webサイト制作（Webページ）の体験について
Webサイト制作の体験と言っても、お遊びの延長でかまいません。というか遊びと割り切ってもいいくらいです(笑)。ですから、上手くできなかったとしても全然大丈夫です。というか、最初はうまくできなくて当たり前ですからね。
また、ちょっと体験してみるだけですから、プロと同じ環境を用意しなくてもかまいません。ただ楽しく遊んでやるぞ！という気分で、好きなようにやってみてください。
お金をかけずに体験できる！？
体験するとは言っても、お金がかかるのはイヤだなぁという方も多いと思います。しかし、これは一生の職業にもなるかもしれないことへの第一歩です。それに、ここでしっかりWebを体験しておけばおくほど、ミスマッチの可能性も低減するでしょう。ですから、ほんのちょっとだけでも投資してみてください。
とはいっても、たったの数千円程度の投資で十分体験できますので、安心してくださいね。
Webを体験するのに必要なものは！？
Webを体験するのに必要なものは、まずはソフトです。ソフトは、Adobeの体験版か、もしくはフリーのソフトでもかまいません。つまり、ソフトにかかるお金は0円です。
次に書籍です。ネットにも情報はあふれていますが、最初の一歩としては、お勧めしません。なんだかんだ言っても見やすさ、わかりやすさ、そして楽しさ（本の方がワクワクしませんか！？）を考えると、書籍に軍配が上がります。最低1冊買えば、十分Webを作って遊ぶことができるでしょう。
それでは、これからソフトと書籍について順番にご紹介していきます。
ソフトを用意しよう
まずは必要なソフトからご紹介します。選択肢は先ほどお話ししたように二通りあります。それぞれ見ていきましょう。
選択肢1.Adobe系ソフトの体験版をインストールする
Adobeのサイトでは、ほとんどの製品で体験版を提供しています。それらの体験版は、初回起動から30日間使えますので、その間じっくりWebサイト制作を体験するのもいいでしょう。ただ、本当に初めての方や、PCの操作自体になれていない方は、選択肢2でご紹介する、フリーソフトの方をお勧めします。
Adobe系のソフトでインストールする候補は、Dreamweaver, Illustrator, Photoshop, Fireworks等です。が、あまりいろいろなソフトをインストールするとかえって混乱してしまうかもしれないので、Dreamweaver + PhotoshopまたはDreamweaver + Fireworks（こちらの方が簡単です）などのセットがお勧めです。
注意！体験版は一台のPCにつき一回だけ
体験版は、初回起動時から30日間使えます。期限をすぎると、以後は製品を購入しないと起動できなくなります。体験版が使えるのは、一台のPC（厳密に言うと違いますが）では各ソフトごとにそれぞれ一回だけ。例えアンインストールしても、同じバージョンのソフトは再び体験することはできません。その点だけ気をつけてくださいね。
選択肢2.フリーソフトをインストールする
Webサイト制作を体験するには、Adobeのソフトを使わなくても十分可能です。むしろ私は、一番最初のとっかかりはフリーソフトの方をお勧めします。こちらの方が、操作が簡単ですからね。
それにAdobeの体験版は、一度期限が過ぎると同じPCでは体験できなくなると先ほどお話ししました。ですので、まずはフリーソフトでいろいろ試して、その後のステップとしてAdobeの体験版を利用するのがいいでしょう。
HTMLを書くためのフリーソフト
下記Terapadのリンク先で、画面上部に「Download」と書かれたまぎらわしい広告が表示されることがあります。それは広告ですので、目的のソフトとは異なります。画面下部にある日本語で「ダウンロード」と書かれたところからダウンロードしてください。
HTMLを書くには、プレーンテキストで保存できるソフトなら何でもかまいません。例えばWindowsならメモ帳、Macならテキストエディットというソフトがもともと入っており、これらでもHTMLを書けます。ただし、「取り消し」が1回しかできなかったり、デフォルトでリッチテキストフォーマット（簡単に言えばHTMLに適さないフォーマット）が設定されていたりと、決して使いやすいとは言えません。フリーで高機能なソフトがありますので、そちらをインストールするといいでしょう。
ここでは、シンプルなテキストエディタとして、Windowsの方はTerapad、Macの方はmiをお勧めしておきます。これらのエディタはHTML専用ではないので、特別HTMLが書きやすいというわけではありませんが、定評のある素晴らしいテキストエディタです（私も両方テキストエディタとしてずっと使っています）。他にもHTMLに特化したソフトもあるので、もし興味があればVectorなどのサイトで調べてみるといいでしょう。
画像を加工するためのフリーソフト
フリーソフトのグラフィックスソフトは、断然GIMPがいいと思います。GIMPは、Photoshopに近い感じのソフトです。WindowsとMac両対応しており、機能にも定評があります。
GIMPをただのフリーと思って侮るなかれ。上記リンク先サイトを見れば、いろいろできることがお分かりいただけるでしょう。（なお、上記サイトは公式ページではありません。公式は英語なので、日本語で詳しく解説されているサイトをご紹介しました。）
書籍を用意しよう
次は書籍です。最低限、HTMLの本を一冊買ってくれば、その日からWebを作って遊ぶことができます。注意点としては、HTML辞典などの逆引き系の本は避けてください（1冊目の本としては向いていないためです）。それよりも、本の中の通りに記述していくと、ページができていくタイプの実践的な本を強くお勧めします。
実際に書店で初心者用の本をチェックしたところ、HTML/XHTML&スタイルシートレッスンブックという本が、正に実践的で、しかもとてもわかりやすかったです。この本なら、全くの初心者の方でも、本の通り進めていけばWebが体験できるはずです。左のリンク先のレビューを見ると高評価のようですが、それも納得できます。
追記：2015年5月12日
さすがにここでご紹介している本は少し古くなってきました（それでも、導入時期にとってはわかりやすい良書であることは変わりません）。
本書の後継本である、 HTML5&CSS3レッスンブックが良さそうと思って買ってみましたので、読んだらまた追記します。
なお、上記の本は(X)HTML/CSSの本なので、画像加工の方法は載っていません。画像加工に興味があれば、インストールしたグラフィックスソフトの本を買ってみるのもいいでしょう。Photoshopや Fireworksの本はもちろん、 GIMPの本も結構たくさん出ていますよ。
Webデザイナー御用達！？のブックスタンド
これから本を読みながらWebを体験するわけですが、そんな時にあると便利なのが、ブックスタンド。今すぐに必要という訳でありませんが、Webデザイナーを目指すと決めた際は、必ず購入されることをお勧めします。学習の効率が全く違ってきますので。私もバリバリ使ってます(笑)
ブックスタンドについての詳細は、[コーヒーブレイク]カテゴリ内の記事、本を使った学習を超効率化するブックスタンドの記事も参考になさってください。
どのくらい体験すればいいの！？
さて、どのくらいWebを体験すればいいか、ですね。答えは、飽きるまで遊んでみてくださいということになるでしょう。ここで飽きずにもっと本が欲しくなったり、Adobeのソフトも使いたくなったりしたら……あなたはWebデザイナーに向いているかもしれません。飽きる前に、Webデザイナーになってしまうということもあるかもしれませんね(笑)
まさに私の場合がそうでした。上記のような本を買ってきて、読みながら作っているうちに興味の対象がどんどん広がっていったのです。もちろん、興味が湧いてくるタイミングは人それぞれだと思いますので、すぐに飽きてしまったからといって向いていないという訳ではありません。
とにもかくにも、おもいっきり楽しむつもりで体験してみてください。
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
コメント
- りーこ さん 2012年09月01日15時27分
はじめまして 数日前からサイトを拝見し、とても参考になったので感謝しております。 私の場合ずっと経理・人事等の仕事をしていたのが、会社の組織替えで 最近パソコンのWeb通販サイト運営の部署で働くことになりました。 Webデザインというか、バナー作成・サイトスケジュール作成・SEO対策などが 全般にできるようになることと、商品についても詳しくなって自分でセールスキャッチなども考えてバナーを作ることなどが必要になりました。 サイト自体をコーディングする方は別にいるのですが、最低限のHTML・CSSの知識がないと、いつまでもその人に頼った仕事しか出来ないかと思い、勉強法を模索していたところでした。 これからWebデザイナーを目指す方からみたら、棚ボタくらいのチャンスだと思いますし、頑張ってみようと考えています。 Webデザインについては以前興味を持ってはいたのですが、仕事にすることがなかったので、ぼんやりした興味のみで終わっていたのが、今急に色々覚えなくてはならなくなったので、あまりに果てしない道のりにプレッシャーを感じていましたが、 馬場様の丁寧な実体験に基づくアドバイスやお勧めの本・勉強法を読んで、 とっても心強く思えました。なんて親切な人がいるんだろう！と感動しました。 また時折、ものすごく人間味のあるアドバイスがあって、共感もしました。 （本でなくネットで勉強すると、時折別の興味に走ってしまう、とか） 早速、お勧めのブックスタンドと本を何冊か注文しました。 うまく感謝の気持ちが伝えられませんが、今後もこちらのサイトを参考に、困った時には頼りつつスキルをあげていきたいと思います！ 本当にありがとうございました。
- 馬場誠 さん 2012年09月01日21時49分
りーこさん、こんばんは。
> サイト自体をコーディングする方は別にいるのですが、最低限のHTML・CSSの知識がないと、いつまでもその人に頼った仕事しか出来ないかと思い、勉強法を模索していたところでした。
素晴らしいお考えだと思います。 りーこさんのように、会社から期待されている以上のことを目指すような向上心のある方が、きっと会社から大事にされるのでしょうね。 実務の中で試行錯誤しながら学べる環境は、非常に良い環境だと思います。 また、自分の仕事により売り上げが左右するというのは非常にやりがいもあると思いますので、きっと前向きに学べるのではないでしょうか。 （私もよくありますが、Web制作者にとって売り上げが上がった時はすごくうれしいので、それが学習の良いモチベーションになったりします）> 馬場様の丁寧な実体験に基づくアドバイスやお勧めの本・勉強法を読んで、
> とっても心強く思えました。なんて親切な人がいるんだろう！と感動しました。
そのようにおっしゃっていただいてとてもうれしいです。 振り返れば、サイト制作にはかなりの時間を費やしましたが、このようなコメントをいただけることだけでも、かけた時間は無駄じゃなかったんだなと思います。 こちらこそありがとうございます。 最近仕事が立て込んでいてなかなかサイト更新ができていませんが、あと数ヶ月でまた更新できる時間も出てくる予定です。 今後も、少しでもお役に立つことができれば幸いです。 学習、楽しく進められるといいですね☆- Ｓ．Ｈ さん 2013年01月25日17時57分
私は高校で講師をしています。 未経験ですが、ＷＥＢデザイナーに転職を考えていますので、ソフトを買いたいと思っています。 高校で教えていることによって、学生・教職員用のAdobe Creative Suite 6 Design & Web Premium Windowsを買うことはできるのでしょうか。 また、インターネット販売を見ると、 学生・教職員個人版 Adobe Creative Suite 6 Design & Web Premium Windows版 (要シリアル番号申請) (DVD-ROM) とあります。 「要シリアル番号申請」の意味がわかりません。 この「学生・教職員個人版 Adobe Creative Suite 6 Design & Web Premium Windows版 (要シリアル番号申請) (DVD-ROM)」は、普通のノートパソコンには適用できないのでしょうか？ よろしくお願いします。
- 馬場誠 さん 2013年01月25日19時44分
Ｓ．Ｈさん、こんばんは。 学生・教職員個人版パッケージは、アドビが定めた対象教育機関にお勤めかつ証明書が用意できれば使うことができます。 高等学校は対象教育機関ですのでおそらく可能かと思われますが、念のためAdobe公式サイトの購入ガイドページの内容確認および購入対象者診断をやってみてはいかがでしょうか。
> この「学生・教職員個人版 Adobe Creative Suite 6 Design & Web Premium Windows版 (要シリアル番号申請) (DVD-ROM)」は、普通のノートパソコンには適用できないのでしょうか？
大丈夫です、システム要件（OSやスペック）を満たしていれば使えますよ！ 通常版にはシリアルが同梱されているのですが、学生・教職員用版にはシリアルが同梱されていません。というのも、そうしないとルールを守らない対象外の人がライセンス認証できて、使えてしまうからですね。 ソフトを購入したら、まずはAdobeにシリアルの申請をします（その際、身分証が必要になります）。そして承認が下りれば、改めてAdobeよりシリアルが発行される、という流れです。 なお、初回のみ30日の体験期間がついているので、未体験であれば、シリアルが届く前でもすぐに使うことができます。- Ｓ．Ｈ さん 2013年01月26日11時56分
馬場様。こんにちは。 先日、質問させていただいたＳ．Ｈです。回答がこんなにも早くいただけたことに感謝しております。 今後も質問させていただくことが多々あると思いますが、お時間が許すのであればよろしくお願いします。 さっそくで申し訳ありませんが、質問させていただきます。 私（男です）は現在３０代中ごろの年齢なのですが、まったくの未経験からＷＥＢデザイナーの業界に就職したいと考えております。 厳しいのは重々承知いたしておりますが、「作る」仕事をしたい気持ちが強く、ゼロから勉強してでもこの業界を目指そうと思っています。「どんなＷＥＢデザイナーになりたいですか？」の項目では、デザイナー系が自分が学ぶのに一番興味がある分野だと感じました。 ゆくゆくは小さな会社でもいいので社員として働ければ幸いと思いますが、仮にそれが可能だとしても数カ月から数年後になるのは覚悟しております。その過程として、馬場様のご意見でもありますように、アルバイトとして働くのが、お金ももらえる上に勉強にもなり、一石二鳥だと思いました。 そこで質問です。 デザイナー系のソフトを深く勉強するとして、とりあえずアルバイトとして雇ってもらえるくらいまでレベルアップしたいのですが、手始めに選ぶ本としてはどのような本がおススメなのでしょうか。 馬場様が読んでこられた本の項目はもちろん見させていただきましたが、まったくの初心者がレベルアップを図りやすい本を紹介していただけると幸いです。 ちなみに私は、今から半年ほどは勉強時間が多めにとれそうですので、自由な時間のほぼすべてをＷＥＢデザイナーになるための勉強にあてようと考えております。 お忙しいとは思いますが、よろしくお願いします。
- Ｓ．Ｈ さん 2013年01月26日15時50分
何度も質問してすみません。Ｓ．Ｈです。 馬場様が紹介しておられるフリーソフト「Tera Pad」をダウンロードしてみました。 最初は英語で説明がなされたページが続き、よくわからないので次に進むボタンをクリックし続けました。 ようやく日本語のページが出ると、「ダウンロードの準備が整いました」と出たので、「ダウンロードを開始」のボタンをクリックしました。 すると、「インストールしていただきありがとうございます」と画面に表示され、「レジストリスキャンの開始」のボタンをクリックしました。 すると、「Regclean Pro」という小さな画面が出てきました。何かをチェックしているようなのでしばらくまっていると、結果はレジストリの損傷レベルが高く、エラーが４５７を記録しました。 エラーは１５個まで無料でカットできるようでしたが、それ以上になると有料になるようなので、この画面を閉じてしまいました。 結局このフリーソフトは使えないようなのですが、何がいけなかったのでしょう。 また、エラーが多すぎたようですが、私のパソコンがウイルスにやられたりしないでしょうか。 お忙しいところ、申し訳ありません。よろしくお願いします。
- 馬場誠 さん 2013年01月26日16時32分
Ｓ．Ｈさん、こんにちは。１件目の方です。
> 手始めに選ぶ本としてはどのような本がおススメなのでしょうか。
デザインに強いWebデザイナーを目指されているとのことで、Photoshop, Illustratorの操作方法がメインに書かれている本（※１）を最初に購入されるといいでしょう。いわゆる「はじめての～」系がいいです。 それを軽く終えたら、デザイン・レイアウト・配色などの本（※２）を数冊購入し、平行して実際にデザインをしながら学ばれるのがお勧めです。 もちろん、Webデザイナーの基本であるHTML/CSSも、平行して学んでくださいね。 ※1に関しては、一度操作を覚えてしまうと、この手のタイプの本はなかなか読まないもので、恐縮ですが私も詳しくありません。 さらに※２に関しても、すでにデザインの基本を学んでいる関係上優先順位がそれほど高くないので、あまり買い足しておらず最新の本は勉強不足ですm(__)m 前から思っていたことですが、新しい本を具体的に紹介できない状況はダメだなぁと思うので、今後は偏らずに本を買わなきゃなと反省です。 少し古めでもよろしければ、私の読んだ本のページをご覧ください。デザインの原則は普遍的な要素がほとんどなので、出版年月はたいして気にせず読めるはずですよ。それに古本が多いので、まとめて買っても安いです。 ……とここまでお話ししましたが、人からのお薦めもいいのですが、最初は実際に店頭でめくってみて、簡単そうだなと思う本や、面白そうだなと思う本を選ぶのもいいと思います。 自分で選んで失敗することもあるかもしれませんが、それも勉強代として考えれば高くないです。自分で選んだ本って愛着も湧きますし、なんだかやるぞ！という気にもなりますしね☆ あまり具体的なアドバイスができませんでしたが、参考になりましたら幸いです。- 馬場誠 さん 2013年01月26日16時56分
２つめの件です。 Terapadは日本語のソフトなので、英語でのインストールはありません。 ですのでおそらくですが、該当ページ画面最上部の英語のバナー広告（Google社の広告）をクリックされて、他のサイトに移動された後に（TeraPadではない）ソフトをダウンロードされたのではないでしょうか。 バナー広告の中はに、あたかもそのサイト運営者のコンテンツと同化し、ソフトのダウンロードを促す手法が存在します。それ自体はただの便利ソフトだったりするのですが、その途中で（意図的な）おまけとして、このようなソフトがついてくることがあります。 Regclean Proで検索してみましたが、はっきり言って詐欺まがいのソフトのようです（エラーを出して不安がらせ、お金を出させようとするソフト）。 Regclean Pro で検索すれば、たくさんのサイト＆削除方法が出てきますので、早急に削除してください。 他にもインストールされたのであれば、システムの復元をして、インストール前にシステムを戻した方がいいかもしれません。 なお、TeraPadの運営者さんの名誉のためにお伝えしておくと、この広告はサイト管理者が意図的にこういった内容の広告を選択しているのものではないです。 これはGoogle社公式の広告であり、表示するごとに中身が変わるもので、Googleが勝手に広告内容を選別しています。 大手サイトでも使われている有名な広告なのですが、ちょっとこれはまぎらわしすぎますね。 Google社がこんな怪しい広告を認めているのが問題な気がします。 とは言え、私の確認がいたらなかった点も大いにあると思います。 大変申し訳ありませんでしたm(__)m より分かりやすくするため、本文内に本件を補足させていただきました。
- YOSHI さん 2013年03月31日02時24分
上記の書籍をたまたま注文してました！ 明日には届くので遊んでみます。
- 馬場誠 さん 2013年03月31日17時03分
たまたまですか、すごい偶然ですね！たっぷり遊んでみてください～。
- Shitaku さん 2014年06月03日03時10分
初めまして。 某大学を何をしたいか決められず、就活もあまりしないまま卒業してしまったものです。 卒業してからはフラフラとフリーターをやっています。 今まで両親に迷惑をかけてきたので、早めに身を固めたいなと思っております。 そこで、一応大学ではデザイン関連（自信はないですが） でしたし、研究室でもプログラミングをかじる程度やっていたのもあり、 Web関係の仕事をやっていけたらなと最近思い始めました。（安易な理由で申し訳ありません） 僕自身、同じ事の繰り返しと言うか変化がない仕事はしたくはなかったのもあまり就活をしなかった理由でもあります。 その点、Webデザインはクライアントによって求められるものも異なるわけで、もちろんできた作品も様々で非常に楽しそうだと思いました。 ただ、ほぼ未経験なのでとても不安なのも事実。 そこで拝見したのが馬場さまのサイトでした。 僕自身に適性があるのかどうかは未知ですが、一歩踏み出せる勇気がでました。 このサイトをこれからも見させて頂きたいと思います。 学んでいく上で質問もさせて頂くかもしれませんのでその時はよろしくお願いします。 本当にありがとうございました。（勝手に感謝させて下さい笑 ）
- 馬場誠 さん 2014年06月04日19時43分
Shitakuさん、はじめまして。 私も20台前半は迷いの日々だったので、お気持ちよく分かります。
> 僕自身に適性があるのかどうかは未知ですが、一歩踏み出せる勇気がでました。
何が向いているかというのは、やってみないと分かりませんから、おっしゃるようにまずは一歩を踏み出すことが大事なのだと私も思います。 まずは、将来のことは置いておき、とにかくサイト制作・運営を楽しんでみてください。 まずは楽しむこと・好きだなと思うことが、幸せなWebクリエイターになるポイントなのではないかと今では思っていますので(^-^) 最近は立て込んでいてなかなか更新できていないのですが、コメント欄やお悩み相談コーナーでいつでもご質問ください。 また、今年中には掲示板的な質問コーナーも設けたいと思っていますので、その時は是非ご利用いただければと思います☆ こちらこそ、うれしいコメント、ありがとうございます！- Gonta さん 2014年10月12日21時05分
初めまして。 こちらのサイト拝見していろいろとお勉強なりました。 ありがとうございます。 私は、DTPのお仕事でAdobeのソフトAI、PS、IDを 20年近く使ってお仕事をしております。 今度、商品販売のHPの構築を出来ませんか？と言われまして、 私はGoLiveというソフトでしか作ったことがなく、 それも個人のホームページぐらいの技術しかありません。 CSSなどの言語などは聞いたことがある程度です。 完全な初心者の技術ですが、 手元にあるDreamweaverやFireworks等を使って最終的には 構築や管理等したいと思っております。 回りには教えていただける方もおりませんので、 すべて独学でやりたいと思っています。 ここで勧められている本から学んだほうがいいのでしょうか？ 出来ればadobeのソフトで基本から学びたいと思っているのですが、 もし他にオススメの本があればお教えいただけたらと思います。 よろしくお願いします。
- 馬場誠 さん 2014年10月13日10時05分
Gontaさん、こんにちは。 参考にしていただけたようで幸いです。 本当に初心者レベルということでしたら、本ページでご紹介しているような簡単な本は向いていると思います。 ただ、最初にこのページを作成した時からだいぶ年月が経ち、現在はHTMLの最新バージョンである「HTML5」もだいぶ普及が進んできました。 本ページでご紹介している本は、その一つ前に普及したバージョンのHTMLで解説されています。 HTML5との共通点も多いですし、この本のできが良い＝初心者の方にわかりやすいのは変わりませんが、今はHTML5で解説されている、もっとふさわしい本も出ているかもしれません。 HTML以外の本もそうですが、一度学んでしまうと初心者用の本を新規購入する機会が無くなってしまうため、私が良いと思う本も大抵やや古めの本になってきてしまい、一概に良いとは言えなくなってきてしまいました。 お役に立てなくて大変恐縮なのですが、実際に書店に出向いて「簡単そうだな」と思われる本を探してみられることをお勧めします。 最初は「失敗した」という本を買ってしまうこともあるかもしれませんが、本選びもうまくなりますので、プラスになると思いますよ☆
- Gonta さん 2014年10月13日20時03分
こんばんは。 馬場様。 お忙しいところお返事ありがとうございました。 私が作っていた頃に比べればもう遥かにレベルの違いも出てますし、 こんな近々でも、新しい事がどんどん増えていますね。 馬場様の言う通り、まず本屋に行って探してみたいと思います。 ちらっと見たりもしたのですが、どこから見たらいいのかわからず、 買うのに迷ったりしてました。 adobe関連は、動作的なものや、ツールバーなどはなじみのものなので、 ソフト自体は動かせないわけではありませんが、 何をまずしたらいいかがわからなくて。 馬場様からオススメしていた本を参考に まずは一冊買ってみたいと思います。 アドバイスありがとうございました。 頑張ってみます。
- ダイスケ さん 2014年11月23日01時15分
初めまして。 馬場様のオススメのHTML/XHTML&スタイルシートレッスンブックという本を早速、購入して学び始めたばかりの初心者です。 基礎的な質問で申し訳ないのですが、私はMACを使っていて、本に沿って進めていたのですが「webページにタイトルをつける」項目で、日本語のタイトルを入力して確認すると文字化けしてしまいます。 アルファベットのタイトルにするとちゃんと表示されるのですが、なぜでしょうか？ 基礎すぎて馬場様に質問するようなことではないかもしれないのですが、よろしくお願い致します。
- 馬場誠 さん 2014年11月23日08時39分
ダイスケさん、はじめまして。 状況から推測するに、おそらくはHTML自体の文字コードと、ブラウザが判別した文字コードが異なっているのでしょうね。 ブラウザが正しく文字コードを判別できるように指定してあげれば、改善できると考えられます。 文字化けを防ぐ&解消する方法のページにて、具体的な方法を書いていますので、よろしければ参考にしていただければ幸いです。
- ダイスケ さん 2014年11月24日00時54分
馬場様、アドバイスをありがとうございます。 アドバイスいただいたページに沿って確認してみましたが、やはりタイトルの日本語が文字化けして アルファベットは表示されます。 MACのYosemiteを利用しているのは関係があるのでしょうか？ テキストに沿って下記のようなソースを書きました。 <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”/> <title></title> <style type=“text/css”> </style> </head> <body> </body> </html> アドバイスをいただければと思います。 度々ですいませんがよろしくお願い致します。
- 馬場誠 さん 2014年11月24日09時21分
ダイスケさん、こんにちは。 半角英数字はOKで、日本語が文字化けの場合、まだブラウザが文字コードを正しく解釈できていないということだと思います。 どのOS＆バージョンを使っていても、テキスト形式かつUTF-8で保存できてさえいれば大丈夫です。 そのままのコードを貼り付けていただいたのであれば、おそらくはこちらのケースと同様かなと思います。 本来は"とすべきところが全角の“”になっているので、ブラウザが正しく文字コードを解釈できていない可能性があります（Chromeはそれでも正しく認識出るのですが、Safariは些細な文法ミスでも解釈してくれないんですよね）。 “と”はコードの中では使いませんので、全て半角の"（ダブルクォーテーション）に直せば解決できるかもしれません。
- ダイスケ さん 2014年11月24日23時16分
馬場様、アドバイスをありがとうございます。 問題が解決できました。 初歩的な質問に丁寧にご回答いただいて、ありがとうございます。
- 馬場誠 さん 2014年11月25日22時41分
解決して良かったです(^-^) 引き続き、Webでとことん楽しく遊んでみてくださいね☆
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)