Q&A
早速のご回答誠にありがとうございます。
修正してみます！！
後述するウェブサイトを製作中ですが、
そのデザインの中の「BOX◯」の箇所に「チェックボックス」を取り入れたいのですが、当方で組み込もうとするとレイアウトが崩れてしまいます。このレイアウトを崩さずに「チェックボックス」を取り込める方法はござまいませんでしょうか？
ご教示の程、よろしくお願い致します。
(HTMLの７６行目の部分になります。)
HTML
1コード 2`` 3<!DOCTYPE HTML> 4<html lang="ja"> 5<head> 6<meta http-equiv="Content-Language" content="ja"> 7<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 8<meta http-equiv="Content-Style-Type" content="text/css">--> 9 10<!--グリッドサイトの記載 L9-L11まで--> 11<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 12<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 13<link rel="stylesheet" href="../style/mainbox-style.css"/> 14<script src="../js/modernizr-transitions.js"></script> 15<meta charset="utf-8"> 16<link rel="stylesheet" href="../style/style.css" type="text/css"> 17 18 19<title>PRESENT ME</title> 20</head> 21 22<body id="yellow"> 23<div id="head"> 24<a name="top"></a> 25</div> 26 27<div id="leftbox"> 28<h1>PRESENT ME</h1> 29 30<div id="menu"><!--左ナビゲーション--> 31<dl id="myPage"><dt>マイページ</dt> 32<dd> 33<p>こんにちは、ゲストさん</p> 34<img src="images/photo11.png" /> 35<ul> 36<li><a href="#">お気に入り</a></li> 37<li><a href="#">ともだちを検索</a></li> 38<li><a href="#">ともだちのお気に入り</a></li> 39<li><a href="#">アカウント情報</a></li> 40</ul></dd></dl> 41 42<form id="search"> 43<input name="" type="text" /><button>検索</button> 44</form> 45 46<dl id="newItem"><dt>あなたのお気に入り</dt> 47<dd> 48<img src="images/icon_arrow2l.png" width="7" height="16" /> 49<div><img src="images/img4.jpg" width="78" height="78" /> 50<img src="images/img5.jpg" width="78" height="78" /></div> 51<img src="images/icon_arrow2r.png" width="7" height="16" /> 52</dd> 53</dl> 54 55<ul id="menuLinks"> 56<li><a href="#"><strong>プレゼント診断</storong></a></li> 57</ul> 58 59 60</div> 61 62</div> 63 64<div id="mainbox"> 65<div id="mainin"> 66</div> 67 68<h3> ITEM LINEUP</h3> 69<div class="main_text"> 70 71<body class="homepage"> 72<section id="content"> 73<div id="container" class="transitions-enabled clearfix"> 74<!-- #content --> 75 76 77 <!--ここが質問させて頂いている箇所です↓--> 78 <div class="item link"><a href="#">Box04<br> 79 <img src="images/photo01.jpg" width="180" height="278"> 80 <br>sampletext</a></div> 81 82 <div class="item link"><a href="#">Box05<br> 83 <img src="images/photo02.jpg" width="180" height="117"><br> 84 sampletextsampletext</a></div> 85 <div class="item link"><a href="#">Box06<br> 86 <img src="images/photo03.jpg" width="180" height="124"><br> 87 sampletextsampletextsampletext</a></div> 88<div class="item link"><a href="#">Box07<br> 89 <img src="images/photo04.jpg" width="180" height="120"><br> 90 sampletextsampletextsampletextsampletex</a></div> 91<div class="item link"><a href="#">Box08<br> 92 <img src="images/photo05.jpg" width="180" height="120"><br> 93 sampletextsampletextsampletextsampletextsampletext</a></div> 94 <div class="item link"><a href="#">Box09<br> 95 <img src="images/photo06.jpg" width="180" height="126"><br> 96 sampletextsampletext</a></div> 97 <div class="item link"><a href="#">Box10<br> 98 <img src="images/photo07.jpg" width="180" height="258"><br> 99 sampletextsampletextsampletext</a></div> 100<div class="item link"><a href="#">Box11<br> 101 <img src="images/photo08.jpg" width="180" height="128"><br> 102 sampletextsampletextsampletextsampletex</a></div> 103<div class="item link"><a href="#">Box12<br> 104 <img src="images/photo09.jpg" width="180" height="120"><br> 105 sampletextsampletextsampletextsampletextsampletext</a></div> 106 <div class="item link"><a href="#">Box13<br> 107 <img src="images/photo10.jpg" width="180" height="251"><br> 108 sampletextsampletextsampletextsampletextsampletext</a></div> 109</div> 110 111<script src="../js/jquery-1.7.1.min.js"></script> 112<script src="../js/jquery.masonry.min.js"></script> 113<script> 114 $(function(){ 115 116 var $container = $('#container'); 117 118 $container.masonry({ 119 itemSelector: '.item', 120 columnWidth: 240, 121 isAnimated: !Modernizr.csstransitions 122 }); 123 124 // dynamically load sites using Masonry from Zootool 125 $.getJSON('http://zootool.com/api/users/items/?username=desandro' + 126 '&apikey=8b604e5d4841c2cd976241dd90d319d7' + 127 '&tag=bestofmasonry&callback=?') 128 .error( ajaxError ) 129 .success(function( data ){ 130 131 132 }); 133 134 }); 135</script> 136</section> 137 138 139</div> 140 141<p id="copy"><a href="#" class="copy">DESIGN BY TOMOAKI FUKUDA</a></p> 142</div> 143 144</div> 145 146</body> 147</html> 148 149 150 151```CSS 152コード
/**** 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: 0;
padding-right: 0;
padding-left: 10px;
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.2em;
margin-bottom: 0.6em;
}
h1 {
font-size: 28px;
color: #366C81;
padding-top: 20px;
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;
}
/* content */
.col1 {
width: 80px;
}
.col2 {
width: 180px;
}
.col3 {
width: 280px;
}
.col4 {
width: 380px;
}
.col5 {
width: 480px;
}
.col1 img {
max-width: 80px;
}
.col2 img {
max-width: 180px;
}
.col3 img {
max-width: 280px;
}
.col4 img {
max-width: 380px;
}
.col5 img {
max-width: 480px;
}
.homepage .item {
width: 200px;
float: left;
padding: 10px;
margin: 10px;
font-weight: 300;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #CCCCCC;
}
.homepage .big-text, .homepage .link {
font-size: 20px;
line-height: 1.2em;
}
.homepage .big-text{
height:50px;
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: 15px;
width: 190px;
background: #BEDAE4;
color: #FFFFFF;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 10px;
}
.homepage .link a:hover {
background-color: #A0C9D8;
}
.homepage .col2 {
width: 440px;
}
/**** Clearfix ****/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.item link img {
margin-top: 10px;
margin-bottom: 10px;
}
回答2件
0
ベストアンサー
html
1<div id="mainbox"> 2 <div id="mainin"></div> 3 <h3>ITEM LINEUP</h3> 4 <div class="main_text"> 5 <div class="homepage"> 6 <section id="content"> 7 <div id="container" class="transitions-enabled clearfix"> 8 <!-- #content --> 9 10 <!--ここが質問させて頂いている箇所です↓--> 11 <div class="item link"> 12 <input type="checkbox"> 13 <a href="#">Box04<br> 14 <img src="images/photo01.jpg" width="180" height="278"><br> 15 sampletext</a> 16 </div> 17
チェックボックスを追加してみましたが崩れるというのはどういう感じでしょうか？
cssがないので .item .link がどうなってるのかわかりませんがｗ
※ プレゼント診断のところ、</storong> になってました strong です
投稿2015/10/16 17:26
退会済みユーザー
総合スコア0
0
<section> ~ </section> をwrapしているdiv要素の開始タグが bodyタグになっているからでは？
それと、<div class="item link">のインデントがバラバラなのが気になります。
・開始タグ書いたらすぐ閉じタグを書くクセを付ける
→閉じタグ補完してくれるエディタもあります
・インデント揃えることを意識する
を意識すると、ミスも減るのでは？
投稿2015/10/12 15:21
編集2015/10/12 15:26
総合スコア507
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/22 14:33