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

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

ただいまの
回答率

88.05%

チェックボックスを組み込みたいのですが、上手くいきません。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,304

score 65

後述するウェブサイトを製作中ですが、
そのデザインの中の「BOX◯」の箇所に「チェックボックス」を取り入れたいのですが、当方で組み込もうとするとレイアウトが崩れてしまいます。このレイアウトを崩さずに「チェックボックス」を取り込める方法はござまいませんでしょうか?
ご教示の程、よろしくお願い致します。
(HTMLの76行目の部分になります。)


コード
``
<!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="head">
<a name="top"></a>
</div>

<div id="leftbox">
<h1>PRESENT ME</h1>

<div id="menu"><!--左ナビゲーション-->
<dl id="myPage"><dt>マイページ</dt>
<dd>
<p>こんにちは、ゲストさん</p>
<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>

<form id="search">
<input name="" type="text" /><button>検索</button>
</form>

<dl id="newItem"><dt>あなたのお気に入り</dt>
<dd>
<img src="images/icon_arrow2l.png" width="7" height="16" />
<div><img src="images/img4.jpg" width="78" height="78" />
<img src="images/img5.jpg" width="78" height="78" /></div>
<img src="images/icon_arrow2r.png" width="7" height="16" />
</dd>
</dl>

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


</div>

</div>

<div id="mainbox">
<div id="mainin">
</div>
    
<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"><a href="#">Box04<br>
    <img src="images/photo01.jpg" width="180" height="278">
    <br>sampletext</a></div>

  <div class="item link"><a href="#">Box05<br>
    <img src="images/photo02.jpg" width="180" height="117"><br>
     sampletextsampletext</a></div>
  <div class="item link"><a href="#">Box06<br>
    <img src="images/photo03.jpg" width="180" height="124"><br>
     sampletextsampletextsampletext</a></div>
<div class="item link"><a href="#">Box07<br>
  <img src="images/photo04.jpg" width="180" height="120"><br>
   sampletextsampletextsampletextsampletex</a></div>
<div class="item link"><a href="#">Box08<br>
  <img src="images/photo05.jpg" width="180" height="120"><br>
   sampletextsampletextsampletextsampletextsampletext</a></div>
  <div class="item link"><a href="#">Box09<br>
    <img src="images/photo06.jpg" width="180" height="126"><br>
     sampletextsampletext</a></div>
  <div class="item link"><a href="#">Box10<br>
    <img src="images/photo07.jpg" width="180" height="258"><br>
     sampletextsampletextsampletext</a></div>
<div class="item link"><a href="#">Box11<br>
  <img src="images/photo08.jpg" width="180" height="128"><br>
   sampletextsampletextsampletextsampletex</a></div>
<div class="item link"><a href="#">Box12<br>
  <img src="images/photo09.jpg" width="180" height="120"><br>
   sampletextsampletextsampletextsampletextsampletext</a></div>
  <div class="item link"><a href="#">Box13<br>
  <img src="images/photo10.jpg" width="180" height="251"><br>
   sampletextsampletextsampletextsampletextsampletext</a></div>
</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: 240,
      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>

<p id="copy"><a href="#" class="copy">DESIGN BY TOMOAKI FUKUDA</a></p>  
</div>

</div>

</body>
</html>
CSSコード
[object Object]
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

<div id="mainbox">
    <div id="mainin"></div>
    <h3>ITEM LINEUP</h3>
    <div class="main_text">
        <div class="homepage">
            <section id="content">
                <div id="container" class="transitions-enabled clearfix">
                    <!-- #content -->
                
                    <!--ここが質問させて頂いている箇所です↓-->
                    <div class="item link">
                        <input type="checkbox">
                        <a href="#">Box04<br>
                        <img src="images/photo01.jpg" width="180" height="278"><br>
                        sampletext</a>
                    </div>

17730.html&nbsp;BOX04にチェックボックス
チェックボックスを追加してみましたが崩れるというのはどういう感じでしょうか?
cssがないので .item .link がどうなってるのかわかりませんがw

※ プレゼント診断のところ、</storong> になってました strong です

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/22 23:33

    ご回答誠にありがとうございます。
    大変助かりました。以上

    キャンセル

0

<section> ~ </section> をwrapしているdiv要素の開始タグが bodyタグになっているからでは?
それと、<div class="item link">のインデントがバラバラなのが気になります。

・開始タグ書いたらすぐ閉じタグを書くクセを付ける
 →閉じタグ補完してくれるエディタもあります
・インデント揃えることを意識する
を意識すると、ミスも減るのでは?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/13 08:23

    早速のご回答誠にありがとうございます。
    修正してみます!!

    キャンセル

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

  • ただいまの回答率 88.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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