• 締切済み

ホームページ作成における画像サイズについて

　はじめましてwatawataといいます。 　現在、外部スタイルシート利用して自社のホームページ制作を担当しています。そこで、素材集から取り込んだ、background-imageプロパティでイラストを乗せたいと思うのですが、画像サイズの調節で困っています。 　素材集の元画像は550px * 549pxなんですが、ホームページ上のイラストとしては大きすぎるので、編集ソフト（MS PhotoEditor）で５０％にリサイズしました。すると画面上(800px*600px)でもわかる程にギザギザした画像になってしまいました。 　当然といえば、当然なのかもしれませんが、これを回避する方法や参考になる情報がありましたら、アドバイスいただけると幸いです。 　

みんなの回答

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

MS PhotoEditor　失礼ながらその程度の物です。 縮○も簡単便利でしたが、ちょっと意思と反する所がありました。 （趣味の画像でしたら十分ですが） 商用でのサイトなら有料ソフトを利用するべきです。

noname#75066
noname#75066
回答No.2

縮小専用。というフリーソフトを使うと画像をきれいに縮小できます。 失礼ですが画像サイズの変更が許可されている素材なんですよね？ 余計なこととは思いましたが気になりましたので…

回答No.1

基の画像がどういったものですか（線画、写真系）？ 保存形式（拡張子）は？ スムースな画像にしたいなら、保存形式は「.jpg」形式が有利です。 ただ、それ以前に、「ギザギザ」が気になるほどなら、画像のコントラストを調節した方が、背景画像としては適切と思いますが.... 派手な背景は、テキストを読み辛くさせますよ。

watawatasa
質問者

お礼

