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

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

ただいまの
回答率

90.51%

  • HTML

    11459questions

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

  • CSS

    7526questions

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

レイアウトの質問

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 795

Tomoaki_Fukuda

score 57

下記のリンクをご確認頂きたいのですが、
サイトの右側のメインページに商品画像を4つ×2列にしたいのですが、左下の一つだけズレた位置に配置されてしまっております。これを修正するにはそうすればよろしいでしょうか?

<画像URL>
https://gyazo.com/e222bc8fe004953853a9a764aaf1fab3

コード
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">-->

<!--グリッドサイトの記載 L9-L11まで--!>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../style/mainbox-style.css"/>
<script src="../js/modernizr-transitions.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="../style/style.css" type="text/css">


<title>PRESENT ME</title>
</head>
<body id="yellow">
<div id="leftbox">
<h1>PRESENT ME</h1>
<dl>
<!--<div id="header"><!--ヘッダ-->
<dd><a href="/ドットインストール/login.php">ログイン</a><br>
<a><a href="/ドットインストール/index.php">新規登録</a></dd>
</dl>
<div id="menu"><!--左ナビゲーション-->
<dl id="myPage"><dt>マイページ</dt>
<dd>

<img src="images/photo11.png"/>
<ul>
<li><a href="#">お気に入り</a></li>
<li><a href="#">ともだちを検索</a></li>
<li><a href="#">ともだちのお気に入り</a></li>
<li><a href="#">アカウント情報</a></li>
</ul></dd></dl>

<ul id="menuLinks">
<li><a href="#"><strong>プレゼント診断</storong></a></li>
</ul>
</div>
</div>

<div id="mainbox">
    
<h3> ITEM LINEUP</h3>
<div class="main_text">
<body class="homepage">
<section id="content">
<div id="container" class="transitions-enabled clearfix">
<!-- #content -->
  

    <div class="item link">
    <input type="checkbox">check!
<!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
    <!--<img src="images/photo01.jpg" width="180" height="278">-->
    </div>

    <div class="item link">
    <input type="checkbox">check!
   <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
    </div>
     
    <div class="item link">
    <input type="checkbox">check!
    <!--<img src="images/photo03.jpg" width="180" height="124"><br>-->
    <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
    </div>
     
    <div class="item link">
    <input type="checkbox">check!
    <!--<img src="images/photo04.jpg" width="180" height="120"><br>-->
     <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
     </div>
   
    <div class="item link">
    <input type="checkbox">check!
    <!--<img src="images/photo05.jpg" width="180" height="120"><br>-->
   <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
   </div>
  
  <div class="item link">
  <input type="checkbox">check!
  <!--<img src="images/photo06.jpg" width="180" height="126"><br>-->
  <div class="item link">
  <input type="checkbox">check!
  </div>
   <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->

  <div class="item link"><!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
  <input type="checkbox">check!
 <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
  </div>

  <div class="item link">
 <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
  </div>
   
  <div class="item link">
 <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
  </div>

  <div class="item link">
  <input type="checkbox">check!
  <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
  </div>
  
  <div class="item link">
  <input type="checkbox">check!
  <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
   </div>

<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/jquery.masonry.min.js"></script>
<script>
  $(function(){
    var $container = $('#container');
    $container.masonry({
      itemSelector: '.item',
      columnWidth: 350,
      isAnimated: !Modernizr.csstransitions
    });
    // dynamically load sites using Masonry from Zootool
    $.getJSON('http://zootool.com/api/users/items/?username=desandro' +
        '&apikey=8b604e5d4841c2cd976241dd90d319d7' +
        '&tag=bestofmasonry&callback=?')
      .error(ajaxError)
      .success(function( data ){});
    });
</script>
</section>

</div>
</body>
</html>

コード
/** Base styles **/
@charset "utf-8";

.item link button{
 font-size: 1px
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 0;   
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    overflow-y: scroll;
}
body {
    font: 13px 'Helvetica Neue', Arial, sans-serif;
    color: #222;
    line-height: 1.6em;
    background-color: #F7F5F4;
}
a {
    color: #A2C;
    text-decoration: none;
}
a:hover {
    color: #D26;
}
a:active {
    background: hsla( 0, 100%, 100%, 0.5 );
}
h1, h2 {
    font-weight: 100;
    line-height: 1.6em;
    margin-bottom: 0.6em;
}
h1 {
    font-size: 28px;
    color: #366C81;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    text-decoration: underline;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 17px;
    font-weight: bold;
}
h3, p, ul, ol, pre, dl {
    margin-bottom: 1.0em;
}
strong {
    font-weight: bold;
}

