![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
webページ作成の初心者です。
dreamweaverCS4で個人のサイトを作っています。
ブログ風のページで、複数の画像とそのキャプションを
一枚一枚背景画像におさめたいです。
イメージとしては、ポラロイドカメラのように
一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、
それを複数枚並べていく感じです。
掲載しなければいけない写真がすでに数百点に及ぶのですが、
問題はその写真一枚一枚の縦横のサイズがすべて不定形なのです。
そのような写真の背景にさらに不定形の背景画像を設定するにはどうしたらよいでしょうか?
4隅と、その中間の繰り返し画像が必要なのはイメージ出来ますが、
肝心のタグをどうしたらいいのか分かりません。
それをCSSを使って定義するには具体的にどのようにしたらよいか、
教えてください!
宜しくお願いします。
No.2ベストアンサー
- 回答日時:
>縦横サイズが非常にまちまちです。
≫一つの枠の中に画像が一枚と短いコメントが一言ずつ入って、それを複数枚並べていく感じです。
>このような無理難題で申し訳ないですが、対処法はあるのでしょうか?
可能です。
写真枠(ul#photoList li)を縦横サイズを固定したブロック(display:block)にすること。
画像とコメントを話したくない場合は
<li>
<div>
<p>
<a href="./photo/001.jpg"><img src="./thumbnail/001.jpg" width="200" height="150" alt="富士山">
</p>
<p class="comment">芦ノ湖から見た富士山</p>
</div>
</li>
とdivで囲んで配置を指定してもよいでしょう。
★素の画像を大量に読み込ませるのは負荷が大きすぎるので、サムネイルを用意してそれから素の画像にリンクさせるか、javscriptで小窓を表示させるかがよいとは思います。CSSで拡大画像を表示させてもよい。
この回答への補足
divで個別に縦の幅を指定したらできました!
有り難うございます。
あと、度々ですみませんが、
サムネイルというのは小さめの画像を一つのページにまとめて表示しておいて、
見たい画像をユーザーがクリックすることで拡大画像が表示されるということでしょうか?
今作っている写真のページは、素のサイズの写真を一覧表示したかったので
わざわざクリックをして拡大表示ということはしない予定です。
それとも、見え方は一緒でもこうした方が負荷がかからない、という意味でしょうか。
今まで<img>だけで配置していましたが、前述の<a href>はなんの意味があるのでしょうか。
(</a>で区切ってないのを他のサイトでも見つけて不思議に思っていました。)
No.1
- 回答日時:
HTML自体は、文書構造どおり書けばよいです。
[サンプル}
<ul id="photoList">
<li>
<p><a href="./photo/001.jpg"><img src="./thumbnail/001.jpg" width="200" height="150" alt="富士山"></p>
<p class="comment">芦ノ湖から見た富士山</p>
</li>
・・・以下同様
</ul>
サイズデータ、およびサムネイルの作成はimagemagickを使って一挙に可能です。サーバーにimagemagick/perlMagickがあれば、動的に可能ですが、ここはローカルでの方法
1) imageMagickを使って、サムネイルを作成。
2) imgemagickを使って画像名とそのサイズを取得しテキストファイルに書き出す。--perlで処理するのが楽ですが、コマンドプロンプトからも可能
3) テキストエディタのの置換処理を使って、画像ファイル名とサイズリストからHTMLを作成。
CSS)
ul#photoList{
display:block;
position:relative;
width:80%;
margin:0op;
psdding:0px;
}
ul#photoList li{
display:block;
list-style:none;
margin:5px;
padding:10px;
background-color:white;
border-top:black 1px solid;
border-left:black 1px solid;
border-right:rgb(60,60,60) 1px solid;
border-top:rgb(60,60,60) 1px solid;
text-align:center;
float:left;
}
ul#photoList li p.comment{
text-align:left;
text-indent:1em;
}
とか・・・・
floatで、ディスプレイ/ウィンドウ幅に合わせて一列に並ぶコマ数は変わります。
この回答への補足
回答ありがとうございます。
その通りにやってみたのですが、また問題が一つ。
float:leftにするとウインドウ幅に合わせて2つずつ並んだのですが、
左側にくる写真の縦のサイズが右側の写真より大きいと
次の行にくる一枚目の写真が1枚分のスペースを空けて右側に表示されます。
ならば全ての写真の縦サイズだけでも合わせてやるといいのかとも思ったのですが、
写真に入るキャプションも1行だったり2行だったり3行だったりときています。
今回、サイトのリニューアルなるので、文字・写真の素材はすでにあって、
さらにあまり知識のない人が写真を好き勝手トリミングしたことにより
縦横サイズが非常にまちまちです。(横サイズは比較的そろっていますが…)
このような無理難題で申し訳ないですが、対処法はあるのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- Illustrator(イラストレーター) イラストレーターで文字の背景に自動で入れた長方形の左側の角だけ丸く(右側だけ直角に)する方法 4 2023/04/21 11:08
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- 写真・ビデオ マイナポイントの申請ではじかれた(写真背景問題) 8 2023/02/26 12:45
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- その他(ブログ) 画像をタップしたら別の画像に飛ぶように設定出来るブログ 2 2022/08/10 16:20
- フリーソフト GIMPの使い方 1 2022/07/11 13:52
- Google+ 画像にうつってる人が誰か検索できる方法はありますか? Googleの画像検索を使うと、その人が来てい 2 2022/12/12 20:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
リンク画像の背景を反転させな...
-
画像の背景を透明にしたい
-
background-sizeでcontainする...
-
ページごとに背景画像を変更し...
-
フッターの背景に色を指定した...
-
【至急お助け!】チェックボッ...
-
htmlタグで背景に画像を敷き詰...
-
CSSでローマ数字と○1などを画像...
-
ひとつの画像をWEBで異なる小さ...
-
マウスオーバーで透明の白い幕...
-
background-sizeの背景で最小値...
-
IMGタグで画像の繰り返し使用は…
-
background-repeat CSS で切れ...
-
<div> で テキストを下揃えにす...
-
ホームページの枠に影をつける...
-
画像をリンクボタンにして文字...
-
スマホ画面の背景を縮小したい。
-
CSSで背景画像指定
-
背景画を固定し、尚且つ、フィ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
lightbox2で画像を天地左右中央...
-
コーディング中、右側に謎の余...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
背景画像をリピートさせない方...
-
CSSで背景画像をランダムに表示...
-
フッターの背景に色を指定した...
-
透過gif画像の上に文章を重ねる...
おすすめ情報