- ベストアンサー
スマホサイトで画像の下部にキャプションを入れる方法
- スマホサイトで画像の下部にキャプションを入れる方法について教えてください。
- 現在、スマホサイトに掲載する画像の下部にキャプションを表示したいです。
- 現在のコードでは、縦画面でキャプションがはみ出してしまう問題があります。どのように修正すれば良いでしょうか？
- m6533753774
- お礼率60% (14/23)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
まず、HTMLを徹底的に復習しましょう。HTMLがきちんとできないとスタイルシートもへったくれもない。 「スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」のですが、それはHTMLからプレゼンテーションの役割を取り除くということです。（構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )） ここらはしっかり読んで理解しておくこと。上っ面だけまねてもダメです。 スマホも他のPC用と同じscreenと呼ばれるメディアですから、スマホ用と区別してはなりません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より HTML5だと <header></header> <section> ・・・記事・・・ <figure> <img src="" width="" height="" alt=""> <figcaption> <p>記事</p> </figcaption> </figure> ・・・記事・・・ <figure> <img src="" width="" height="" alt=""> <figcaption> <p>記事</p> </figcaption> </figure> </section> のようになるでしょう。それより前のHTMLでしたら <div class="header"></div> <div class="section"> ・・・記事・・・ <div class="figure"> <img src="" width="" height="" alt=""> <div class="figcaption"> <p>記事</p> </div> </div> ・・・記事・・・ <div class="figure"> <img src="" width="" height="" alt=""> <div class="figcaption"> <p>記事</p> </div> </div> </div> と、DIVに『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』して構造を示しますね。 これをスタイルシートでデザインして行きます。HTML5用 figure{ width:80%;min-width:380px; margin:0 auto; border[solid 2px white; position:relative; } figure img{ display:block; width:95%;height:auto; margin:5px auto; } figure figcaption{ width:80%;left:10%; background-color:black;color:white; text-indent:1em; position:absolute; bottom:5px; border-radius:5px; } とか・・HTML4.01だと div.figure{ width:80%;min-width:380px; margin:0 auto; border[solid 2px white; position:relative; } div.figure img{ display:block; width:95%;height:auto; margin:5px auto; } div.figure div.figcaption{ width:80%; left:10% background-color:black;color:white; text-indent:1em; position:absolute; bottom:5px; border-radius:5px; } 今日は出かけるのでテストしてませんが、こんな簡単なものでよいはず。HTMLには文書構造しか書いてないので分かりやすいし、当然スタイルシートも分かりやすくなる。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
帰ってきたので、休憩時間中に少しだけ・・。 スマホがメインと言うことで、HTML5で作成したとします。 1) まずHTMLは率直に文書構造だけをマークアップします。 HTML5では、これは特に重要になります。 ・・DIVは原則使いません。 ・・文書構造は要素で示します。 HTML4.01などでは、DIVにclassやidを併用します。(HTML5の新しい要素が参考) 2) スタイルシートで、その文書構造に基づいてデザインしていきます。 ★タブは＿に置換してあるので戻す。 ★画像の縦横比に関わらず横幅の一定比で表示される。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <!--[if IE]> ＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> ＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- html,body{margin:0;padding:0;} header,section,footer{width:100%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} section figure{ width:70%; min-width:470px; margin:0 auto; position:relative; border:solid 5px white; } section figure img{ width:100%; display:block; height:auto; } section figure figcaption{ width:100%; background-color:rgba(0,0,0,0.6); text-indent:1em; position:absolute; left:0;bottom:0; padding:5px 0; } section figure figcaption p{ margin:0; padding:5px 10px; text-indent:1em; line-height:1.6em; } body{background-color:black;color:white;} a:link{color:yellow;} a:visited{color:maroon;} a:hover{color:lime;} a:active{color:fuchsia;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="/Top">Top</a></li> ＿＿＿＿<li><a href="/books">Books</a></li> ＿＿＿＿<li><a href="/links.html">Links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<section> ＿＿＿<h2>A smaller heading</h2> ＿＿＿<figure> ＿＿＿＿<img src="./images/photo/01.jpg" width="480" height="360" alt=""> ＿＿＿＿<figcaption> ＿＿＿＿＿<p> ＿＿＿＿＿＿そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 ＿＿＿＿＿</p> ＿＿＿＿</figcaption> ＿＿＿</figure> ＿＿</section> ＿＿<section> ＿＿＿<h2>A smaller heading</h2> ＿＿＿<figure> ＿＿＿＿<img src="./images/photo/02.jpg" width="540" height="720" alt=""> ＿＿＿＿<figcaption> ＿＿＿＿＿<p> ＿＿＿＿＿＿上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 ＿＿＿＿＿</p> ＿＿＿＿</figcaption> ＿＿＿</figure> ＿＿</section> ＿＿<section> ＿＿＿<h2>A smaller heading</h2> ＿＿＿<figure> ＿＿＿＿<img src="./images/photo/03.jpg" width="800" height="800" alt=""> ＿＿＿＿<figcaption> ＿＿＿＿＿<p> ＿＿＿＿＿＿スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 ＿＿＿＿＿</p> ＿＿＿＿＿<p> ＿＿＿＿＿＿HTML4などでは<div class="figure">のようにする。 ＿＿＿＿＿</p> ＿＿＿＿</figcaption> ＿＿＿</figure> ＿＿</section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>max-width: 380px; >max-width: 382px; ケアレスミスでは？ width指定を見直してみてください。
お礼
talooさん 回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 実は最初は同じ380pxにしてました。 ただそれだと今以上にキャプションの背景がはみ出す結果に。 とりあえず見栄えを良くしようと思い、よりはみ出さない為にはどうすればいいか調整していてこうなりました。 ありがとうございました。
お礼
ORUKA1951さん 回答ありがとうございます。 御礼が遅くなってしまい申し訳ありません。 もっと簡単なのをイメージしていたのですが、難しいことだったんですね。 正直ご提示頂いたコードを見てもさっぱり理解できません。 理解できるようにCSSをもう一度勉強しなおしてみます。 ありがとうございました。