HP制作の勉強をしていますが… | お悩み相談

皆さんからのお悩み相談に馬場誠がお答えします!

独学!未経験からWebデザイナーになる!! > お悩み相談室 > 2012年のご投稿 > HP制作の勉強をしていますが…

HP制作の勉強をしていますが…

posted by 田口さん 2012-01-05

はじめまして。

私はHP制作の仕事に就きたくて、会社員として働きながらHTMLの勉強を始めて半年ほど経ちます。

ネットでよくある“無料ホームページ作成講座”を参考にし、見本を見ながらHTMLを書いていくといった勉強法です。


ある程度は理解できてきましたが、見本の通りHTMLを書いても、見本の通りに表記されない場合が多々あります。何度も見直し、タイプミスはなく、改行、空白もそっくりに真似しているのに、僕の書いたものでは、見本より若干左に寄っていたり、枠の中の文字が若干中心より下の表記されてしまったり・・・。


100%タイプミスはありませんし、スぺースや改行などもそっくり真似しているのですが・・・。


このような場合、何か対処法はありますか?

教えて頂ければ嬉しいです。
 
田口さん

はじめまして。独学!未経験からWebデザイナーになる!!
http://www.be-webdesigner.com/
というサイトの管理人の馬場と申します。

先日はお悩み相談をお送りいただきありがとうございます。
立て込んでおり回答が遅くなりましたこと、お詫び申し上げます。


> ある程度は理解できてきましたが、見本の通りHTMLを書いても、見本の通りに表記されない場合が多々あります。

思い通りに表示できないことに関しては、
複数の原因が考えられますので、まずはそこからみていきましょう。


■環境の違い
まず、見本を作られたサイト作成者の環境
(OS・ブラウザ・それぞれのバージョン)と、
田口さんの実行環境が同一であることは確認できますでしょうか。

Webページは、環境によって見え方は多少異なります。

もし見本と環境が異なる場合は、
少しのずれ程度でしたら発生する可能性があります。
(ブラウザによっては違いが大きいこともあります)


■見本の信頼性
可能性としては高くありませんが、
そもそもとして見本が間違っている(もしくは情報が古い)
可能性も0というわけではないと思います。

意外に思われるかもしれませんが、私自身も何度も経験があります。

ネット上のコンテンツは玉石混淆であり、
高品質かつ頻繁に更新・管理されているサイトもあれば、
その逆もまたしかりです。

特に情報が古いページで、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にも別の背景色を入れるなど)


よろしければ参考になさってください。
馬場誠
私も相談したい!という方はこちら

お悩み相談TOPに戻る

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。