締切済み

HTML(レスポンシブ)画像の均等方法

2015/03/10 01:19

レスポンシブ機能による、３枚の画像の間隔を均等にする方法を教えて下さい。 <section id="link_down" class="clearfix"> <h4>Web Site Link</h4> <figure class="link"><a href="#"><img src="img/icon_4.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_5.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_6.png" alt="#"></a><figcaption>example</figcaption></figure> </section> コードはこちらです。画像サイズは固定でお願い致します。ブレイクポイントは600pxです。（600px以上で横並びに均等にします) marginやpaddingを%で設定したのですが、700pxまでは均等なのですが、1000以上となると、左寄りになって均等になりません。よろしくお願い致します。

sato_tokutoku
お礼率0% (0/16)

HTML
回答数2
ありがとう数0

回答全件

幅33.3%のブロックを3つ作って、それぞれに画像を入れて text-…

2015/03/12 03:29

解答にはなっていません！　考え方のヒントです。ご存じだとは、思いま…

2015/03/10 09:49

みんなの回答 （2）
専門家の回答

みんなの回答

sanzero
ベストアンサー率56% (58/102)

2015/03/12 03:29 回答No.2

幅33.3%のブロックを3つ作って、それぞれに画像を入れて text-align:centerとすればいけませんでしょうか。

全文を見る

ログインすると、全ての回答が全文表示されます。

noname#206842

2015/03/10 09:49 回答No.1

