No.2ベストアンサー
- 回答日時:
面白そう(^^)
本当に様々な方法がありますが、文書構造=HTMLが示されていませんので、されたいことがわかりません。
例えば、機器の説明などで画像があったとして、それぞれの部分を200×200で表示したいということでしょうか?
・背景画像としてbackground-positionを使用する。
HTML側には画像は一切記入せずCSS側で可能。
・画像自体をスタイルシートでサイズや位置を指定する。
・他にも文書構造に合わせて色々な手法があります。
例えば2番目の例ですが
img要素は置換インライン要素ですのでwidth,height共にautoで本来のサイズになります。それを利用します。
それを囲むブロックにposition:relative;とoverflow:hidden;を指定して画像自体はrelativeで任意の位置に移動させると、期待通りになるはずです。
>可能なら、どの範囲の部分を表示させるか指定したい(左上とか)
contentプロパティで属性値を指定するのが楽です。content:attr(title)とか・・
そうすれば、HTML側でのメンテナンスだけですみます。
【重要】
HTMLがきちんと文書構造をマークアップできていればドウにでもなります。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
[サンプル]
画像はライセンスの関係もありWikiの物を使用しています。
☆リキッドですから親画像はウィンドウ幅に合わせて伸縮します。
★タブは_に置換してあるので戻す。
★http:はhttp:に置換してあるので戻す。
詳細画像はここではWiki画像を使用していますが、適当な画像でも良いです。contentでオリジナル画像を追加すればすむ事ですから・・
(HTML)
<ul class="sample">
_<li>
__<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
__ width="501" height="" alt="268" style="">
__<ol>
___<li>ヘタ
____<p title="左上"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
____ width="121" height="" alt="54" style="left:-180px;top:-60px;"></p>
___</li>
___<li>表面
____<p title="中央少し左"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
____ width="121" height="" alt="54" style="left:-190px;top:-200px;"></li></p>
___<li>種
____<p title="左中央"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
____ width="121" height="" alt="54" style="left:-640px;top:-240px;"></li></p>
__</ol>
_</li>
</ul>
(CSS)
ul.sample,ul.sample li,ul.sample ol{display:block;margin:0;padding:0;list-style:none;}
ul.sample{width:70%;margin:0 auto;position:relative;}
ul.sample li img{width:100%;height:auto;}
ul.sample ol li{display:inline-block;width:200px;}
ul.sample ol li p{width:200px; height:200px;overflow:hidden;position:relative;}
ul.sample ol li img{width:auto;height:auto;position:relative;}
ul.sample ol li p:after{content:attr(title);position:absolute;top:5px;left:5px;background-color:white;padding:3px;}
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルで指定範囲にある名前と重複した場合に入力できないようにしたい 1 2023/07/13 09:58
- Excel(エクセル) エクセルの数式について教えてください。 2 2023/03/04 09:54
- Visual Basic(VBA) 【VBA】Excelの特定範囲のセルを画像で保存したい 2 2023/01/25 13:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- 地図・道路 GoogleMapなどの地図上で「任意の組合せ」の「複数の町」の境界を表示させたい(画像保存したい) 1 2022/08/25 11:05
- Excel(エクセル) エクセルシートのPDFでの保存 2 2022/09/06 13:05
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- Visual Basic(VBA) ChatGPTに作らせたい Excel VBA 1 2023/04/05 19:56
- Excel(エクセル) Excel2019 マクロを使用し画像を貼り付けした際のリンク切れについて 2 2022/11/15 16:14
- Excel(エクセル) 条件付き書式 ある範囲で色がついているセルと同行の別のセルに色を付けたい 4 2022/04/20 07:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
<hr>の縦バージョンはありますか?
-
ページごとに背景画像を変更し...
-
iframe内をクリックさせない方...
-
画像の上に
-
IMGタグで画像の繰り返し使用は…
-
webページ作っているのですが、...
-
画像とその下にあるテキストの...
-
リストビューのTextBackground...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
CSSで背景画像をランダムに表示...
-
HTMLです 店主のこだわりという...
-
背景画像がずれる現象について
-
CSS マウスオーバーでテキスト...
-
コーディング中、右側に謎の余...
-
背景部分を透けさせてデスクト...
-
ボタン(画像)をクリックする...
-
画像の上にテキスト配置で、拡...
-
Safariでのひどいレイアウト崩れ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報