締切済み

HTMLでサイトを作る場合と、画像を貼る場合

2016/10/23 23:37

現在、HTMLを用いて自分でウェブサイトをつくっています。そこで一点質問なのですが、よくボックスやヘッダーの色を指定したり作るのが面倒なので、よくPhotoshopなので、作成して画像で貼った後、その上に文字を追加しています。ここで1点質問なのですが、ボックスを自分でHTMLで作って色を指定する場合と、上記のように加工した画像を使ってホームページを作る場合とでは何か違うのでしょうか。レスポンシブサイトが作れないとか、SEO的に不利になるなどどなたか教えて頂けないでしょうか。ご回答宜しくお願い致します。

good-oasis
お礼率12% (6/49)

CSS
回答数5
ありがとう数0

みんなの回答 （5）
専門家の回答

みんなの回答

Katsu_Kaiz
ベストアンサー率58% (345/586)

2016/10/24 22:21 回答No.5

こういうのは実験あるのみ。まずは簡単なHTMLを書いたうえで、両方をくらべてみてください。 ◆直接HTMLを書いた場合 <div style="background-color: red;"> <p>あいうえお</p> </div> ◆加工した画像を使う場合 <div style="background-image: url('sample.jpg');"> <p>あいうえお</p> </div> そんなに大きな違いはないものの、直接HTMLを書いたほうが構造としてわかりやすくなります。この場合は、背景色が赤だと見ただけでわかりますね。反対に加工した画像だと、《sample.jpg》だけでは何なのかよくわかりません。これは検索サイトでもおなじで、直接HTMLを書いたほうが検索サイトに内容を理解してもらえる、いわゆるSEO的には有利だといわれています。検索サイトは画像の中身までは見てくれないと思うので、加工した画像はSEO的に少しだけ不利……かもしれないということです。また、いわゆるレスポンシブ対応を考える場合、画像だと大きさの制御が難しくなります。パソコンにあわせてつくった画像をスマホで見ると字が小さくて読めず、反対にスマホにあわせてつくるとパソコンで見たときにスカスカになりがちです。この場合も直接HTMLを書いたほうが簡単で、さらに画像よりも表示速度が速くなります。もちろん、レイアウトが崩れないようにボックスを計算するのは大変ですし、画像でなければ表現できないようなデザインもあります。そういうときは画像を使って、そうでないときはHTMLやCSS側で何とかするのが妥当なところではないでしょうか。

superside0
ベストアンサー率64% (461/711)

2016/10/24 11:07 回答No.4

今では笑い話ですが、２０年ぐらい前に「弊社では　全てのコンテンツを画像として制作しますので　文字化けや、ブラウザによる差異が発生しません。フォントも自由に選べます」って Webサイト（その当時はホームページって言ってましたが）制作代行のセールストークのが実際にありましたっけ。たしかに、その当時は、NetscapeとIEの表示の差異で苦労していたし、記載ミスによる文字化けも頻発し、フォントも汚く、検索エンジンよりも、ポータル（というかリンク集）が使われていたのでクローラでどう拾われるかなんてこともあまり考えなくてよかったのではありますが、いかんせん、でっかい画像ファイルでは通信が重くなるのは間違いないし、１枚の画像に複数のハイパーリンクを設置するには、クリッカブルマップ使うしかなくて逆に手間がかかって不便です。今どきの検索エンジンのこと考えるなら、あり得ない話でしょうねぇ。

p-ink
ベストアンサー率29% (55/185)

2016/10/24 06:31 回答No.3

画像に文字も入れてしまうと、読み込みに失敗した場合その文字も見えない。その文字をコピーしたい人がいた場合それができない。ちょっとした修正でも手間がかかる。文字と認識しないのでその語句が検索サイトに引っかからない。こんな感じでではないでしょうか。

akauntook
ベストアンサー率19% (295/1481)

2016/10/24 00:47 回答No.2

質問を正しく理解できている自信はないです。一点質問と二回書いてあるので、もはや質問があるのは二点なんじゃないかと突っ込まずにはいられません。ですが、１つ目の一点質問には実は質問はないので結果的には１つというところに落ち着いたようです。まず、自信はないですが、何らかの四角をボックスと呼んでいるようですね。その四角は、HTMLに加えてCSSを使うのが一般的だと思いますが、そのCSSで色々指定するのが面倒だから、画像を作って背景画像としてだけ指定しているようですね。 >～何か違うのでしょうか。そのまんま、やっていることが違います。ソースコードが違います。 >レスポンシブサイトが作れないとか、特にこの程度の差異でレスポンシブデザインと出来なくなることはありません。 >SEO的に不利になるなど根本的に、質問内容を見る限りでは、SEOを考えるだけ無意味です。見た目が思った通りになるかどうかだけのことをやっていると考えた方が良いですね。 >投稿カテゴリ： [技術者向] コンピューター > プログラミング > Webデザイン・CSS とりあえず、技術者じゃないでしょ？だから、あまり優しい回答には期待しない方が良いと思います。とは言え、それなりに頑張ろうとしているのだろうから応援する意味を込めて基本的な調べても書いてなさそうなところ。 HTMLとは？綴り自信ないので意訳な感じで。『すっげーテキストに目印つける言語』ただ文字が書いてあるだけじゃわからないから、目印をつけようという言語です。つまり、全てのタグは意味のある目印である。面倒とか言っていないで、使うタグの意味を調べて使うと良いです。 CSSとは？ HTMLのデザインを指定するもの。目印をつけたので、それを見易くデザインするのはこいつの仕事です。と言うことで、後の細かい話は入門サイトに詳しく書いてあるので見てみると良いですよ。

Gletscher
ベストアンサー率23% (1525/6504)

2016/10/24 00:07 回答No.1

質問の意味が分かりません。〉よくボックスやヘッダーの色を指定したり作るのが面倒なので、よくPhotoshopなので、作成して画像で貼った後、その上に文字を追加しています。この文に「よく」が2回出てきますが、それぞれはどうゆう意味でしょう？ボックスって何ですか？ヘッダーって<head></head>の部分ですか？　そこに色を指定するって、背景色のことですか？ <head background-color=red></head> ってことでしょうか？「よくPhotoshopなので」の意味が分かりません。「作成して画像で貼った後、その上に文字を追加」も意味が分からないのですが、画像をどこに貼るのですか？　なぜ？