
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
ブロック要素に入れてブロック要素の幅を画像と同じにすればいいです。
<div style="width:140px;">
<img src="" alt="" style="width:140px; height:40px;">
<p>ここに説明文を書く。</p>
</div>
横に幾つか並べたいなら、divにfloatを利用します。
divはNo.3の方が言うように、文法次第でちゃんと意味のある要素に変えたほうがいいでしょう。
No.3
- 回答日時:
CSSでデザインすることになりますが、そのためには
【引用】____________ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )]より
で、まずきちんとマークアップしましょう。
あなたの写真と説明は、あなたの考え方次第でいくつかのマークアップの方法が考えられます。
例1(リストでマークアップする。)
<ol>
<li><h3>Cattleya</h3>
<ul>
<li class="photo"><img src="[URL]" width="320" height="240" alt="Cattleya1"></li>
<li class="data">
<ul>
<li class="Camera">カメラ・レンズ:***</li>
<li class="filme">フィルム:</li>
<li class="date">撮影日時:</li>
<li class="point">撮影場所:</li>
</ul>
</li>
<li class="comment">花の女王といわれる蘭の代表的品種</li>
</ul>
</ol>
このように、マークアップさえ、きちんとできれば、あとは写真とメッセージを、表示するしないを含めて自由に配置できます。
デザイン例
写真のサイズに合わせて、2mm程度の白い枠をつける。
その枠の右と下には、濃い影をつけて写真を浮かせてみせる。
タイトルと撮影データは表示しない
コメントは写真の幅に合わせて表示する。段落最初の文字は1文字字下げする。
写真は、画面の幅に応じて適当な枚数を表示する。
画面が狭けりゃ1,2枚だけど、ワイドディスプレイだと5,6枚が並ぶ
背景は黒っぽい画像にして、固定する。
・・・・・・・・・・・・
なんて、比較的簡単に出来ます。
なにはともあれ、適切なHTMLを書くこと。その後で、それを「どのように配置したいか」を質問されたらよいと思います。
No.2
- 回答日時:
例えば以下のような html だとして
<div class="photo-frame">
<p><img src="myphoto.jpg" width="200" height="100" alt="わんことにゃんこ" /></p>
<p>
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
わんわんわん にゃんにゃん わんわんわん にゃんにゃん わんわんわん にゃんにゃん
</p>
</div>
わんわんわん にゃんにゃん を自動的に写真の幅におりかえすのは、CSS だけでやる方法は自分は思いつきませんでした。
どうしても自動的にやるなら、javascript で・・・
<script type="text/javascript">
var divlist = document.getElementsByTagName('DIV');
for (var i = 0; i < divlist.length; i++){
if (divlist[i].className == 'photo-frame') {
divlist[i].style.width = divlist[i].getElementsByTagName('IMG')[0].width;
}
}
</script>
こんな感じのを </body> の直前にかいておけばいけるかと。
No.1
- 回答日時:
はじめまして
質問文からだけでは正確なイメージをつかめませんが、以下のように
<DIV>でくくったらできると思います
<DIV>
<IMG …></IMG>
<P>説明</P>
</DIV>
この場合、DIVに幅を指定しなければ、自動的に写真の幅になります。
http://css.uka-p.com/
http://www.2step-css.com/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- 写真 証明写真の作り方!! ご回答頂けると幸いです…。 学生証の写真を証明写真として使うやり方について 質 2 2022/05/04 13:51
- メルカリ メルカリにて 商品の写真には商品説明欄と違う物の掲載があるのに 発送されてきたのは、説明欄にある内容 5 2022/06/02 04:58
- iPhone(アイフォーン) 同じ写真と動画をiOSが検出する便利な機能 写真のアルバムタブにて、画面を一番下までスクロールすると 3 2023/01/23 15:41
- 数学 8の倍数の証明(nの倍数の証明)をするとき、 k,lを整数とすると、−8(k+l)が8の倍数って答え 3 2022/12/02 17:59
- 図書館情報学 著作権について(再質問で申し訳ありません) 1 2022/09/16 23:32
- その他(悩み相談・人生相談) 著作権法違反になりますか? 6 2023/03/28 19:08
- 写真・ビデオ 写真や動画を保存する、これらを満たしたサービスはありませんか。 ・iOS, Android, Mac 2 2023/07/30 18:35
- Illustrator(イラストレーター) イラストレーターで画像を適切な大きさで組み込みたい 2 2022/07/10 19:19
- モテる・モテたい 下記の女性の顔面偏差値や、 モテ度はどれぐらいだと思いますか? 年齢は20代、身長体型は普通とします 2 2023/07/22 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html <ul></ul>の並びで一行空...
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
HTMLで組織図を作成する方法
-
レスポンシブWebデザインでリン...
-
ドロップダウンメニューが隠れ...
-
(HP作成)メニューバーのプル...
-
要素がランダムに並び替わりません
-
なぜ?マウスオーバーで1pt位置...
-
htmlの<ol>タグで、数字などを...
-
テーブル内のプルダウンの下に...
-
list-style-type部分だけ大きく...
-
<li>タグの数が増えすぎたので...
-
HTML5のfooterに見出しを付けて...
-
ページを開いているときのリン...
-
「CSS」リストの2段組どのよう...
-
全ページに共通のヘッダーを置...
-
htmlのolやulなどlistにtitleや...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
html <ul></ul>の並びで一行空...
-
htmlの<ol>タグで、数字などを...
-
divタグ内のコンテンツが重なっ...
-
ページを開いているときのリン...
-
ドロップダウンメニューが隠れ...
-
【CSS】メニュー上部に固定させ...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
list-style-type部分だけ大きく...
-
<li>の中の<h>だから!ルール違...
おすすめ情報