コーディング豆知識【配置編】
テキストと画像の横並び
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
HTML
<div class="wrap"> <div class="text-box"> <p class="title">タイトル</p> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="img-box"> <img src="" alt=""> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.wrap .text-box{
width: 49%;
}
.wrap .title{
font-weight: bold;
}
.wrap .text{}
.wrap .img-box{
width: 49%;
}
css (SP)
.wrap{}
.wrap .text-box{}
.wrap .title{
font-weight: bold;
}
.wrap .text{}
.wrap .img-box{}
テキストと画像の横並び 逆パターン
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
HTML
<div class="wrap"> <div class="text-box"> <p class="title">タイトル</p> <p class="text">テキストテキス</p> </div> <div class="img-box img-wrap"> <div class="img01"> <img src="" alt=""> </div> <div class="img02"> <img src="" alt=""> </div> </div> </div> <div class="wrap"> <div class="text-box"> <p class="title">タイトル</p> <p class="text">テキストテキストテキ</p> </div> <div class="img-box"> <img src="" alt=""> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 16px;
}
.wrap:nth-of-type(2n){
flex-direction: row-reverse;
}
.wrap .text-box{
width: 49%;
}
.wrap .title{
font-weight: bold;
}
.wrap .text{}
.wrap .img-box{
width: 49%;
}
.wrap .img-wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #fff;
}
.wrap .img-wrap .img01{
width: 49%;
background-color: #ccc;
}
.wrap .img-wrap .img02{
width: 49%;
background-color: #ccc;
}
css (SP)
.wrap{
margin-bottom: 16px;
}
.wrap .text-box{}
.wrap .title{
font-weight: bold;
}
.wrap .text{}
.wrap .img-box{}
.wrap .img-wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #fff;
}
.wrap .img-wrap .img01{
width: 49%;
background-color: #ccc;
}
.wrap .img-wrap .img02{
width: 49%;
background-color: #ccc;
}
2番目で画像の順番を一番目に
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
HTML
<div class="wrap"> <div class="box"> <p class="title">タイトル</p> <div class="img"> <img src="" alt=""> </div> <p class="text">テキストテキストテキストテキストテキテキスト</p> </div> <div class="box"> <p class="title">タイトル</p> <div class="img"> <img src="" alt=""> </div> <p class="text">テキストテキストテキストテキストテキストテキスト</p> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.wrap .box{
width: calc(50% - 4px);
}
.wrap .box .title{
font-weight: bold;
}
.wrap .box .img{
text-align: center;
}
.wrap .box:nth-of-type(2){
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap .box:nth-of-type(2) .img{
order: -1;
width: 100%;
}
2番目のアウターにdisplay:contents
アウターコンテンツです。
テキストコンテンツです。
アウターコンテンツです。
テキストコンテンツです。
HTML
<div class="wrap"> <div class="outer"> アウターコンテンツです。 <p class="text">テキストコンテンツです。</p> </div> </div> <div class="wrap"> <div class="outer" style="display: contents;"> アウターコンテンツです。 <p class="text">テキストコンテンツです。</p> </div> </div>
css (PC)
.wrap{
padding: 8px;
background-color: #ccc;
box-sizing: border-box;
margin-bottom: 8px;
}
.wrap .outer{
padding: 8px;
background-color: #ffb6c1;
box-sizing: border-box;
}
.wrap .text{
background-color: #ffdc39;
padding: 8px;
box-sizing: border-box;
}
(PC)5個並び (SP)2個並び
HTML
<div class="wrap"> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap .box{
width: 18.5%;
margin: 0 1.875% 8px 0;
}
.wrap .box:nth-of-type(5n){
margin: 0 0 8px 0;
}
css (SP)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.wrap .box{
width: 49%;
margin: 0 0 8px 0;
}
(PC)4個並び (SP)2個並び
HTML
<div class="wrap"> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap .box{
width: 23.5%;
margin: 0 2% 2% 0;
}
.wrap .box:nth-of-type(4n){
margin: 0 0 2% 0;
}
css (SP)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.wrap .box{
width: 49%;
margin: 0 0 8px 0;
}
(PC)3個並び (SP)1個並び
HTML
<div class="wrap"> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> <div class="box"> <img src="" alt=""> </div> </div>
css (PC)
.wrap{
display: flex;
display: -webkit-flex;
display:-ms-flexbox;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap .box{
width: 32%;
margin: 0 2% 2% 0;
}
.wrap .box:nth-of-type(3n){
margin: 0 0 2% 0;
}
css (SP)
.wrap{}
.wrap .box{
margin-bottom: 2%;
}