teratail
回答率
85.47%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.47%
トップBootstrapに関する質問
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

1373閲覧

Bootstrapでぴったりサイズの画像を横並びにできない

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/12/20 15:53

編集2017/12/21 01:13

0

1

いつもお世話になっております。
今回は画像なのですが、ブートストラップを使って
900 × 490のindex-top1.pngと
270 × 490のindex-top2.pngを
並べているのですが綺麗に横並び１列になってくれません。

２つ合わせてwideは１１７０px、間違いないハズなのですが...
padding0; magin0;を至る所に貼ってます。
どこが悪いのかわからないままなのでご教授ください。
よろしくお願いします！
イメージ説明

htmlは色々組んでしまったので極力、関係ない部分は削除したものを貼ります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>タイトル</title>
<meta name="Description" content="#" />
<meta name="Keywords" content="" />
<link rel="canonical" href="http://www.candy-b.com/" />
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!--css読み込み-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bs-button-style.css" rel="stylesheet" type="text/css">
<link href="css/bs-button-style.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/hover.css" rel="stylesheet" media="all">
<!-- jQuery読み込み -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.zaccordion.min.js"></script>
<script src="js/enquire.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.js"></script>
<!--WEBfont-->
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
</head>
	<div class="wrap">
<body>
<div class="index-main">
 
  <div class="background-mainborder1">&nbsp;</div>
	 	 <div class="index-c1 ">
  <div class="container">
      <div class="row index-img shadow">
        <div class="index-c1img1 col-lg-9 col-sm-9 hidden-xs col-md-9 clear" ><img src="images/index-top1.png"  width="100%" height="auto"></div>
        <div class="index-c1img2 col-sm-3 col-lg-3 hidden-xs col-md-3"><img src="images/index-top2.png" width="100%" hight="auto">
          <i class="fa fa-graduation-cap fa-2x"></i><span><p>メニュー</p></span>
        </div>
      </div>
      <div class="index-c1menu">
        <div class="row shadow">
			<div class="c1menu-1 col-sm-3 col-lg-3 col-md-3 col-sm-offset-2 col-xs-3"><a href="#"><i class="fa fa-pencil fa-2x"></i><br><span>メニュー</span></a></div>
          <div class="c1menu-2 col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="#"><i class="fa fa-users fa-2x"></i><br><span class="hidden-xs">
			  メニュー</span><span class="visible-xs c1menu-span2">
			  メニュー</span></a></div>
		  <div class="c1menu-3 col-sm-3 col-lg-3 col-md-3 col-xs-3"><a href="#"><i class="fa fa-comments-o fa-2x"></i><br><span>メニュー<br class="visible-xs">メニュー</span></a></div>
          <div class="c1menu-4 col-xs-3 col-sm-3 col-lg-3 col-md-3 col-md-offset-1 col-sm-offset-1"><a href="#"><i class="fa fa-edit  fa-2x"></i><br>
		  <span>メニュー</span></a></div>
        </div>
      </div>
    </div>
  </div>
</div>
	
</body>
	</div>
</html>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19564741-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

cssも同様です。

@charset "utf-8";
/* CSS Document */












/* CSS Document */

@media(max-width:991px) {
	
	.c4-rink p {
		padding-right: 10px;
		position: absolute;
		z-index: 1;
	}
}

.wrap {
	overflow: hidden;
}

body {
	min-width: 767px;
	width: 100%;
}

a:hover {
	opacity: 0.6;
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}

.index-headermain {
	padding: 0 15px;
}

.index-headercontact {
	text-align: right;
}

.index-headercontact-sm {
	text-align: right;
}

.index-headercontact {
	color: #fff6db;
	font-size: 14px;
	letter-spacing: 3px;
	padding-top: 15px;
}

.index-headercontact-sm {
	color: #fff6db;
	font-size: 14px;
	letter-spacing: 3px;
}