　BoysBeAmbisiousさん早速のご回答ありがとうございます。 　補足をさせていただきます。 　まず、画像は背景が白の色数もさほど多くないイラストです。ファイル形式は基画像も新たに作ったもものもJpegを使用しています。実際に使用は文字にかからないようにワンポイントとして使っています。気になっているギザギザという画像がにじんだような感じです。 　説明が不十分で、申し訳ありませんでした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------

  • ホームページの画像制作について

    ウェブ制作の画像について質問があります。 私はホームページの画像を制作する場合、 イラストレーターか、フォトショップを使用しています。 しかし、なぜか画像が荒くなってしまいます。 解像度も高くしても、文字がギザギザしたりしてしまいます。 原因がわかりません。 Fireworksを使用すると綺麗な画像になるのでしょうか。 もしくは、他の方法があるのでしょうか。 お忙しいところ、恐れ入りますが、 回答どうぞよろしくお願い致します。m(_ _)m

  • ホームページの作成について教えてください。

    ホームページの作成について教えてください。 現在、HPのインデックスページの上部のh1のところに画像とテキストを載せ、 テキストの表示はHP上では見えないように設定しています。（画像のみが見える状態） これを、画像を消して、テキストが表示されるように直したいのですが、 画像を消すことはできたのですが、テキストを表示させる方法がわかりません。 htmlタグは <h1><a href="index.html"><span>文字列</span></a></h1> となっており、 cssは body { background-color: #E8E4DF; margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,p { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; font-weight: normal; font-size: 80%; margin: 0px; padding: 0px; } ul,li { list-style-type: none; margin: 0px; padding: 0px; } li { font-size: 80%; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; color: #333333; } a span { display: none; } .clear { margin: 0px; padding: 0px; clear: both; } a:link,a:visited { color: #CF5B01; text-decoration: underline; } a:hover { color: #663300; text-decoration: underline; } となっています。 初心者のため、どこをどう直したらよいのかわかりません。 どなたか御教授お願い致します。

  • ホームページに画像を貼りたい

    ホームページを作成している初心者です。画像を貼りたいのですが、テキストを見ながらやってもうまく行かないので、みなさん良ければ貼り方を教えてください。 <head> <meta charset="utf-8"> <div><title>日本語</title> <link rel="stylesheet"href="style.css"> </head> <body> <h1>初めてのホームページ作成<em>頑張っています☆</em>クレヨンしんちゃん</h1> <h2>camera </h2> <h3>peoples <em>photo</em></h3> <p id="def"> train<br></p> <p class="abc"><strong>yamagata</strong><br></p> <div><p><q>consent</q> <small>town</small> tea<br></p> <p><a href="http://www.yahoo.co.jp">日本語</a> <a href="http://ch.441108.com">楽しい<br></a> <a href="http://www.biccamera.com"/>何でも揃う、ビックカメラ</a> <p id="sample1">HEART</p> <p id="sample2">たれぱんだ</p> 桜が咲く</div> </p> <p1>コロコロ</p1> </body> </html> ↑これがHTMLです。 html,body{font-size:30px;line-height:1.5;} {margin:0; height:100%;} body{ background-image:url(myfile/original.jpg); background-repeats:no-repeat; background-position:center;} h1{ text-decoration: underline; text-shadow: -3px 3px 3px #f0f; color:#000000;opacity:0.7; text-align:left;color:yellow; } h1 em{color:blue;} h2{ text-decoration: overline; font-size:60px; font-style:italic; text-shadow: -3px 2px 3px red; color:pink; text-align:center;} h3{ font-size:60px; letter-spacing:-1px; text-transform:capitalize;} h3 em{color:red; font-style:normal;} p {text-indent:1em;font-size:30px;color:black; } p:nth-child(odd){ color:black; background-color:blue;} #def{color:purple;} p:nth-child(even) {color:white; background-color:lime;} p::first-letter{ color:white; background-color:black;} .abc{color:orange;} p{color:maroon !important;} a:link{color:black;} a:visited{color:green;} a:hover{color:orange;} a:active{color:aqua;} #sample1{border-style:solid;} #sample2{border-style:double;margin:30px;padding:20px;text-align:center;font-weight:bold;} p1{padding:3em; color:white; background-color:silver; border-radius:10px;} ↑これがCSSです。

  • 背景画像について

    ブログの左右に空きがあるので空きの背景に イラストを入れました。 左右別のイラストを入れたいと思っていますがカラムを増やさずに 左端と右端にイラストを入れた１０００PXのGIFを使って背景を設定しましたが、PCのディスプレーによって左右の幅が自動調整されているようです。 固定する方法を教えてください。 スタイルシート body {background: url("http://***.ne.jp/***/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;}

  • ホームページ作成について。

    いつも、お世話になっております。 今回、一からサイトを作るのに当たってぶち当たった壁があり どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。 写真を展示するページを二分割上下のフレームを作ってるんですが このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。 メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等) をいくら調節しても、重なってしまいます。 http://cilo.web.fc2.com/photo-studio-room.html 上のURLが問題のページです・・。 そして下のが問題のスタイルシートです・・。 html{ scrollbar-arrow-color:#ccc; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ccc; scrollbar-track-color:#fff; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-color:#fff; } body{ background-image: url(); background-color:#fff; background-position:right top; background-repeat: no-repeat; background-attachment: fixed; padding:0; margin:0; text-align:left; } #sub{ width:980px; height:800%; } .main{ margin:10px 20px 10px 0px; padding:0px 0px 70px 0px; text-align:left; font-size:12px; line-height:1px; font-family:Verdana,Osaka,'MS P Gothic'; color:#999; } h1{ font-size:12px; color:#666666; text-align:right; font-decoration:none; font-weight:normal; font-family:'Georgia',Verdana,Osaka,'MS P Gothic'; margin:0px 270px 20px 0px; padding:0px 80px 0px 0px; } h2{ font-size:12px; color:#666; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; text-align:left; letter-spacing:10px; line-height:20px; text-decoration:none; margin:30px 0px 0px 10px; padding:5px 13px; } h3{ font-size:11px; color:#333; text-decoration:underline; margin:5px 10px; padding:0px 9px; } /* メニュー部分の設定 */ #menu { text-align:center; letter-spacing:3px; } #menu ul{ list-style:none; margin:50px 0px 0px 0px; padding:0px; } #menu li{ display:inline; } #menu li a{ display:block; color:#666; border:1px solid #666; background-color:#fff; margin:10px 55px 0px 35px; padding:5px; } #menu li a:hover{ background:none; } /* テキスト設定 */ .1{ line-height:15px; padding:10px 10px 0px 10px; } /* メルフォ設定 */ form table{ margin-left:30px; } td.name{ width:8em;color:#000; text-align:right; padding:5px; float:left; } input.name{ width:20em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } input.url{ width:25em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } textarea.text{ font-size:10px; line-height:15px; border:solid #000 1px; margin:0.5em 0; padding:0.5em; } td.post{ text-align: center; } input.post{ width:60px; height:21px; color:#000; font-size:10px; line-height:12px; background:transparent; border:solid #000 1px; text-align:center; margin:0.5em 0 0 1em; padding:0; } /*　リンク　*/ a{ text-decoration:none; } a:link{ color:#999; } a:active { color:#999; } a:visited{ color:#999; } a:hover{ color:#00ccff; } /* 画像のボーダーを0にする */ img { border:none } /* カーソル設定 */ body{cursor:url();} a{cursor:url();} ご回答よろしくお願いします。

  • ホームページで画像を表示するには

    ホームページを作ろうと思ったのですが 初心者向けの作り方☆みたいなサイトを見ても パソコン用語だとかわかんない説明で書いてあってヤバいです。 なんか英語がつらつら書いてあるちっちゃいページで作っていくんですよね？ それで、自分でスキャンした画像とか素材とかを表示させたいんですけど、 bodyの後にbackgroundだか何だか入れて画像の名前（なんちゃら.jpg）を入れればいいって 書いてあるんですが… 入れても表示されないんですが… どうすればいいですか？ 超初心者なので 分かりやすく教えていただけるとありがたいです。

  • 背景画像がきれます

    以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で（小さい画像）では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか？上記htmlが間違っているのでしょうか？それともう少し大きくして画像が切れない方法はないのでしょうか？よろしくお願いします。

  • ホームページへの画像の取り込み

    個人でホームページを作成しようと思っています。 メイン画面の中央にイラスト画像を取り込みたくて、フリー素材の画像を取り込みました。しかし、その画像をページ中央に配置するには、どうしたらいいのでしょうか？ 何か中央寄せする際のタグが必要ですか？

  • ホームページにイラストを入れたいのですが教えて下さい。

    ホームページビルダーでホームページを作成しています。 イラストを入れたいのですが・・・分かりません。 とりあえずイラストを描きデジカメで写真を撮って挿入したのですが画像が汚くて良い方法は無いでしょうか？ スキャナーを使えば綺麗に取り込めるでしょうか。 素材集には良いのが無かったので手書きのイラストを入れたいです。 又取り込んだ画像を編集したいのですが教えて下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する