質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

194閲覧

marginが大きすぎて画像が右に回らない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/23 09:02

marginが大きすぎて画像が右に回らないです。htmlに

<html lang="en"> <body class="relative"> <div class="menu" id="menu"> <a class="home" href="">Home</a> <a class="profile" href="">Profile</a> </div> <div class="float-right"> <ul> <li><a href="#"><img src="photo.jpg" width="100" height="100" alt="" /></a></li> </ul> </div> </body> </html>

と書いて、
cssに

.menu{ background-color: gray; width: 500px; height: 100%; } html, body, .menu { height: 100%; } body { margin: 0; } .relative { position: relative; } .float-right { float: right; }

と書いたのですが、menuのmarginが大きすぎてphoto.jpgの画像がmenuの横にきません。
理想のアウトプットは、photo.jpgの画像がmenuのheightと同じ・(ブラウザ全体ーmenu)のwidthでmenuの横に配置されることです。どのように書けばそのようになりますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

display:tableを使うのはどうですか?
画像も揃えるのが大変なのでbackground-size:coverを使うといいと思います。background-size:coverの為にli消しました。スライダーとかが入る予定でしたら申し訳ありませんがこの方法は使えません。

HTML

1<html lang="en"> 2<head> 3 <link rel="stylesheet" href="style.css"> 4</head> 5<body> 6 <div id="menuArea"> 7 <div class="menu" id="menu"> 8 <a class="home" href="">Home</a> 9 <a class="profile" href="">Profile</a> 10 </div> 11 <div class="imgArea"></div> 12 </div> 13</body> 14</html>

CSS

1body { 2 margin: 0; 3} 4#menuArea{ 5 display: table; 6 width: 100%; 7 height: 100%; 8} 9.menu{ 10 display: table-cell; 11 background-color: gray; 12 width: 50%; 13} 14.imgArea{ 15 display: table-cell; 16 width: 50%; 17 background-image: url(photo.jpg); 18 background-size: cover; 19}

###[追記]カルーセルへの対応
画像の縦横比を保ちながら画像の高さをページに合わせるのはCSSだけでは無理だと思います。とりあえず下記のようなコードを書いておいて縦幅を動的に変更できるカルーセルを導入するといいと思います。カルーセルのコードによってはコードの見直しが必要になるかもしれないので先にカルーセルから導入するといいと思います。

RoyalSliderというスライダーがあるようです。windowのリサイズイベントを受け取ってスライダーサイズをアップデートするという内容です。よく使っているスライダーがありましたら一度このようなリサイズができるかドキュメントを見てみるといいと思います。
http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-stretch-slider-to-full-browser-width-and-height

HTML

1<html lang="en"> 2<head> 3 <link rel="stylesheet" href="style.css"> 4</head> 5<body> 6 <div id="menuArea"> 7 <div class="menu" id="menu"> 8 <a class="home" href="">Home</a> 9 <a class="profile" href="">Profile</a> 10 </div> 11 <div class="imgArea"> 12 <ul> 13 <li><a href=""><img src="photo.jpg" width="100" height="100"></a></li> 14 </ul> 15 </div> 16 </div> 17</body> 18</html>

CSS

1body { 2 margin: 0; 3} 4#menuArea{ 5 display: table; 6 width: 100%; 7 height: 100%; 8} 9.menu{ 10 display: table-cell; 11 background-color: gray; 12 width: 50%; 13} 14.imgArea{ 15 display: table-cell; 16 width: 50%; 17 background-color: red; 18 overflow: hidden; 19} 20.imgArea ul{ 21 width: 100%; 22 list-style-type : none; 23 margin: 0; 24 padding: 0; 25 position: relative; 26} 27.imgArea li{ 28 position: absolute; 29 width: 100%; 30} 31.imgArea a{ 32 display: block; 33} 34.imgArea img{ 35 width: 100%; 36 height: auto; 37}

投稿2017/12/23 13:03

編集2017/12/23 15:35
IShix

総合スコア1724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/23 14:12

ありがとうございます!最終的には画像の部分をカルーセルにしたいのですが、IShikawanさんの方法では厳しいですかね?imgAreaクラスの部分をカルーセルにはできないのでしょうか?
IShix

2017/12/23 15:35

追記いたしました。ご確認ください。
guest

0

.menuの部分にfloat:leftを入れてみたらどうでしょうか?
画像のサイズにつきましても、imgのcssで調整を行ったらいいと思います。

css

1*{ 2 margin: 0; 3 padding: 0; 4} 5 6.menu{ 7 background-color: gray; 8 width: 500px; 9 height: 100%; 10 float: left; /*追記*/ 11} 12 13html, body, .menu { 14 height: 100%; 15} 16 17body { 18 margin: 0; 19} 20 21.relative { 22 position: relative; 23} 24 25/*liのリストマーカー削除*/ 26li{ 27 list-style: none; 28} 29 30/*今回の画像サイズの調整のためいれたので、任意で変更してください。*/ 31li a img{ 32 width: 100%; 33 height: 100%; 34} 35 36.float-right { 37 width: calc(100% - 500px); /*追記*/ 38 height: 100%; /*追記*/ 39 overflow: hidden; /*追記*/ 40 float: right; 41} 42

html

1<!--cssに記述のため、width,height効果の削除--> 2<li><a href="#"><img src="photo.jpg" alt="" /></a></li> 3

投稿2017/12/23 14:58

jaaaaack

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問