HP制作の勉強をしていますが…
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
posted by 田口さん 2012-01-05
はじめまして。
私はHP制作の仕事に就きたくて、会社員として働きながらHTMLの勉強を始めて半年ほど経ちます。
ネットでよくある“無料ホームページ作成講座”を参考にし、見本を見ながらHTMLを書いていくといった勉強法です。
ある程度は理解できてきましたが、見本の通りHTMLを書いても、見本の通りに表記されない場合が多々あります。何度も見直し、タイプミスはなく、改行、空白もそっくりに真似しているのに、僕の書いたものでは、見本より若干左に寄っていたり、枠の中の文字が若干中心より下の表記されてしまったり・・・。
１００％タイプミスはありませんし、スぺースや改行などもそっくり真似しているのですが・・・。
このような場合、何か対処法はありますか？
教えて頂ければ嬉しいです。
私はHP制作の仕事に就きたくて、会社員として働きながらHTMLの勉強を始めて半年ほど経ちます。
ネットでよくある“無料ホームページ作成講座”を参考にし、見本を見ながらHTMLを書いていくといった勉強法です。
ある程度は理解できてきましたが、見本の通りHTMLを書いても、見本の通りに表記されない場合が多々あります。何度も見直し、タイプミスはなく、改行、空白もそっくりに真似しているのに、僕の書いたものでは、見本より若干左に寄っていたり、枠の中の文字が若干中心より下の表記されてしまったり・・・。
１００％タイプミスはありませんし、スぺースや改行などもそっくり真似しているのですが・・・。
このような場合、何か対処法はありますか？
教えて頂ければ嬉しいです。
田口さん
はじめまして。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
というサイトの管理人の馬場と申します。
先日はお悩み相談をお送りいただきありがとうございます。
立て込んでおり回答が遅くなりましたこと、お詫び申し上げます。
思い通りに表示できないことに関しては、
複数の原因が考えられますので、まずはそこからみていきましょう。
■環境の違い
まず、見本を作られたサイト作成者の環境
（OS・ブラウザ・それぞれのバージョン）と、
田口さんの実行環境が同一であることは確認できますでしょうか。
Webページは、環境によって見え方は多少異なります。
もし見本と環境が異なる場合は、
少しのずれ程度でしたら発生する可能性があります。
（ブラウザによっては違いが大きいこともあります）
■見本の信頼性
可能性としては高くありませんが、
そもそもとして見本が間違っている（もしくは情報が古い）
可能性も０というわけではないと思います。
意外に思われるかもしれませんが、私自身も何度も経験があります。
ネット上のコンテンツは玉石混淆であり、
高品質かつ頻繁に更新・管理されているサイトもあれば、
その逆もまたしかりです。
特に情報が古いページで、Internet Explorer6以前などの
スクリーンショットを表示している場合は要注意でしょうね。
このあたりは、サイトを総合的にみて
信頼性を感じ取るよりほかありません。
■タイプミス
もちろん入念なチェックをされているとのことですので、
おそらくこの線はかぎりなく薄いと思います。
しかし、あえてお伝えしたいことは、手入力でタイプしたものは、
基本的に100%の信頼をすることができないということです。
これは、学習中だからということではなく
私を含め他のプロ（特にプログラムを書く人）でも
そう考えている人は多いと思います。
というのも、実際に絶対タイプミスは無いと思っていても、
思わぬ所でミスをしているという経験が数多くあるからです。
（さんざん時間をとられたあげく、簡単なタイプミスだったことが
何度あったことでしょうか(^^;)）
今回の件は別として、あくまで考え方として
そのような考えを持っておかれるといいと思いますよ。
考えられる原因としてはこんなところです。
そこで具体的な対処法ですが、
CSSをうまく利用されると判断の目安になるのではないでしょうか。
たとえば、若干左によってしまっている場合、
その要素と、その親要素にそれぞれ色違いの背景色のCSS
等を一時的に適用させれば、オブジェクトごとの位置関係が色で明確になるので、
どこに問題があるか（または問題ないか）が分かりやすいです。
■例/Pタグ内のテキストが左に寄ってしまっている場合
～略～
<body>
<div id="hoge" style="background-color:#eee;">
<p style="background-color:#ccc;">テキスト</p>
<p style="background-color:#ccc;">テキスト</p>
</div>
</body>
～略～
※もっと複雑なタグ構造の場合は、
さらにその親にも適用させる手もあります。
（この例で言えば、bodyにも別の背景色を入れるなど）
よろしければ参考になさってください。
馬場誠
はじめまして。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
というサイトの管理人の馬場と申します。
先日はお悩み相談をお送りいただきありがとうございます。
立て込んでおり回答が遅くなりましたこと、お詫び申し上げます。
> ある程度は理解できてきましたが、見本の通りHTMLを書いても、見本の通りに表記されない場合が多々あります。
思い通りに表示できないことに関しては、
複数の原因が考えられますので、まずはそこからみていきましょう。
■環境の違い
まず、見本を作られたサイト作成者の環境
（OS・ブラウザ・それぞれのバージョン）と、
田口さんの実行環境が同一であることは確認できますでしょうか。
Webページは、環境によって見え方は多少異なります。
もし見本と環境が異なる場合は、
少しのずれ程度でしたら発生する可能性があります。
（ブラウザによっては違いが大きいこともあります）
■見本の信頼性
可能性としては高くありませんが、
そもそもとして見本が間違っている（もしくは情報が古い）
可能性も０というわけではないと思います。
意外に思われるかもしれませんが、私自身も何度も経験があります。
ネット上のコンテンツは玉石混淆であり、
高品質かつ頻繁に更新・管理されているサイトもあれば、
その逆もまたしかりです。
特に情報が古いページで、Internet Explorer6以前などの
スクリーンショットを表示している場合は要注意でしょうね。
このあたりは、サイトを総合的にみて
信頼性を感じ取るよりほかありません。
■タイプミス
もちろん入念なチェックをされているとのことですので、
おそらくこの線はかぎりなく薄いと思います。
しかし、あえてお伝えしたいことは、手入力でタイプしたものは、
基本的に100%の信頼をすることができないということです。
これは、学習中だからということではなく
私を含め他のプロ（特にプログラムを書く人）でも
そう考えている人は多いと思います。
というのも、実際に絶対タイプミスは無いと思っていても、
思わぬ所でミスをしているという経験が数多くあるからです。
（さんざん時間をとられたあげく、簡単なタイプミスだったことが
何度あったことでしょうか(^^;)）
今回の件は別として、あくまで考え方として
そのような考えを持っておかれるといいと思いますよ。
考えられる原因としてはこんなところです。
そこで具体的な対処法ですが、
CSSをうまく利用されると判断の目安になるのではないでしょうか。
たとえば、若干左によってしまっている場合、
その要素と、その親要素にそれぞれ色違いの背景色のCSS
等を一時的に適用させれば、オブジェクトごとの位置関係が色で明確になるので、
どこに問題があるか（または問題ないか）が分かりやすいです。
■例/Pタグ内のテキストが左に寄ってしまっている場合
～略～
<body>
<div id="hoge" style="background-color:#eee;">
<p style="background-color:#ccc;">テキスト</p>
<p style="background-color:#ccc;">テキスト</p>
</div>
</body>
～略～
※もっと複雑なタグ構造の場合は、
さらにその親にも適用させる手もあります。
（この例で言えば、bodyにも別の背景色を入れるなど）
よろしければ参考になさってください。
馬場誠
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)