- 締切済み
HTMLでサイトを作る場合と、画像を貼る場合
現在、HTMLを用いて自分でウェブサイトをつくっています。 そこで一点質問なのですが、よくボックスやヘッダーの色を指定したり作るのが面倒なので、よくPhotoshopなので、作成して画像で貼った後、その上に文字を追加しています。 ここで1点質問なのですが、ボックスを自分でHTMLで作って色を指定する場合と、上記のように加工した画像を使ってホームページを作る場合とでは何か違うのでしょうか。 レスポンシブサイトが作れないとか、SEO的に不利になるなどどなたか教えて頂けないでしょうか。 ご回答宜しくお願い致します。
- good-oasis
- お礼率12% (6/49)
- CSS
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- Katsu_Kaiz
- ベストアンサー率58% (345/586)
こういうのは実験あるのみ。まずは簡単な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% (452/698)
今では笑い話ですが、２０年ぐらい前に 「弊社では 全てのコンテンツを画像として制作しますので 文字化けや、ブラウザによる差異が発生しません。フォントも自由に選べます」 って Webサイト（その当時はホームページって言ってましたが）制作代行のセールストークの が実際にありましたっけ。 たしかに、その当時は、NetscapeとIEの表示の差異で苦労していたし、 記載ミスによる文字化けも頻発し、フォントも汚く、 検索エンジンよりも、ポータル（というかリンク集）が使われていたので クローラでどう拾われるかなんてこともあまり考えなくてよかったのではありますが、 いかんせん、でっかい画像ファイルでは通信が重くなるのは間違いないし、 １枚の画像に複数のハイパーリンクを設置するには、クリッカブルマップ使うしかなくて 逆に手間がかかって不便です。 今どきの検索エンジンのこと考えるなら、あり得ない話でしょうねぇ。
- p-ink
- ベストアンサー率30% (55/183)
画像に文字も入れてしまうと、読み込みに失敗した場合その文字も見えない。 その文字をコピーしたい人がいた場合それができない。 ちょっとした修正でも手間がかかる。 文字と認識しないのでその語句が検索サイトに引っかからない。 こんな感じでではないでしょうか。
- akauntook
- ベストアンサー率19% (295/1481)
質問を正しく理解できている自信はないです。 一点質問と二回書いてあるので、もはや質問があるのは二点なんじゃないかと突っ込まずにはいられません。 ですが、１つ目の一点質問には実は質問はないので結果的には１つというところに落ち着いたようです。 まず、自信はないですが、何らかの四角をボックスと呼んでいるようですね。 その四角は、HTMLに加えてCSSを使うのが一般的だと思いますが、そのCSSで色々指定するのが面倒だから、画像を作って背景画像としてだけ指定しているようですね。 >～何か違うのでしょうか。 そのまんま、やっていることが違います。 ソースコードが違います。 >レスポンシブサイトが作れないとか、 特にこの程度の差異でレスポンシブデザインと出来なくなることはありません。 >SEO的に不利になるなど 根本的に、質問内容を見る限りでは、SEOを考えるだけ無意味です。 見た目が思った通りになるかどうかだけのことをやっていると考えた方が良いですね。 >投稿カテゴリ： [技術者向] コンピューター > プログラミング > Webデザイン・CSS とりあえず、技術者じゃないでしょ？ だから、あまり優しい回答には期待しない方が良いと思います。 とは言え、それなりに頑張ろうとしているのだろうから応援する意味を込めて基本的な調べても書いてなさそうなところ。 HTMLとは？ 綴り自信ないので意訳な感じで。 『すっげーテキストに目印つける言語』 ただ文字が書いてあるだけじゃわからないから、目印をつけようという言語です。 つまり、全てのタグは意味のある目印である。 面倒とか言っていないで、使うタグの意味を調べて使うと良いです。 CSSとは？ HTMLのデザインを指定するもの。 目印をつけたので、それを見易くデザインするのはこいつの仕事です。 と言うことで、後の細かい話は入門サイトに詳しく書いてあるので見てみると良いですよ。
- Gletscher
- ベストアンサー率23% (1525/6504)
質問の意味が分かりません。 〉よくボックスやヘッダーの色を指定したり作るのが面倒なので、よくPhotoshopなので、作成して画像で貼った後、その上に文字を追加しています。 この文に「よく」が2回出てきますが、それぞれはどうゆう意味でしょう？ ボックスって何ですか？ ヘッダーって<head></head>の部分ですか？ そこに色を指定するって、背景色のことですか？ <head background-color=red></head> ってことでしょうか？ 「よくPhotoshopなので」の意味が分かりません。 「作成して画像で貼った後、その上に文字を追加」も意味が分からないのですが、画像をどこに貼るのですか？ なぜ？
関連するQ&A
- ｈｔｍｌの画像の大きさの指定について
ｈｔｍｌの画像の大きさの指定について 教えてください。 ｈｔｍｌで画像の大きさを指定できますよね。 width="" height="" のように たとえば50％と指定した場合、どのぐらいの大きさになるのでしょうか。 逆にピクセルで指定した場合は・・・？ 50％か50ピクセルにすると何センチの大きさになる、、という定義はあるでしょうか。 画像の場合のピクセルと％の数値の違いは？ 見た目ではなく、詳しい数値等で教えてほしいと言われ苦しんでいます。 どうかご教示ください。 宜しくお願いいたします。
- 締切済み
- HTML
- XHTMLかHTML5のどちらが良いか悩んでいます
XHTMLかHTML5のどちらでサイトを制作するか悩んでいます。 制作するのはサービスを紹介する商業サイトです。 ワードプレスで制作する予定ですが、 HTML5は初めてで導入していいのかどうかで制作がストップしています。 特に気になるのがＳＥＯ。 次いで古いブラウザの対応。 サービスが紹介できたらとにかくＯＫで 相当なことをするつもりはありません。 今考えてるのはヘッダー画像を複数見せたいのでスライダーを 置いてみたいということくらいでしょうか。 この程度でHTML5で作るメリットはあるのでしょうか？
- ベストアンサー
- CSS
- HTMLで指定したのと全く同じ色を描画ソフトで使いたい。
ホームページを作っています。そのとき背景の色（たとえばピンク）をHTMLで、#ffc0cbというように指定しました。 その後、そのHTMLで指定した色と全く同じ色を使った絵を描きたいとおもったのですが、方法がわかりません。 photoshopやpaintでは、色を選ぶときに#ffc0cbなどと、指定するような選び方はないですし。 HTMLで指定したのと全く同じ色を描画ソフトで使いたいときはどうすればいいのでしょうか。 透過GIFではなく、その色を使いたいのです。 どうぞよろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- UWSC「画像が無い場合」
UWSCについての質問です 指定の画像がある場合、スクリプトを実行させるというのは分かりますが 逆に、画像が無い場合にのみ、特定のスクリプトを実行させるという事は可能でしょうか？ 具体例としては 指定の画像がある場合は何もせず 指定の画像が消えた場合 msgbox("画像が消えました") とメッセージボックスを表示させる よろしくお願い致します
- ベストアンサー
- その他（プログラミング・開発）
- 画像共有サイトを運営したい
ＨＴＭＬ言語で、初歩的なウエブサイトをつくるくらいしかできません。 自分で、「画像共有サイト」をつくり、運営したいと考えているのですが、 何をどこからはじめたらいいのかさえわかりません。アウトラインだけでも 結構です。どうやれば「画像共有サイト」をつくることができるのかをご指導ください。よろしく、お願いします。
- ベストアンサー
- その他（ITシステム運用・管理）
- HTMLとCSS。画像サイズ指定の違いって何ですか？
いつもお世話になってます。 早速ですが、質問です。 XHTML1.0+CSS2.0のwebページで画像を表示するさいに、画像のサイズ指定を【HTML】と【CSS】どちらで設定するのが正しいのでしょうか？ それとも、それぞれには、きちんとした使用規定みたいなものがあるのでしょうか？ この場合は、HTML側で指定する。こーゆー時はCSS側に設定する。 ご教授いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- photoshopスクリプト及びＨＴＭＬについて
前回「ブラウザからphotoshopを実行したい」という質問をさせていただいた者です。 photoshopスクリプトとＨＴＭＬについて、質問させてください。 現在私がやろうとしている事は、 ○ブラウザから値を取得する。 具体的な値は、画像のパスやphotoshopにおける多角形選択ツールで使用したい座標、色（ＲＧＢ値）等です。 ○取得した値でphotoshopスクリプト（javascript）を実行し、画像を生成する。 photoshopスクリプト（javascript）は、加工画像をＪＰＥＧで保存させるところまで完成しています。 ○生成された画像をブラウザで表示する。 といった感じです。 ブラウザからphotoshopを起動、実行できない場合、取得した値をテキストファイルかエクセル等に保存し、photoshopのデータセットに持っていけないかなど考えています。 また、この方法を用いる場合、photoshopの変数定義やデータセットで多角形選択ツールで使用する座標を定義する事は可能でしょうか？ photoshopの変数定義やデータセットでできる事がはっきりわかっていないので、よろしくお願いします。
- ベストアンサー
- HTML
- 画像の背景色とHTMLファイルの背景色
私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。（最高画質・低圧縮率で変換） 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色＆Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 （32ビットだと大丈夫） Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか？ 仕方のないことなのでしょうか？ お分かりになる方、教えてくださると助かります。 よろしくお願いします。
- 締切済み
- グラフィックソフト
- ホームページ作成（ＨＴＭＬ）でのヘッダ部分について
ホームページ作成初心者です。 ソフトは使わずにウィンドウズのメモ帳機能から記述しています。 ヘッダ部分の記述について、以下の２点について教えていただきたいです。 どうぞよろしくお願いします。 ～１～ 本を読むと、ヘッダ部分に記述するのは １、ＨＴＭＬのバージョン指定 ２、文字コードの指定 ３、検索サイト用のキーワード設定 ４、ページ製作者の情報 の４つとありますが、これらの情報はリンクさせるページすべてに入れるものなのでしょうか？ それともｉｎｄｅｘ．ｈｔｍｌで作ったトップページだけに入れればよいのでしょうか？ ～２～ １、ＨＴＭＬのバージョン指定 についてなのですが、本の説明では 「ＨＴＭＬファイルをブラウザが読み取るときに、このＨＴＭＬファイルがどのバージョンなのかをブラウザに知らせるためにＤＯＣＴＹＰＥ宣言を書き入れる。このバージョンに応じてブラウザが適切な表示を行う。」とありました。 この宣言ですが、３種類ほどあることは分かったのですが、 自分で勝手に「これにしよう」って決められるものなんでしょうか？ 「勝手に宣言しちゃってるけど、作った内容がそぐわないじゃん」や、 「勝手に宣言しちゃってるけど、ＰＣ環境（ＯＳとか）が違ってるじゃん」 っていうことはないんでしょうか？ よく分ってなくってすみません。 よろしくお願いします。 過去質問検索しましたけど見つけられませんでした。 すでに回答あったらごめんなさい。
- ベストアンサー
- オフィス系ソフト
- イメージマップと画像のスライスについて
できればイメージマップで作業したいのですが 画像をスライスしてリンクを張るほうがいいのでしょうか？ SEOで不利な点などあるのでしょうか？ いちおう自分なりに調べてみたのですが知らない事も あるのではないかと思うので、両者メリットデメリットなど よろしければ教えてください。 なぜイメージマップかというと追加変更するかもしれないので スライスしなおす事や、画像やHTMLの管理のことを考えて 手間を掛けたくないからです。 （素人が変更することも考慮してFlashは使わないのを前提にしています。） あとイメージマップでhover時に変化をさせたい・・・・ というのは不可能なのでしょうか？ （最悪スクリプトでマップエリアの座標を取得して描画とかも できそうなのですが・・・）
- ベストアンサー
- HTML