.index-mail-sm {
	font-sixe: 16px;
	padding: 10px 20px;
	margin-left: 10px;
	border: solid 1px;
	color: #fff6db;
	text-decoration: none;
}
.index-mail-sm a {
	text-decoration-color: #fff6db;
	text-decoration: none;
}
.index-mail-sm a:hover {
	color: #fff6db;
	text-decoration: none;
}
.index-mail-sm a:link {
	color: #fff6db;
	text-decoration: none;
}
.index-mail-sm a:visited {
	color: #fff6db;
	text-decoration: none;
}
.index-mail-sm i {
	padding-right: 10px;
}

.p-sm {
	margin-bottom: -9px; 
}

.index-mail {
	font-sixe: 16px;
	padding: 10px 20px;
	margin-left: 10px;
	border: solid 1px;
	color: #fff6db;
	text-decoration: none;
}
.index-mail a {
	text-decoration-color: #fff6db;
	text-decoration: none;
}
.index-mail a:hover {
	color: #fff6db;
	text-decoration: none;
}
.index-mail a:link {
	color: #fff6db;
	text-decoration: none;
}
.index-mail a:visited {
	color: #fff6db;
	text-decoration: none;
}
.index-mail i {
	padding-right: 10px;
}

.index-movie {
	position: relative;
}

.index-header {
	position: fixed;
	z-index: 100;
	color: #fff;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background-color: #42c4c4;
	opacity: 0.8;
}


.index-headertext {
	font-size: 8px;
	margin-top: 0px;
	padding-top: 5px;
	color: #fff;
	text-align: right;
}




.index-headermenu-ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
}
ul.index-headermenu-ul a {
	display: block;
}
ul.index-headermenu-ul a:hover {
	color: #fff;
}
.index-headermenu-ul a {
	text-decoration-color: #fff;
	text-decoration: none;
}
.index-headermenu-ul a:link {
	color: #fff;
}
.index-headermenu-ul a:visited {
	color: #fff;
}
.index-headermenu-li {
	font-size: 14px;
	text-align: center;
	border-left: 1px solid #ffffff;
}
.index-headermenu-li:last-child {
	border-right: 1px solid #ffffff;
}






.index-headermenu3-ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
}
ul.index-headermenu3-ul a {
	display: block;
}
ul.index-headermenu3-ul a:hover {
	color: #fff;
}
.index-headermenu3-ul a {
	text-decoration-color: #fff;
	text-decoration: none;
}
.index-headermenu3-ul a:link {
	color: #fff;
}
.index-headermenu3-ul a:visited {
	color: #fff;
}
.index-headermenu3-li {
	padding: 0;
	font-size: 11px;
	text-align: center;
	border-left: 1px solid #ffffff;

}
.index-headermenu3-li:last-child {
	border-right: 1px solid #ffffff;
}


.index-headermenu2-ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
}
ul.index-headermenu2-ul a {
	display: block;
}
ul.index-headermenu2-ul a:hover {
	color: #fff;
}
.index-headermenu2-ul a {
	text-decoration-color: #fff;
	text-decoration: none;
}
.index-headermenu2-ul a:link {
	color: #fff;
}
.index-headermenu2-ul a:visited {
	color: #fff;
}
.index-headermenu2-li {
	font-size: 12px;
	text-align: center;
	border-left: 1px solid #ffffff;
}
.index-headermenu2-li:last-child {
	border-right: 1px solid #ffffff;
}

.index-container {
	max-width: 100%;
	height: auto;
	padding: 0;
}
.background-mainborder1 {
	background-color: #28acb3;
	padding: 6px 0;
}
.index-main {
	text-align: center;
}
.index-c1 {
	background-image: url(../images/container-background.png);
	background-position: left top;
	background-repeat: repeat-x;
	height: 100%;
	width: auto;
}

.shadow {
	box-shadow: 0px 0px 20px;
	padding: 0;
}
.index-c1img1 {
	float: left;
	padding: 0;
	margin: 0;
}
.index-c1img2 {
	float: right;
	padding: 0;
	margin: 0;
	position: relative;
	font-size: 15px;
}

