スマホサイトで画像の下部にキャプションを入れる方法
- スマホサイトで画像の下部にキャプションを入れる方法について教えてください。
- 現在、スマホサイトに掲載する画像の下部にキャプションを表示したいです。
- 現在のコードでは、縦画面でキャプションがはみ出してしまう問題があります。どのように修正すれば良いでしょうか？
- ベストアンサー
画像の下部にキャプションを入れる
現在スマホサイトを作成しています。 そこに掲載する画像の下部にキャプションを入れたいと思っています。デザインでいうと下記サイトに掲載されているようなキャプションです。 http://subculsheets.blog.fc2.com/blog-entry-19.html 上記のサイトと違う点は画像の周りに5pxの白い枠を作成したこと、画像のキャプションには半透明の黒い画像を予め作成し背景として使用していることです。 スマホサイトの場合は、縦で見る時と横で見る時で横幅が変わります。 何となくはできたのですが、現在は縦画面で見た時にキャプションが2px程右にはみ出してしまっています。横画面で見るとちゃんと収まっています。 キャプションをつける画像のサイズは統一して380px×265pxの画像を使用しています。 下記が現在のコードです。 HTML----------------------------------------------------------- <div class="photo-center2"> <img src="../img/○○.jpg"> <div class="caption-txt2">キャプションテキスト</div> </div> --------------------------------------------------------------- CSS----------------------------------------------------------- .photo-center2 img{ width:100%; max-width:380px; } .photo-center2{ position: relative; border:1px solid rgb(204, 204, 204); padding: 5px; background-color:#ffffff; margin:0 auto; margin-bottom: 15px; width:90%; max-width:380px; } .caption-txt2{ position: absolute; color: #fff; padding: 5px; font-size: 12px; bottom: 9px; background-image: url("../images/caption.png"); text-align:center; width:95%; max-width:382px; } ------------------------------------------------------ どのように修正すれば縦画面で見た時もキャプションをはみ出さずに済むでしょうか？ ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- 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/2281)
>max-width: 380px; >max-width: 382px; ケアレスミスでは？ width指定を見直してみてください。
お礼
talooさん 回答ありがとうございます。 お礼が遅くなってしまい申し訳ありません。 実は最初は同じ380pxにしてました。 ただそれだと今以上にキャプションの背景がはみ出す結果に。 とりあえず見栄えを良くしようと思い、よりはみ出さない為にはどうすればいいか調整していてこうなりました。 ありがとうございました。
関連するQ&A
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 display: inline-block; vertical-align: bottom; を記入しましたが、全く効果ありません。 どうすればよろしいのでしょうか？ HTML <body id="news" class="s"> <div > <ul class="u1" > <li><span class="time">テキスト</span> <div class="news_img"> <img src="hoge.jpg"> </li> </ul> </div> </body> CSS #news.s ul { padding: 10px; width: 100%; } #news.s li { float: left; width: 170px; height: 240px; padding:0 10px 8px 0; font-size: 12px; list-style: none; display:block; vertical-align: bottom; } #news.s li img { display: inline-block; vertical-align: bottom; border: solid 1px silver; width: 140px; height: 140px; max-width: 140px; max-height: 140px; } .news_img { display: table-cell; height: 160px; text-align: center; width: 160px; margin-top: 10px; } div.news_img div { /* IE 7 */ display: inline; zoom: 1; }
- ベストアンサー
- CSS
- 横に並んだ画像の固まりをセンター
下記CSSでキャプション付き画像を横向きに並べて配置したのですが 横に並んだ画像の固まりをセンターにもっていくCSSがわかりません どなたか知りませんか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> <!-- div.imagebox { border: 1px dashed #0000cc; /* 1.枠線 */ background-color: #eeeeff; /* 2.背景色 */ } p.image, p.caption { text-align: center; /* 3.中央寄せ */ margin: 0px; /* 4.余白・間隔 */ } p.caption { font-size: 80%; /* 5.文字サイズ */ color: darkblue; /* 6.文字色 */ } div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ width: 140px; /* 横幅 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ } .imagebox_a { display: block; margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="imagebox_a"> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- CSSを用いた角丸の枠（フタ－中身－底）の作り方を教えてください。
こんにちは。 こんな角丸の作り方が知りたいです。 フタ（画像） ┌─────┐（実際は角丸の画像） 中身（左右の罫線）│ │ 底（画像） └─────┘（実際は角丸の画像） 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部（底部）と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- float で画像が指定サイズより小さくなる
困っております。 添付の画像なんですが、 float で、370px 幅のdiv を横並びにして、 その中に、それぞれ370px幅の画像を入れたいのですが、 なぜか、勝手に縮小されてしまいます。 これは、画像の詳細を見ると333px になっております。 上の横並びの画像と、下の画像は、全く同じものです。 HTMLとCSSを下記します。 どなたか、お知恵を拝借いただければ、助かります。 宜しくお願いいたします。 <div> <div class="float_370"><img src="image/black370.jpg" alt=""></div> <div class="float_370_2"><img src="image/black370.jpg" alt=""></div> <div><img src="image/black370.jpg" alt=""></div> </div> .float_370 { float:left; margin:0; padding:0; width:370px; } .float_370 img { width: 370px; margin:0; padding:0; } .float_370_2 { float:left; margin:0; padding:0; width:370px; }
- ベストアンサー
- CSS
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- 画像にキャプションを付け画像の右端で合わせるには
画像にキャプションを付け、画像の右端に揃えたく以下のようなソースを書きました。 ------------ <div style="width:120px"> <div style="text-align:right">表題</div> <div><img src="画像.gif" width=120 height=80></div> </div> ------------ これだとimgとdivに同じ値を2度書かなくてはならない div側に画像の幅を記述する事なく同じ事を可能にするcssの記述方法はありませんか？ ------------ □□□□表題□□□□□□ ■■■■■■□□□□□□ ■■画像■■□□□□□□ ■■■■■■□□□□□□ ■■■■■■□□□□□□ ------------ □＝何もない領域 ■＝画像の描画領域
- 締切済み
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- Firefoxでの画像の縦の隙間をなくしたい
現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }
- ベストアンサー
- CSS
お礼
ORUKA1951さん 回答ありがとうございます。 御礼が遅くなってしまい申し訳ありません。 もっと簡単なのをイメージしていたのですが、難しいことだったんですね。 正直ご提示頂いたコードを見てもさっぱり理解できません。 理解できるようにCSSをもう一度勉強しなおしてみます。 ありがとうございました。