- ベストアンサー
HTMLコーディングでデザイナーから渡されたデザインをうまく組む方法が分からない
- デザイナーから渡された画像デザインをHTMLコーディングする際、特にコンテンツの部分が難しいです。
- コンテンツの背景画像には、ドット部分とグラデーション部分が混ざっており、高さが変わることが問題です。
- また、メニュー部分も左右でボーダーの長さが異なるため、困っています。
- みんなの回答 （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/997)
ドットは背景で表示して、グラデーションはJAVAスプリクトのレイヤで表示 やり方はググれ。
お礼
回答ありがとうございます。 自分なりにやってみたらなんとかできました。
お礼
回答ありがとうございます。 自分なりにやってみたらなんとかできました。