HTMLコーディングでデザイナーから渡されたデザインをうまく組む方法が分からない
- デザイナーから渡された画像デザインをHTMLコーディングする際、特にコンテンツの部分が難しいです。
- コンテンツの背景画像には、ドット部分とグラデーション部分が混ざっており、高さが変わることが問題です。
- また、メニュー部分も左右でボーダーの長さが異なるため、困っています。
- ベストアンサー
htmlコーディングについて
デザイナーから画像のようなデザインを渡されて、どうコーディングしていいかわからず困っています…。 赤枠が基本ベース（横960px）で、それ以降はブラウザの大きさに合わせて可変ということなのですが、わからないのが、コンテンツの部分でして、ドット部分とグラデーション部分が混ざっての背景画像で、文字や写真の量によっては高さが変わるのでどう組めばいいのかわからず困っています…。 グラデーション部分は常に一番下に配置で、ドットの絵柄部分が高さに合わせて増えるという感じです。 それに合わせて、赤枠外も同じようにグラデーション部分は常に一番下に配置で、ドットの絵柄部分が高さに合わせて増える感じです。 メニューのところも左がボーダー2本が伸びる、右が1本伸びると左右違うのでもうお手上げ状態になってきています…。 すみません書いてて意味わかるかどうか不安なのですが、画像を見てご教授いただきたいです。
- dragon08
- お礼率80% (4/5)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
背景画像についてはCSSのみで可能です。 まず、ドット部とグラデーション部は分けて考えてください。 ドットはそのまま背景画像なので大丈夫ですよね？グラデージョン部は「画面最下部での表示」を固定する必要がありますが、これにはCSSのbackground-attachment等を使用するといいでしょう。細かくいうと長い(というか自分で調べることで身に付けてほしい)ので「CSS 背景 スクロールしても」なんてフレーズで検索してみてください。画像の表示そのものについても割愛します。 メニューの左右も、単に左右に違う画像を配置すればいいだけですね。 あと、以下すごい極論(でも真実)です。 人によって程度は違いますが、「デザイナー」はHTML、CSS、Javascriptでどれだけできるかまるで知らないことが多いので無茶な要求も「何が無茶かわからない」から平気でしてきます。今回レベルならともかく、今後dragon08さんに知識と余裕がついてきたら、無理がある部分についてはなるべくはっきりその旨伝えてあげてください。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
特に難しいレベルではないと思います。 率直に、<hr>をデザインのために入れているくらいで、下記のようなHTMLで出来ます。これ以外に余分な要素や属性を加える必要はありません。基本はとにかく文書をその構造にしたがってマークアップすることです。 背景は、本文に水玉、本文中のulにグラデーション背景かな。 <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<p><span>株 山本</span></p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="menue1">menue1</a></li> ＿＿＿＿<li><a href="menue2">menue2</a></li> ＿＿＿＿<li><a href="menue3">menue3</a></li> ＿＿＿＿<li><a href="menue4">menue4</a></li> ＿＿＿＿<li><a href="menue5">menue5</a></li> ＿＿＿＿<li><a href="menue6">menue6</a></li> ＿＿＿＿<li><a href="menue7">menue7</a></li> ＿＿＿＿<li><a href="menue8">menue8</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<ul> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品１"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品２"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品３"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品４"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品５"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/sample.jpg" width="360" height="120" alt="商品６"> ＿＿＿＿＿<p>ここの簡単な記事が入る。</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿＿<hr> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h3>文書情報</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="./mail">メール</a></li> ＿＿＿＿<li><a href="./pr">プライバシー</a></li> ＿＿＿＿<li><a href="./pp">著作権</a></li> ＿＿＿</ul> ＿＿</div> </body> </html>
お礼
回答ありがとうございます。 自分なりにやってみたらなんとかできました。
- mugi_to_ho
- ベストアンサー率18% (183/998)
ドットは背景で表示して、グラデーションはJAVAスプリクトのレイヤで表示 やり方はググれ。
お礼
回答ありがとうございます。 自分なりにやってみたらなんとかできました。
関連するQ&A
- HPデザインのコーディング方法
デザインのコーディング方法について こんばんは。いつもお世話になっております。 HPのデザインについて質問です。 画像のようなデザインのコーディング方法はどう組んでいけばよいでしょうか？ 画像のようにピンク色の部分（コンテンツ）の後ろにも横の背景を配置して、全体をbackgroundの画像で配置する方法しかないでしょうか？ うまく配置するのは可能でしょうか・・・？ また、星や丸の部分、背景の部分は素材でPNGデータを使っているものが多いのですが、上記の全体をbackgroundの画像で配置する方法にすると、容量が重過ぎるみたいです。 ・PNGデータでなくて、JPGやPSDデータの方がいいのか？ ・フォトショップでなくて、イラストレータで書き出した方がいいのか？ 何かいい方法があれば、教えてください！ よろしくお願いします。
- ベストアンサー
- CSS
- グラデーションの中にテキスト文字をいれる方法
HPV9を使っています。 グラデーション（濃い赤→薄い赤）の四角を作りその中へ任意の大きさの文字を打って見出しを作りたいのですが、どうすればいいのでしょう？ウェブアートデザイナーでグラデーションを作り文字を入力して合成させれば出来るのですが、文字が画像になっています。テキスト文字をグラデーションの中央に配置したいのですが、どうやって作ればいいのでしょうか教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 定義リストのコーディングについて
定義リストのコーディングについて 添付画像のようなデザインを、css3だけで実現可能でしょうか。 ソース <dl> <dt>見出し(1)</dt> <dd>テキストテキストテキストテキスト</dd> <dt>見出し見出し見出し(2)</dt> <dd>テキストテキストテキスト</dd> <dt>見出し(3)</dt> <dd>テキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> ポイント ・見出し（dt）とテキスト（dd）のフォントサイズ・スタイルは違う ・見出しとテキストの文字数＝高さは一定ではない ・リスト部分に背景色あり。一番高さのある項目に合わせて可変 素直にulでやれよという感じですが、リストの意味合い的に、できれば定義リストを使いたく… divやその他のタグの追加は、文書構造的におかしくなければある程度許容できます。 モダンブラウザで正しく見えればokです。 無理そうな気もしますが、もし方法があれば、どうぞご教授ください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 背景画像での表現の仕方
いろいろ調べては見たのですが、よくわからなかったので質門させてください。 例えば背景用画像で下からのグラデーション＋円の画像があったとします。 その画像を左下に配置するようにして、右側のスペースは円なしのグラデーションのみが続いているという表示にしたいと思っているのですが、 一番右のピクセルを引き伸ばして表示する。のようなことは可能なのでしょうか？ もしくは他に同じように表示できるやり方などありましたら教えていただけると嬉しいです。 よろしくお願いします。
- ベストアンサー
- HTML
- フラッシュで画像の背景を透過する方法
イラストレーターで描いたイラスト(グラデーションやぼかしを適用した画像)をフラッシュに配置すると背景が白色になってしまったり、境界線がギザギザになってしまったりするのですが、イラストレーターのきれいなラインを保ったままで、背景色も無しで配置する方法は無いのでしょうか？ 下のサイトにある、フラッシュで作られたゲームの画面で、STARTを押すと出てくる２つの機体を 「右クリック」→「拡大」 を繰り返して見てみるとグラデーションやぼかしを使った部分がイラストレーターのイラストのようにきれいなのですがどうやったらこのゲームのイラストのようにきれいに配置できるのでしょうか？ どなたか教えてください。 http://www.geocities.co.jp/SiliconValley-PaloAlto/4039/floatinassult.htm
- ベストアンサー
- Flash
- Webサイト制作におけるPhotoshopの使い方
未経験からwebデザイナーの転職を目指しているものです。 架空のお皿屋ブランドサイトを作成しており、HTML.CSS.JavaScriptで簡単なコーディング、画像配置を終えてあとはデザインを施すだけなのですが、Photoshopでどのような色、デザインをしていけば良いのかわかりません。 これといった正解もなく、画像を少し明るくしたり、画像の中に文字をつけたり、切り取ったりすることくらいしかわからず、どのようにPhotoshopで加工すれば良いできに仕上がるのか全くわからない状態です。 こういった場合どのようにしていけば良いのでしょうか？ 他者の作ったブランドサイトを見て、共通しているデザイン部分を取り入れていけば良いのでしょうか？
- ベストアンサー
- デザイナー・クリエイティブ職
- HTMLでの画像配置
PC初心者です。HTMLの画像配置について教えて下さい。 添付画像のように画像1、2、3と3つの画像があります。 添付画像と同じ配置をしたいのですが、 実際の表示が、画像1の下に、画像3がきてしまいます。 画像2の下に画像3を置きたいです。 どのようにコーディングすればよろしいでしょうか？ ちなみに、ホームページビルダー13を使用しています。 HTMLは詳しくないので、詳細を書いて頂けるとありがたいです。 足りない情報などもありましたら、補足させて頂きますので、 宜しくお願い致します。
- ベストアンサー
- HTML
- フォトショで背景の色にグラデーションをつける方法
下の画像で、白い帯のぶぶんが、左から右に向かうにつれて じょじょに色がうすくグラデーションしています。 このようなグラデーションの背景を作るにはどうすればいいですか？
- ベストアンサー
- 画像・動画・音楽編集
お礼
回答ありがとうございます。 自分なりにやってみたらなんとかできました。