後述するウェブサイトを製作中ですが、
そのデザインの中の「BOX◯」の箇所に「チェックボックス」を取り入れたいのですが、当方で組み込もうとするとレイアウトが崩れてしまいます。このレイアウトを崩さずに「チェックボックス」を取り込める方法はござまいませんでしょうか?
ご教示の程、よろしくお願い致します。
(HTMLの76行目の部分になります。)
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/22 14:33