添付画像を使ったワンポイント配置のサイトを製作したい！
- 添付画像のようなサイトを製作したい場合、パソコン画面に対して内容を中央に配置し、タイトル部分等をワンポイントにはみ出すように配置する方法があります。
- はみ出す部分はタイトル等の下に引くラインで表現し、画像にすることで効果的なデザインを作ることができます。
- また、普通の中央配置のサイトも製作できますが、上手く見えるタグの組み合わせやデザインテクニックが必要です。
- ベストアンサー
添付画像のようなサイトを製作したい場合。
こちらにはいつもお世話になっております。 添付画像のようなサイトを製作したいと考えております。 パソコン画面に対して、内容を中央に配置するのですが、 タイトル部分等をワンポイントにはみ出すように配置したいのです。 添付画像のように、はみ出す部分はタイトル等の下に引くラインです。 はみ出す部分は画像にするつもりです。 このようなはみ出す部分がない、中央に内容を配置するだけのサイトは製作出来ます。 既に製作しております。基本的にdivタグ等を使っております。 自分でも色々調べてやってみているのですがなかなか上手くいきません。 どのようにタグを組めばキレイに見えるか、ご伝授下さいませ。 どうぞ宜しくお願い致します。
- maccccco
- お礼率70% (45/64)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
例えばはみ出す部分だけbodyの背景画像にしたり、ネガティブマージンやポジションを使って左に出すのもいいと思います。 多分一番簡単なのはネガティブマージンを利用した方法だと思います。 <body style="text-align:center;"> <div style="margin:auto;text-align:left;width:800px;"> <h1><img src="header.jpg" alt="タイトル" style="margin-left:-100px;" /></h1> </div> </body>
その他の回答 (2)
- Java-Java
- ベストアンサー率41% (14/34)
背景画像にしたいのであれば 全体幅 + 「この部分」の幅×2(左右分)で画像を作成し、centerで配置してやればいいです。 <style type="text/css"> #content-area { background: url(xxx.gif) no-repeat center top; } #content { margin: 0 auto; width: 500px; } </style> <div id="content-area"> <div id="content"> <p>メインコンテンツ</p> <p>メインコンテンツ</p> </div> </div>
お礼
ご回答ありがとうございました！ 今回は背景画像にしないやり方を選択したので、最終的にNo,2の方のやり方を選ばせて頂きました。 最初の情報が少なく申し訳ありませんでした。 こちらも今後サイトを製作する際に参考にさせて下さい。ありがとうございました！
- kernel_kaz
- ベストアンサー率23% (665/2872)
ページの基本がセンタリングなら、画像の右側を左側と同じだけ白もしくは透過ではみ出して作るのが一番簡単
お礼
ご回答ありがとうございました！ 最終的にNo,2の方のやり方を使う事になりましたが、このようなやり方もあるのだと勉強になりました。 今後の参考にさせて頂きます。
関連するQ&A
- pタグ内、一部の画像のみ左に配置したいとき。
ホームページの記事のページをDIVタグでくくって、 その中の「ｐ」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか？ できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>～</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします！
- ベストアンサー
- HTML
- 一部の画像のみ左に配置したいとき
ホームページの記事のページをDIVタグでくくって、 その中の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか？ できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 宜しくお願いします！
- 締切済み
- HTML
- ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択
ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択についてです。 テーブルタグはレイアウトには使ってはいけない（推奨しない）というのが 書かれていますが、例えば、以下の画像のように複数の画像を整列させて 配置する（商品画像一覧や写真一覧など）のような場合、 テーブルタグで画像とテキストをぶち込むのは駄目なんでしょうか？ まさか、画像１つに対してdiv１個、テキスト１個に対してdiv１個みたいに 対応させ、段組にしていくほうがSEO対策とかプロっぽいんですかね？ 基本的なことですいません。
- ベストアンサー
- ホームページ作成ソフト
- 添付画像が見られません。
添付画像が見られません。 今更ながらお恥ずかしいのですが、質問内容に、添付画像が有るような物に出くわしますが、もともと「ビッグローブ何でも質問コーナー」から勝手にOK WAVEに転居させられたため、画像を見る方法が分かりません。 それらしいアイコンを開けても、別の画面に飛んじゃうだけだし、第一、自分が質問したい事に画像を張り付ける事も出来ないのは、何と無く一方通行な感じで、変です。 そのような経験をされた方、操作方法を伝授願います。 事が事だけに、WEBの貼りつけは、不正なサイトへの誘導として避けますので、よろしくお願いいたします。
- ベストアンサー
- このQ&Aコミュニティーについて
- 画像を添付すると自分が見たサイトまで・・・・・
画像を添付して送り、その画像を開いて見てみると 自分が見たサイトの一部分が見えてしまします。 これは自分のＰＣで見たサイトだから見えるものであって 相手にも同じ状況になるのでしょうか？ なんか、ちょっと嫌だなと思って・・・
- ベストアンサー
- その他（メールサービス・ソフト）
- cssで画像を中央に表示する方法
http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？
- 締切済み
- CSS
- Windows Liveメールの添付画像の配置
Windows 7 Home PremiumでWindows Liveメールを使っていますが、 このソフトで画像を添付したメールを作成すると画像が中央合わせ の配置になってしまいます。 画像を左合わせに配置する設定方法はないのでしょうか？ XPで使っていたOutlook Expressでは、画像添付の配置を選択で きたと思うのですが…。
- ベストアンサー
- その他（メールサービス・ソフト）
- WEB製作に当たってURL横の画像変更について
WEBサイト製作をしているのですが、URL横の画像の設定の仕方がわかりません。 画像というのは、InternetExplolerならデフォルトが「e」の修飾された画像が表示されている部分です。同時に、これはブックマークに入れたときタイトル脇に出る画像でもあると思います。 公式サイトや、個人サイトでも凝ったサイトではここを変更しているサイトも多く見かけます。 やりかたを調べようにもあの部分を何というかわからないので調べようがありませんでした。 どなたかご教授願います。
- ベストアンサー
- その他（インターネット・Webサービス）
- アメブロｃｓｓ 画像を好きなところに配置
アメブロをやっています。 新cssを使用しているんですが、画像を好きなところに配置（添付画像の水色のハートの位置とかに）しようとするため各サイトをまわり、探しています。 画像はリンクなし、固定にしたいです。 新ｃｓｓ用の画像を好きなところに配置するタグを見つけて実行したんですがF５を押しても、何回やっても画像の半分が記事欄の後ろに行きます。 そこから位置をいじっても動きません。 貼り付けているのはこのタグです。 ｃｓｓへは↓ /* ------------------------------------------------------- */ /* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */ /* ------------------------------------------------------- */ .skinFrame2{ width:1000px;/* コンテンツ幅を設定 */ margin:auto;/* 自動中央寄せ */ position:relative;/* 起点指定 */ } #bk001{ position:absolute; top:220px; left:200px; z-index:99;/*重なりの順序*/ } #aifurex1{ position:absolute; top:220px; left:200px; width:130px; height:150px; overflow:auto; background-color:transparent; z-index:100;/*重なりの順序*/ } フリースペースには↓ <img src="画像のＵＲＬ" id="bk001"> <div id="aifurex1"> 文章 </div> 画像URLはアメブロの画像フォルダ→画像URLをコピーからペーストしています。 今までいろんなタグでやってきましたがいい加減できないので詳しく教えていただけると助かります。
- 締切済み
- ブログ
- CSSで画像を常にスクリーンの中央に表示させるコマンドは？
Dreamweaver MX2004を使用して、サイトを作成しています。 ページ構成は至ってシンプルで、背景とその中央に表示される（はずの；）フラッシュ画像です。 具体的には・・・ - <body></body>に画像を背景として表示 - <body></body>の中にdivタグでくくった箱を作り、その中にswfファイル内包 としています。 スクリーンの大きさに関わらず、常に中央にフラッシュ画像(divタグでくくったswf）が表示されるようにしたいのですが、左右の中央揃え（寄せ？）はmargin: auto;で出来たものの、フラッシュ画像が画面の一番上に張り付いたままです。 divタグを<center></center>でくくってみたりもしましたが、結果は同じ・・・ フラッシュ画像を<table></table>に内包してスクリーンの中央に表示させるやり方は知っているのですが、CSSのみで同じ事は出来ないでしょうか？ 色々な本やサイトを調べましたが分かりません。 ご存知の方いらっしゃいましたら、教えて下さい。 ヨロシクお願いします。
- 締切済み
- ホームページ作成ソフト
お礼
ご回答ありがとうございます。 ネガティブマージンを使うやり方ですぐ解決致しました！ こんなに簡単な事だったのか…と反省です(笑) 本当にありがとうございました。