.fa-graduation-cap  {
	color: #009dbf;
	position: absolute;
	width: 185px;
	top: 71%;
	left: 40%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


.index-c1img2 span {
	color: rgba(49, 49, 49, 0.702);
}

.index-c1img2 p {
	position: absolute;
	width: 185px;
	top: 71%;
	left: 62%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.index-c1menu {
	padding: 0;
	margin: 0;
}

.index-c1menu i {
	color: #009dbf;
}

.index-c1menu span {
	color: rgba(49, 49, 49, 0.702);
}
.index-c1menu i {
	padding-bottom: 10px
}

.index-main {
	position: relative;
	z-index: 1;
}

.c1menu-1 {
	display: block;
	margin: 0;
	padding: 15px;
	text-align: center;
	background-color: #d6deed;
}
.c1menu-2 {
	display: block;
	margin: 0;
	padding: 15px;
	text-align: center;
	background-color: #d6e8ed;
}

.c1menu-span2 {
	padding-top: 10px;
	padding-bottom: 10px; 
}

.c1menu-3 {
	display: block;
	margin: 0;
	padding: 15px;
	background-color: #CDDFE7;
}

.c1menu-3 a{
	display: block;
}

.c1menu-4 {
	display: block;
	margin: 0;
	padding: 15px;
	text-align: center;
	background-color: #FFFFFF;
}
.index-c2 {
	text-align: center;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.background-mainborder2 {
	padding: 50px 0;
}
.index-c2text1 {
	font-size: 30px;
	font-family: "Sorts Mill Goudy";
	letter-spacing: 1px;
}

.index-c2text2 {
	font-size: 27px;
	font-family: 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
	line-height: 1px;
	letter-spacing: 5px;
}

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

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

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

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

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

Lhankor_Mhy
Lhankor_Mhy

2017/12/21 00:41

スクリーンショットがよく分かりません。その青い矢印が index-top1.png ですか？
退会済みユーザー

退会済みユーザー

2017/12/21 01:04

青い矢印分浮いているということです、わかりづらくてすみません；
退会済みユーザー

退会済みユーザー

2017/12/21 01:14

新しい画像を追加しました！ご確認ください！
Lhankor_Mhy
Lhankor_Mhy

2017/12/21 03:05

『２つ合わせてwideは１１７０px』とはどういう意味ですか？ cssの中に "wide" "1170px" という記述が見当たりませんでしたが、ご提示されていないコードに記述されているのでしょうか？
Lhankor_Mhy
Lhankor_Mhy

2017/12/21 03:10

ああ、Bootstrap のコンテナ幅1140pxのことですかね？
guest

回答1件

0

ベストアンサー

Bootstrapにはグリッドシステムがあり、12分割したグリッドを使ってレイアウトするものです。classについているcol-md-9などがそれで、この場合は12分割したグリッドのうち9を使った幅、という意味です。つまり3/4ですね。

このとき、親要素が1170pxだったとすると、グリッド幅は1170*9/12=877.5pxになります。これは画像幅の900pxより小さいので画像が縮小されます。
また、col-md-3がついているindex-top2.pngの方は、同様の計算で292.5pxです。これは画像幅より大きいので、画像が拡大されます。

片方の画像が縮小され、片方の画像が拡大されているのが、ズレの原因です。

投稿2017/12/21 03:31

Lhankor_Mhy
Lhankor_Mhy

総合スコア36134

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

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

退会済みユーザー

退会済みユーザー

2017/12/21 07:22

なるほど...ご回答ありがとうございます！そもそも画像がcolにあったサイズではないということでしょうか？拡大縮小して入れなおさなければいけないということですか？
退会済みユーザー

退会済みユーザー

2018/01/09 08:01

お返事遅れましたが無事に解決しました！ありがとうございました！！
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問

トップBootstrapに関する質問

Bootstrapでぴったりサイズの画像を横並びにできない