解答にはなっていません！　考え方のヒントです。ご存じだとは、思いますが？・・・ figureタグは、図表であることを示す際に使用します。イラスト・図・写真・ソースコードなどのことです。レイアウトに使用するタグではないのでは？・・・ divタグで、３分割のレイアウトを作り、その中に、各sectionを、記述する。なぜ今更divを使うのか？・・・ article（記事）の中に、header,nav,各sectionがあり、Hn(見出し)P(段落）が、存在し,footer 補足が、asideというように理解すると、ではレイアウトは？・・・ということで、divを使うことになります。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

HTMLについて
javascriptの勉強をしております。そこでわからないことがあり、質問させていただきます。コードは <article id="main"> <section id="photogaray"> <a href="#" id="prev"><img src="prev-arrow.png" alt="左矢印" /></a> <a href="#" id="next"><img src="next-arrow.png" alt="右矢印" /></a> <div id="photocontents"> <h2 id="phototitle">題名</h2> <p id="photodate">日付を入力する箇所</p> <p id="sw">画像が入る部分</p> <p id="more"><a href="#" id="morelink">more</p> </div> <section id="thumbnailbox"> <ul id="thumbnail"> <li><a href="no1_big.png"><img src="no1.png" alt="2009-07-01" /></a></li> <li><a href="no2_big.png"><img src="no2.png" alt="2009-07-02" /></a></li> <li><a href="no3_big.png"><img src="no3.png" alt="2009-07-03" /></a></li> <li><a href="no4_big.png"><img src="no4.png" alt="2009-07-04" /></a></li> <li><a href="no5_big.png"><img src="no5.png" alt="2009-07-05" /></a></li> <li><a href="no6_big.png"><img src="no6.png" alt="2009-07-06" /></a></li> <li><a href="no7_big.png"><img src="no7.png" alt="2009-07-07" /></a></li> </ul> </section> </section> </article> </body> で cssは @charset "utf-8"; /* CSS Document */ h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,object { margin: 0; padding: 0; } html,body { margin: 0; padding: 0; height: 100%; } body { font-size: 16px; } * html body {font-size: 100%;} *:first-child+html body {font-size: 100%;} /* block elements */ h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } li { list-style-type: none; } hr { display: none; } address { font-style: normal; } /* table */ table { border: 0; border-collapse: collapse; border-spacing: 0; } th,td { padding: 0; font-weight: normal; text-align: left; vertical-align: top; } /* form */ textarea { font-size: 100%; } /* inline-elements*/ img { border: 0; vertical-align: bottom; } object { vertical-align: bottom; } em { font-style: normal; } a:link, a:visited {} a:hover, a:focus, a:active {} #header { height:80px; background-color:#000000; } #header h1{ font-size:300%; color:#FFF; text-align:center; padding:10px; } section#photogaray{ width:800px; margin:0 auto; } a#prev{ float:left; margin:200px 0 0 20px; } a#next{ float:right; margin:200px 20px 0 0 } div#photocontents{ width:585px; float:left; } h2#title{ font-size:300%; font-weight:bold; } #photodate { float:right; } p#date{ float:right; } #sw { text-align:center; margin:20px; } #photogray{ clear:both; margin: 10px 0; text-align: center; width:585px; } section#thumbnailbox{ clear:both; width:800px; margin:0 auto; margin-top 10px; } ul#thumbnail{ display:block; text-align:center; } ul#thumbnail li{ float:left; margin-left:10px; } ul#thumbnail li a.on { display:block; border: 2px solid #000000; } #title_ul{ clear:both; } です。これで何がわからないかというと Firebugというデバックツールで確認しながらやってるのですが、 <ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li> が二つ入っています。 javascriptのせいかもと思い、javascriptを全部消して実行してみたところやはり<ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li> がはいっていました。ブラウザはfirefox9.0.1 HTML5で書いたつもりです。どなたかなぜ上記のような現象がおこるのか教えていただけますでしょうか。
- ベストアンサー
- HTML
imgタグとレスポンシブについて
imgタグとレスポンシブについて imgタグなどのようなインライン要素は、ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。うまくぴったりのサイズになりません。スマホでは消えます。またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？～ <td class="copyright"> <address> 〒***-***　**県**市**町 1-5-10　<span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>
- ベストアンサー
- CSS
画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。　　　　　　←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■　←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているようなかんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのがいけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。どうぞ宜しくお願いします。
- ベストアンサー
- CSS
cssスプライト　positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
レスポンシブなサイトがうまくいかない
レスポンシブなサイトを作っているのですが、 navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですがうまくいきません。 <ul class="futtnavi"> <li><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/yourinfo.png" alt="個人情報の取り扱い" width="146" height="17" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <span> <li><img src="img/base/aboutus.png" alt="観光協会について" width="129" height="19" /></li> </span> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/faq.png" alt="FAQ" width="40" height="17" /></li> </ul> CSS /*Responsive /br*/ td.copyright span:before { content: "\A"; white-space: pre; } ul.futtnavi+li+li+li+li+span li,ul.futtnavi+li+li+li+li+span+li,ul.futtnavi+li+li+li+li+span+li+li { display: inline-block; margin-top: 1em; } どのようにしたら出来るでしょうか？もちろん@media screen and (max-width: 320px)などは入れています。そちらの問題では有りません。
- ベストアンサー
- CSS
<ul><li>で画像が均等配置せずレイアウト崩れ
<ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。いつもお世話になります。添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか？どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。 ●HTML <div id="rightmenu"> <div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用 <div id="rightbox-inside-txt"> <p class="title">タイトル</p> <p class="standard-title">コンテンツ内容</p> <p class="standard"> <ul id="resultList"> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> <li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li> </ul> </p> </div> <div style="clear:both; "></div> <div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用 </div> </div> </div> ●CSS #rightmenu { width:645px; float:right; padding-top:20px; background:url(../images/rightbox-top.png) no-repeat; } #rightbox-inside { background:url(../images/rightbox-inside.png) repeat-y; } #resultList { overflow:hidden; margin:0 25px 0 30px; padding:0; list-style-type:none; } #resultList li { display:inline; float:left; margin:0; padding-right:10px; } #resultList li.mustright { float:right; padding-right:none; } #resultList li a { display:block; } #resultList li a img { display:block; width:110px; height:100px; border:0; } #rightbox-buttom { clear:both; }
- ベストアンサー
- CSS
【HTML】画像と画像の間に「_」が入ってしまう
画像のように勝手に画像と画像の間「＿（アンダーライン）」が入ってしまいます。どのようにすればこのアンダーラインを消せますか？ ■HTML■ <div id="imglink"> <a href="hogehoge1"> <img src="hogehoge1" width="88" height="31" alt="okwave"> </a> <a href="hogehoge2"> <img src="hogehoge2" width="88" height="31" alt="okwave"> </a> <a href="hogehoge3"> <img src="hogehoge4" width="88" height="31" alt="okwave"> </a> </div>
- ベストアンサー
- HTML
HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。わかる方居ましたらお願いします。現在こんな感じです <p><font color="#f70006">   <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- ベストアンサー
- その他（インターネット・Webサービス）

HTML(レスポンシブ)画像の均等方法

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

HTML(レスポンシブ)画像の均等方法

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録