Q&A
先に質問者さんが立てたスレッド https://teratail.com/questions/60469 に同じ画像が貼ってあって、同じ質問があって（ソースまで同じかは見てませんが）、ベストアンサーがつけてあって解決したように見えますが？ 何が違うのでしょうか？ そういう情報は最初に書いていただきたいのですが。
CSSについてなのですが、画像の上部に余白ができてしまいます・・・
ほかのサイトなども参考にしましたが、いまいちよくわかりません・・・
どうすればテキストと同じようにくっつかせることができますか？
できればでいいのですが、テキストと画像を同じ高さにする方法も教えてほしいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<header> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"> 5 <h1 class="title">Hiro's site</h1> 6</header> 7<section> 8<h2>このサイトについて<h2> 9 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 10 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 11 <div> 12 <table> 13 <tr> 14 <td class="image"><img src="プーさん.png" width="300px"></td> 15 </tr> 16 <tr> 17 <td class="text">名前:<p>星座: </p><p>お住いの地域:</p></td> 18 </tr> 19 </table> 20</div> 21</section> 22</html> 23
CSS
1@charset "UTF-8"; 2* { 3 margin: 0; 4} 5html { 6 background-image: url(SunBeams.png); 7 -webkit-background-size: cover; 8 -moz-background-size: cover; 9 -o-background-size: cover; 10 background-size: cover; 11 background-attachment: fixed; 12 overflow-x: hidden; 13 overflow-y: scroll; 14} 15 16.title { 17 color: orange; 18 background-image: url(HiroHeader.jpg); 19 width: 1350px; 20 height: 250px; 21 padding-top: 100px; 22 padding-left: 50px; 23 text-align: center;; 24 background-position: center; 25 } 26 27h2 { 28 padding-bottom: 10px; 29} 30 31.body { 32 padding-bottom: 10px; 33} 34 35div { 36 float: right; 37 vertical-align: top; 38 /*margin-right: 10px; 39 padding-bottom: 100px;*/ 40 41 42}
説明足らずですみません????その時は、青い画像の時で、今回のは右にあるプーさんの画像です。その質問の時と同じ方法でコードを書いてみたのですが、ダメでした・・・
回答3件
0
質問者さんのコードには、HTML5の構文として間違っている点がありましたので、特に目立った部分にコメントを入れておきました。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<header><!-- headerタグとheadタグは同じ意味ではない。 --> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"><!-- headタグ内に記述 --> 5 <h1 class="title">Hiro's site</h1><!-- headerタグ内に記述。 --> 6</header> 7<section> 8 <h2>このサイトについて 9 <h2><!-- h2タグが閉じれていません。原則開始タグがある場合閉じタグが存在する。 --> 10 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 11 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 12 <div> 13 <table> 14 <tr> 15 <td class="image"><img src="プーさん.png" width="300px"></td> 16 </tr> 17 <tr> 18 <td class="text"> 19 名前:<p>星座: </p> 20 <p>お住いの地域:</p> 21 </td> 22 </tr> 23 </table> 24 </div> 25</section> 26</html>
それを修正すると次のようになります。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"> 5 <title>Hiro's site</title> 6</head> 7<header> 8 <h1 class="title">Hiro's site</h1> 9</header> 10<section> 11 <h2>このサイトについて</h2> 12 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 13 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 14 <div> 15 <table> 16 <tr> 17 <td class="image"><img src="プーさん.png" width="300px"></td> 18 </tr> 19 <tr> 20 <td class="text"> 21 名前:<p>星座: </p> 22 <p>お住いの地域:</p> 23 </td> 24 </tr> 25 </table> 26 </div> 27</section> 28</html>
また、CSSの.titleにかかっているtext-align: center;;のセミコロンは2つ必要ありません。
以下の回答では、修正後のコードを使っていきます。
ここから回答
テキストと画像を同じ高さにする方法として、floatプロパティを指定する方法があります。
floatプロパティを指定した要素は、指定した方向(left ,right ,none)のいずれかに配置され、その後の要素はその要素の反対側に回り込みます。 また、floatを指定した後の要素が常にfloatが有効な状態になると不便なので、clearプロパティで回り込みを解除しないといけません。
そうすると、コード全体は以下のようになります。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="stylesheet" type="text/css" href="Hiro's.css" media="all"> 5 <title>Hiro's site</title> 6</head> 7<header> 8 <h1 class="title">Hiro's site</h1> 9</header> 10<section> 11 <div class="Main"><!-- .Mainで左側(メイン？)に表示したいものを囲う --> 12 <h2>このサイトについて</h2> 13 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 14 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 15 </div> 16 <table> 17 <tr> 18 <td> 19 <img src="プーさん.png" width="300px"> 20 </td> 21 </tr> 22 <tr> 23 <td class="text">名前:<p>星座: </p> 24 <p>お住いの地域:</p></td> 25 </tr> 26 </table> 27 <div class="clear"></div><!-- ここでclearプロパティを使ってfloatを解除しています. --> 28</section> 29</html>
CSS
1@charset "UTF-8"; 2* { 3 margin: 0; 4} 5 6html { 7 background-image: url(SunBeams.png); 8 -webkit-background-size: cover; 9 -moz-background-size: cover; 10 -o-background-size: cover; 11 background-size: cover; 12 background-attachment: fixed; 13 overflow-x: hidden; 14 overflow-y: scroll; 15} 16 17.title { 18 color: orange; 19 background-image: url(HiroHeader.jpg); 20 width: 1350px; 21 height: 250px; 22 padding-top: 100px; 23 padding-left: 50px; 24 text-align: center;; 25 background-position: center; 26} 27 28body { 29 color: white; 30 width: 100%; /* 追加 */ 31} 32 33h2 { 34 padding-bottom: 10px; 35} 36 37.body { 38 padding-bottom: 10px; 39} 40 41div { 42 vertical-align: top; 43 /*margin-right: 10px; 44 padding-bottom: 100px;*/ 45} 46 47.Main { /* 追加 */ 48 text-align: left; /* 文字を左側に寄せる。 */ 49 height: 100%; /* ぷーさんとテーブルが左側にきてしまうのを防ぐために追加。 */ 50 width: 50%; /* widthの指定。 */ 51 float: left; /* float: leftを適用 */ 52} 53 54.clear { /* 追加 */ 55 clear: both; /* float: left の解除。 */ 56}
余計なことかもしれませんが、HTMLやCSSについて、基礎を学習すると今後ウェブサイトの作成などをスムーズに行えると思います。
投稿2016/12/31 08:41
編集2016/12/31 08:46
総合スコア14731
0
ベストアンサー
前回の質問への指摘が生かされていないのが残念ですが、質問内容から初学者なのだろうと推測します。
どのような方法で勉強されているかわかりませんが、Webの情報は「体系立てた情報」で無いことが多いので、一度本屋で何冊か本を買って読むと言う方法をお勧めします。複数冊の本を読んでそのサンプルを実際に作ってから、わからないところを質問されたほうが良いです。
こうすれば同じ高さ辺りに行きませんか？
HTML
1 <div> 2 <table> 3 <tr> 4 <td class="image"><img src="プーさん.png" width="300px"></td> 5 </tr> 6 <tr> 7 <td class="text">名前:<p>星座: </p><p>お住いの地域:</p></td> 8 </tr> 9 </table> 10 </div> 11 <p class="body">テキストテキストテキストテキストテキストテキスト</p> 12 <p class="body">テキストテキストテキストテキストテキストテキスト</p>
デベロッパーツールでどういうCSSかを確認しながら編集すると捗ります。また、これの使い方が書かれたHTML/CSSの入門書を探されると良いでしょう。
【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/
【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01
【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2
投稿2016/12/31 04:39
総合スコア69398
0
CSSだけ見ても、分かりません。
htmlも掲示下さい。
出来れば、レンタルサーバーにアップして、URLを教えて頂けば、回答出来ます。
投稿2016/12/31 03:45
総合スコア179
あなたの回答
tips
プレビュー