/* screens smaller than 640 */
@media screen and (max-width: 640px) {
 #content {
 padding: 10px;
}
}
a img {
    border: none;
}
blockquote {
    margin: 0;
    font: italic 18px Georgia, serif;
}
dt {
    font-weight: bold;
    font-size: 14px;
}
dd + dt {
    margin-top: 0.5em;
}
dd {
    margin-left: 1.0em;
}



#container {
    background: #FFF;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    clear: both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/** Transitions **/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.transitions-enabled.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.transitions-enabled.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

.homepage .item {
    width: 200px;
    float: left;
    padding: 50px;
    margin: 10px;
    font-weight: 300;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 30px;
    background-color:#FFFFFF;
    /*#CCCCCC;*/
}

.homepage .big-text, .homepage .link {
    font-size: 20px;
    line-height: 1.2em;
}
.homepage .big-text{
     height:5px;
     text-overflow: ellipsis; 
     white-space: nowrap;
     -o-text-overflow: ellipsis; 
     overflow: hidden; 
}

.homepage .link {
     padding: 0;
     word-wrap: break-word ;
     -moz-word-wrap: break-word ;
}
.homepage .link a {
    display: block;
    padding: 20px;
    width: 150px;
    background: #BEDAE4;
    color: #FFFFFF;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 30px;
}
.homepage .link a:hover {
    background-color: #A0C9D8;
}

/** Clearfix **/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.item link img {
    margin-top: 10px;
    margin-bottom: 10px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

1つめの画像の高さ(278ピクセル)
<img src="images/photo01.jpg" width="180" height="278">
が、
3~6番目の画像の高さ(120~126ピクセル)
<img src="images/photo03.jpg" width="180" height="124">
<img src="images/photo04.jpg" width="180" height="120">
<img src="images/photo05.jpg" width="180" height="120">
<img src="images/photo06.jpg" width="180" height="126">
の2倍ほどあるのですが、画像URLで表示される画面を見ると、商品画像の大きさは、だいたい同じ大きさに見えます。

1つ目の画像のheightの設定が商品画像の実際の高さよりも大きすぎるために、商品画像の下側に空白が作られ、そのために5番目の画像が押し下げられているのではないでしょうか?


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/26 19:45

    ご教示頂きましてありがとうございました。
    しかし、ご指摘頂いた画像はコメントアウトしており、その代わりにアフリエイトリンクをはっております。そのアフリエイトリンクが問題なのでしょうヵ?

    キャンセル

0

floatで横並びにしたボックスの高さが揃っていない状態だと、
参考ページのようにレイアウトがガタガタになってしまいます。
検証はしてないので推測ですが、
おそらく微妙にボックスの高さが揃っていないのだと思われます。

今回はボックスの中身が画像だけのようなので、
確実に全ての画像の高さが同じになるように素材側を調整するか、
最も高さの大きいものに合わせてボックスにheight指定をすれば恐らく直ると思います。

仮に中身が画像だけではなくテキストベースのものも入ってくる等、
高さを固定することが困難なのであれば、JavaScriptなどで高さを揃えるなどの処置が必要になります。
私が良く使っているのはこちらのプラグインになります。

jquery.matchHeight.js

参考までに。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/26 19:48

    なるほど、ご教示ありがとうございます。
    今回はボックスの中身はアフリエイトのリンク画像で構成しております。
    下記のような形で、「幅」と「高さ」をしているはずなんですが、レイアウトの崩れがみられます。原因分かりますでしょうか?

    キャンセル

  • キャンセル

  • 2015/10/26 19:50

    上記のように、アフリエイトのリンクの中にheight ="150" width="130"を指定しているのですが、質問文に添付したような状態になってしまいます。
    何卒ご教示頂きたくお願い致します。

    キャンセル

同じタグがついた質問を見る

  • HTML

    11459questions

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

  • CSS

    7526questions

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