- 締切済み
CSSについての質問です。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
clip
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> ここで、画像の上部を表示するのではなく、元画像の中心を真ん中として表示し、 > 上下均等に切り取って表示する、という方法はあるのでしょうか。 何のためにCSSのoverflow:hidden;を使っているのかが分かりません。 overflowは周囲を削ったりなんだりするためのものじゃなくて下にはみ出した部分をどう表示するか設定するためのものです。 それに切り出したいなら素直に画像を切り出したほうが環境間の差異もなくなると思いますよ。 まぁ、あえてoverflowを使っているのには何らかの事情があるのでしょうけど、そういう場合はその事情を説明したほうが良いです。 で、対処法ですがやはりpositionなどのプロパティを使うべきだと思います。 座標をずらしたり、他の案としては上の辺りに何かをかぶせて隠したりすると良んじゃないでしょうか？^^
- golive001
- ベストアンサー率54% (20/37)
真ん中に指定したい画像に対して、positionを適用してみるのはどうでしょう。 例えば、 #box{ position:relative; width:90px;//任意の幅 height:90px;//任意の高さ overflow:hidden; border:1px solid #ccc; } img{ position:absolute; top:-30px;//調整 left:-20px;//調整 } </style> <body> <div id="box"> <img src="./image/XXXXX.jpg"> <--元画像--> </div> 面倒ですが、思いつくと事としてはこんな感じです。
補足
golive001さん 回答ありがとうございます。 なるほど、確かにpositionが使えそうですね。 あとは、使っている画像のサイズが不特定の時に、都度自動的に 画像の中心が真ん中にくるように設定できればいいのですが・・・。 これはなかなか難しそうですね。
関連するQ&A
- ＣＳＳでテーブルダグのように記述するには？
こんばんわ。 テーブルタグは簡単に中のデータの上下左右の位置指定ができますよね。 たとえば<ｔｄ align="center">でｔｄ内部の画像は真ん中に指定できますよね。 cssでこのように位置を指定するにはどうすればいいのでしょうか？？
- 締切済み
- CSS
- css
プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。
- 締切済み
- ホームページ作成ソフト
- HTML.CSSの質問です
HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。
- 締切済み
- HTML
- ＨＴＭＬ、ＣＳＳの質問です
HTML,CSSを勉強している初心者です。 ＣＳＳでの、ブロックレベル要素のセンタリグについての質問です。 縦のセンタリングはどうすればいいのでしょうか？ 横のセンタリングは、左右のマージンをautoにすると上手くいくのですが、上下のマージンにautoを設定してもセンタリングされません。 縦６００px、横６００pxのdivbox（トップページ)を作って、bodyのなかで縦横ともにセンタリングさせて、モニタ画面の真ん中にdivbox（トップページ）を配置させたいのです。 制作したトップページをサーバにアップロードして、色々なサイズのモニタ画面で見た時に、常にモニタ画面の真ん中に作ったトップページを配置させるのが目的です。 どなたかお知恵をおかしくださいませ。 宜しくお願いいたします。
- ベストアンサー
- CSS
- cssで画像を均等に配置する方法を教えてください。
cssで画像を均等に配置する方法を教えてください。 下図のようなレイアウトをcssで作りたいのですが方法を教えてください。 ・■は画像（一行あたりの個数は固定）。 ・罫線はブラウザの表示エリア（divのボックスです）。 ┏━━━━━━┓ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■■■┃ ┃■■■■ ┃ ┗━━━━━━┛ ・ブラウザのサイズを変えても画像は均等に配置。 ┏━━━━━━━━━━━┓ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ■ ■┃ ┃ ┃ ┃■ ■ ■ ■ ┃ ┗━━━━━━━━━━━┛ できればテーブルを使わずに実現したいのです。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- jquery droppyについての質問
現在jquery droppyを使用したWEB画面を作成しています。 画面右上部にあるメニューにて使用しようとしていますが、 画面内に収まらないサイズでプルダウンメニューが出るとスクロールバーが出てしまいます。 現在はcssでポジションを指定しており、見た目では画面内に収まっているのですが、相変わらずスクロールバーは表示されてしまいます。 付属されていたCSSファイルにも指定するような記述はなく、 スタイルでoverflow:hidden;で指定をしてもうまくいきません。 何か解決に繋がるようなヒントがあれば教えていただきたいと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSで背景画像を真ん中だけに表示
背景画像を画面最上部の真ん中600pxだけに表示したい場合、 外部CSSはどのように表記すれば良いのでしょうか？ 現在 background: url("img/●●.gif") repeat-x top; background-position:0px 0px; と表示してますが、これだと最上部右から左まで画面いっぱいに表示されます。 これをテーブルを使わずに真ん中600pxだけに表示する方法はありませんか？ ※テーブルがダメな理由は、margin:0px;で指定しても、画面最上部1pxだけ空いてしまうからです。 空かない方法があればそれでもかまいません。 アドバイスよろしくお願い致します。
- ベストアンサー
- HTML
- CSSをどう書けばいいでしょうか？
CSSをどう書けばいいでしょうか？ 以下のhtmlを想定しています。flashの表示位置はウインドウの上下中央センターに表示させたいと思っております。 footerは常にページの下部に表示させる予定です。 ページ上にコンテンツが少ないのでスクロールするまでもない状態なのでこのような表示位置を実現したいのですがどのようにすればいいでしょうか？ 下記に書いているCSSに添削をお願いいたします！ #flash { margin: 0 auto; width: 960px; height: 450px; } #footer { margin: 0 auto; width: 960px; height: 150px; } <div id="flash">上下左右の中央に表示されるコンテンツ</div> <div id="footer">常にページ下部に表示されるコンテンツ</div>
- ベストアンサー
- HTML
- list-styleでの画像CSS設定について
list-styleのをCSS設定で画像を指定しています。 文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？ 現在のCSSはこのように設定しています。 .style_1 { list-style-image: url(画像url.gif); } フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。 また、リスト画像とli要素(文章)までの間隔も離したいです。 CSSに詳しい方がいましたら、ご教授下さいませ。
- 締切済み
- ブログ
補足
MAN_MA_RUIさん 返信ありがとうございます。 overflow:hiddenは、例えば、複数の画像を一律60×60で表示するために、 イメージを外側のdivのボックスで無理矢理範囲外の部分を切り取るために 使っています。 背景としては、ユーザーが登録した不特定サイズの画像を、一覧表示させる ために、サムネイルとして表示するのを目的としています。 方法としては、ユーザーがアップロードした画像のサムネイル画像を、 内部で作成してそれをそのまま表示する方法も有ると思うのですが、まだそのやり方が分かっていないので、とりあえず、横サイズだけ指定して縮小して、縦のサイズは、もしはみ出していたら、無理矢理hiddenで切り取って表示しようと考えています。