page レイアウト例

最終更新：2022/03/08

bootstrap4で出来る範囲

画像をずらす

画像とテキスト半々画像

レイアウト例

bootstrap4で出来る範囲で縦中央揃え

横並びにした要素の直下に「div.row.h-100.align-items-center」

「row」と「col」で横並びにします。横並びにした「col」の直下に「div.row.h-100.align-items-center」。更にその直下には「col」を指定します。
このとき、横並びにしている「col」の中に他の要素は入れないでください。

      <div class="row">
        <div class="col-md-6">
          <img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="">
          </div>
        <div class="col-md-6">
          <div class="row h-100 align-items-center">
            <div class="col">
              <h2 class="lp_h2">横並びにした要素の直下に「div.row.h-100.align-items-center」</h2>
              <p>「row」と「col」で横並びにします。横並びにした「col」の直下に「div.row.h-100.align-items-center」。更にその直下には「col」を指定します。<br>このとき、横並びにしている「col」の中に他の要素は入れないでください。</p>
            </div>
          </div>
          </div>
      </div>

</div>

<h2 class="lp_h2">横並びにした要素の直下に「div.row.h-100.align-items-center」</h2>

<p>「row」と「col」で横並びにします。横並びにした「col」の直下に「div.row.h-100.align-items-center」。更にその直下には「col」を指定します。<br>このとき、横並びにしている「col」の中に他の要素は入れないでください。</p>

</div>

左右の入れ替え

rowの直下の横並びになっている順番を入れ替えたい「col」に「order」で指定してください。ブレイクポイントは適宜調整をお願いします。

      <div class="row">
        <div class="col-md-6 order-md-2">
          <img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="">
          </div>
        <div class="col-md-6 order-md-1">
          <div class="row h-100 align-items-center">
            <div class="col">
              <h2 class="lp_h2">左右の入れ替え</h2>
              <p>rowの直下の横並びになっている順番を入れ替えたい「col」に「order」で指定してください。ブレイクポイントは適宜調整をお願いします。</p>
            </div>
          </div>
          </div>
      </div>

</div>

<h2 class="lp_h2">左右の入れ替え</h2>

<p>rowの直下の横並びになっている順番を入れ替えたい「col」に「order」で指定してください。ブレイクポイントは適宜調整をお願いします。</p>

</div>

bootstrap4のrowやcolのクラスはこちらでまとめていく予定です。

トップ Bootstrap4

画像をずらす

「div.img_position」の中にimgタグ

「div.img_position」の子要素・孫要素のimgタグは全てこの状態になります。

html

      <div class="row">
        <div class="col-md-6">
          <div class="img_position">
            <img src="http://mgm.moo.jp/cms002/wp-content/uploads/2019/05/gallery10.jpg" alt="">
			</div>
          </div>
        <div class="col-md-6">
          <div class="row h-100 align-items-center">
            <div class="col">
              <h2 class="lp_h2">「div.img_position」の中にimgタグ</h2>
              <p>「div.img_position」の子要素・孫要素のimgタグは全てこの状態になります。</p>
            </div>
          </div>
        </div>
      </div>

</div>

<h2 class="lp_h2">「div.img_position」の中にimgタグ</h2>

<p>「div.img_position」の子要素・孫要素のimgタグは全てこの状態になります。</p>

</div>

css

.img_position{
	background-color: #333;
	margin-bottom: 1rem;
}
.img_position img{
	position: relative;
	bottom: -0.8rem;
	left: -0.8rem;
}
@media screen and (min-width: 768px){
.img_position img{
	bottom: -1rem;
	left: -1rem;
}
}

.img_position{

background-color: #333;

margin-bottom: 1rem;

}

.img_position img{

position: relative;

bottom: -0.8rem;

left: -0.8rem;

}

@media screen and (min-width: 768px){

.img_position img{

bottom: -1rem;

left: -1rem;

}

画像とテキスト半々画像

こちらの画像を使う版です。

画像とテキスト半々背景画像

「.scl_box1」「.scl_box2」は今回共通で使っているところがあります。
「.scl_box1」「.scl_box2」に直接プロパティを指定せず、親要素のクラスを指定し、その中の「.scl_box1」「.scl_box2」に指定してください。

「div.swap_continuous_img>div.scl_box1+div.scl_box2>div」で作成してください。

「scl_box1」に背景画像をしていしていない他は背景画像を使う「swap_continuous」とほぼ同じです。「scl_box2」の直下に「div」タグを入れて、h2やpタグなどはその「div」の子要素にしてください。
「scl_box2」の直下に「div」タグがないと崩れます。

テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。

html

<div class="swap_continuous_img">
	<div class="scl_box1"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt=""></div>
	<div class="scl_box2">
	  <div>
	    <h2 class="lp_h2" style="word-break: break-all;">「div.swap_continuous_img>div.scl_box1+div.scl_box2>div」で作成してください。</h2>
	    <p>「scl_box1」に背景画像をしていしていない他は背景画像を使う「swap_continuous」とほぼ同じです。「scl_box2」の直下に「div」タグを入れて、h2やpタグなどはその「div」の子要素にしてください。<br>「scl_box2」の直下に「div」タグがないと崩れます。</p>
		  <p>テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。</p>
      </div>
	</div>
</div>

<div>

<h2 class="lp_h2" style="word-break: break-all;">「div.swap_continuous_img>div.scl_box1+div.scl_box2>div」で作成してください。</h2>

<p>「scl_box1」に背景画像をしていしていない他は背景画像を使う「swap_continuous」とほぼ同じです。「scl_box2」の直下に「div」タグを入れて、h2やpタグなどはその「div」の子要素にしてください。<br>「scl_box2」の直下に「div」タグがないと崩れます。</p>

<p>テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。</p>

</div>

css

.swap_continuous_img{
	width: 100%;
}
.swap_continuous_img .scl_box1{
	width: 100%;
}
.swap_continuous_img .scl_box1 img{
	max-width: 100%;
	height: auto;
}
.swap_continuous_img .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous_img{
		display: flex;
	}
	.swap_continuous_img .scl_box1{
		width: 50%;
	}
	.swap_continuous_img .scl_box2{
		width: 50%;
		padding: 5%;
		display: flex;
		align-items: center;
	}
}

.swap_continuous_img{

width: 100%;

}

.swap_continuous_img .scl_box1{

width: 100%;

}

.swap_continuous_img .scl_box1 img{

max-width: 100%;

height: auto;

}

.swap_continuous_img .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous_img{

display: flex;

}

.swap_continuous_img .scl_box1{

width: 50%;

}

.swap_continuous_img .scl_box2{

width: 50%;

padding: 5%;

display: flex;

align-items: center;

}

「swap_continuous_img」末尾に「_order」をつけてください。

「scl_box1」と「scl_box2」の順番が変わっている他は前述の「swap_continuous_img」とほぼ同じです。

「swap_continuous_img」もしくは「swap_continuous_img_order」に「sc_bg_color_b」のクラスを付けると、「sc_bg_color_b」の子要素の「scl_box2」に背景色が付きます。

「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。

html

<div class="swap_continuous_img_order sc_bg_color_b">
	<div class="scl_box1"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt=""></div>
	<div class="scl_box2">
	  <div>
	    <h2 class="lp_h2">「swap_continuous_img」末尾に「_order」をつけてください。</h2>
	    <p>「scl_box1」と「scl_box2」の順番が変わっている他は前述の「swap_continuous_img」とほぼ同じです。</p>
		    <p>「swap_continuous_img」もしくは「swap_continuous_img_order」に「sc_bg_color_b」のクラスを付けると、「sc_bg_color_b」の子要素の「scl_box2」に背景色が付きます。</p>
		    <p>「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。</p>
      </div>
	</div>
</div>

<div>

<h2 class="lp_h2">「swap_continuous_img」末尾に「_order」をつけてください。</h2>

<p>「scl_box1」と「scl_box2」の順番が変わっている他は前述の「swap_continuous_img」とほぼ同じです。</p>

<p>「swap_continuous_img」もしくは「swap_continuous_img_order」に「sc_bg_color_b」のクラスを付けると、「sc_bg_color_b」の子要素の「scl_box2」に背景色が付きます。</p>

<p>「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。</p>

</div>

css

.swap_continuous_img_order{
	width: 100%;
}
.swap_continuous_img_order .scl_box1{
	width: 100%;
}
.swap_continuous_img_order .scl_box1 img{
	max-width: 100%;
	height: auto;
}
.swap_continuous_img_order .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous_img_order{
		display: flex;
	}
	.swap_continuous_img_order .scl_box1{
		width: 50%;
		order: 2;
	}
	.swap_continuous_img_order .scl_box2{
		width: 50%;
		padding: 5%;
		display: flex;
		align-items: center;
		order: 1;
	}
}

.swap_continuous_img_order{

width: 100%;

}

.swap_continuous_img_order .scl_box1{

width: 100%;

}

.swap_continuous_img_order .scl_box1 img{

max-width: 100%;

height: auto;

}

.swap_continuous_img_order .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous_img_order{

display: flex;

}

.swap_continuous_img_order .scl_box1{

width: 50%;

order: 2;

}

.swap_continuous_img_order .scl_box2{

width: 50%;

padding: 5%;

display: flex;

align-items: center;

order: 1;

}

/****** .swap_continuous テキスト背景色 ******/
.sc_bg_color_b .scl_box2{
	background-color: #000;
	color: #fff;
}
.sc_bg_color_g .scl_box2{
	background-color: #ccc;
}
.sc_bg_color_w .scl_box2{
	background-color: #fff;
}

/****** .swap_continuous テキスト背景色 ******/

.sc_bg_color_b .scl_box2{

background-color: #000;

color: #fff;

}

.sc_bg_color_g .scl_box2{

background-color: #ccc;

}

.sc_bg_color_w .scl_box2{

background-color: #fff;

}

画像とテキストを順番を入れ替えながら連続画像で

こちらの画像を使う版です。

画像とテキストを順番を入れ替えながら連続背景画像

「scl_box1」に画像を入れる用

普通に画像を入れ連続で表示する用に「swap_continuous_li_img」のクラスを作りました。
「swap_continuous_li」との違いは背景画像を指定していないところ、「scl_box2」の直下に「div」タグがあるところです。「scl_box2」の直下に「div」タグがないと崩れます。

テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。

偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。
swap_continuous_li テキスト部分に背景色

「swap_continuous_li」もしくは「swap_continuous_li_img」に「sc_bg_color_g」のクラスを付けてください。
「sc_bg_color」の中の「scl_box2」に背景色が付きます。

「sc_bg_color_g」は背景色灰色、末尾の「_g」を「_w」にすれば背景色白、「_b」にすれば背景色黒になり文字は白くなります。

html

<ul class="swap_continuous_li_img sc_bg_color_g">
	<li>
		<div class="scl_box1"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl01.jpg" alt=""></div>
		<div class="scl_box2">
		  <div>
		    <h2 class="lp_h2">「scl_box1」に画像を入れる用</h2>
			  <p>普通に画像を入れ連続で表示する用に「swap_continuous_li_img」のクラスを作りました。<br>「swap_continuous_li」との違いは背景画像を指定していないところ、「scl_box2」の直下に「div」タグがあるところです。「scl_box2」の直下に「div」タグがないと崩れます。</p>
			  <p>テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。</p>
			  <p>偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。</p>
	      </div>
		</div>
	</li>
	<li>
		<div class="scl_box1"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bg_scl02.jpg" alt=""></div>
		<div class="scl_box2">
		  <div>
		    <h2 class="lp_h2">swap_continuous_li テキスト部分に背景色</h2>
		    <p>「swap_continuous_li」もしくは「swap_continuous_li_img」に「sc_bg_color_g」のクラスを付けてください。<br>「sc_bg_color」の中の「scl_box2」に背景色が付きます。</p>
		    <p>「sc_bg_color_g」は背景色灰色、末尾の「_g」を「_w」にすれば背景色白、「_b」にすれば背景色黒になり文字は白くなります。</p>
	      </div>
		</div>
	</li>
</ul>

<li>

<div>

<h2 class="lp_h2">「scl_box1」に画像を入れる用</h2>

<p>普通に画像を入れ連続で表示する用に「swap_continuous_li_img」のクラスを作りました。<br>「swap_continuous_li」との違いは背景画像を指定していないところ、「scl_box2」の直下に「div」タグがあるところです。「scl_box2」の直下に「div」タグがないと崩れます。</p>

<p>テキスト量が少ないと、テキスト側の下の余白が多くなるため、縦中央になるよう指定しています。</p>

<p>偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。</p>

</div>

</li>

<li>

<div>

<h2 class="lp_h2">swap_continuous_li テキスト部分に背景色</h2>

<p>「swap_continuous_li」もしくは「swap_continuous_li_img」に「sc_bg_color_g」のクラスを付けてください。<br>「sc_bg_color」の中の「scl_box2」に背景色が付きます。</p>

<p>「sc_bg_color_g」は背景色灰色、末尾の「_g」を「_w」にすれば背景色白、「_b」にすれば背景色黒になり文字は白くなります。</p>

</div>

</li>

</ul>

css

.swap_continuous_li_img{
	width: 100%;
}
.swap_continuous_li_img{
	list-style: none;
}
.swap_continuous_li_img .scl_box1{
	width: 100%;
}
.swap_continuous_li_img .scl_box1 img{
	max-width: 100%;
	height: auto;
}
.swap_continuous_li_img .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous_li_img li{
		display: flex;
	}
	.swap_continuous_li_img .scl_box1{
		width: 50%;
	}
	.swap_continuous_li_img .scl_box2{
		width: 50%;
		padding: 5%;
		display: flex;
		align-items: center;
	}
	.swap_continuous_li_img.scl_box2>div{
		width: 100%;
	}
	.swap_continuous_li_img li:nth-child(even) .scl_box1{
		order: 2;
	}
	.swap_continuous_li_img li:nth-child(even) .scl_box2{
		order: 1;
	}
}

/****** .swap_continuous テキスト背景色 ******/
.sc_bg_color_b .scl_box2{
	background-color: #000;
	color: #fff;
}
.sc_bg_color_g .scl_box2{
	background-color: #ccc;
}
.sc_bg_color_w .scl_box2{
	background-color: #fff;
}

.swap_continuous_li_img{

width: 100%;

}

.swap_continuous_li_img{

list-style: none;

}

.swap_continuous_li_img .scl_box1{

width: 100%;

}

.swap_continuous_li_img .scl_box1 img{

max-width: 100%;

height: auto;

}

.swap_continuous_li_img .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous_li_img li{

display: flex;

}

.swap_continuous_li_img .scl_box1{

width: 50%;

}

.swap_continuous_li_img .scl_box2{

width: 50%;

padding: 5%;

display: flex;

align-items: center;

}

.swap_continuous_li_img.scl_box2>div{

width: 100%;

}

.swap_continuous_li_img li:nth-child(even) .scl_box1{

order: 2;

}

.swap_continuous_li_img li:nth-child(even) .scl_box2{

order: 1;

}

/****** .swap_continuous テキスト背景色 ******/

.sc_bg_color_b .scl_box2{

background-color: #000;

color: #fff;

}

.sc_bg_color_g .scl_box2{

background-color: #ccc;

}

.sc_bg_color_w .scl_box2{

background-color: #fff;

}

枠付きリスト

枠付きのリストです。
黒丸はFont awesomeです。

テキスト
テキスト
テキスト

html

<ul class="waku_list">
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul>

</ul>

css

.waku_list {
  display: block;
  border: 4px #222 solid;
  padding: 1.5rem 5% 1rem;
  background-color: #fbfbfb;
  margin-bottom: 4rem;
}
.waku_list li {
  list-style: none;
  padding-left: 1.2rem;
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-weight: bold;
}
.waku_list li::before {
  content: "\f111";
  font-family: "Font Awesome 5 free";
  font-size: 0.7rem;
  position: absolute;
  top: 0.3rem;
  left: 0;
}
@media screen and (min-width: 768px) {
  .waku_list {
    padding: 3rem 5% 2.5rem;
  }
}

.waku_list {

display: block;

border: 4px #222 solid;

padding: 1.5rem 5% 1rem;

background-color: #fbfbfb;

margin-bottom: 4rem;

}

.waku_list li {

list-style: none;

padding-left: 1.2rem;

position: relative;

margin-bottom: 0.5rem;

line-height: 1.5;

font-weight: bold;

}

.waku_list li::before {

content: "\f111";

font-family: "Font Awesome 5 free";

font-size: 0.7rem;

position: absolute;

top: 0.3rem;

left: 0;

}

@media screen and (min-width: 768px) {

.waku_list {

padding: 3rem 5% 2.5rem;

}

スティッキー

POSITION STICKYポジションスティッキー

「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。
「rays_con」の終わりまでついてきます。

こちらの「top」はヘッダーが被らないように指定しています。
そのときのテーマによってヘッダーの高さは変わると思うので適宜変更してください。

テキストや画像などを表示できます。
今回の例ではボタンを表示しています。
「rays_po」より「rays_con」の「div」の方が高さがある状態じゃないとついてきているようには見えないと思います。

※注意：親もしくは祖先要素に「overflow: hidden」が指定されている場合、機能しません。
その他注意点参考：https://parashuto.com/rriver/development/position-sticky#notes

上下左右中央にアイコンとテキストボタン

テキストテキスト

上下左右中央にアイコンとテキストボタン

テキストテキスト

上下左右中央にアイコンとテキストボタン

テキストテキスト

上下左右中央にアイコンとテキストボタン

テキストテキスト

html

			<div class="ray_sticky">
				<div class="rays_po">
					<p class="tl_contit"><span>POSITION STICKY</span>ポジション スティッキー</p>
					<p>「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。<br>「rays_con」の終わりまでついてきます。</p>
					<p>こちらの「top」はヘッダーが被らないように指定しています。<br>そのときのテーマによってヘッダーの高さは変わると思うので適宜変更してください。</p>
				</div>
				<div class="rays_con">
			<p>テキストや画像などを表示できます。<br>今回の例ではボタンを表示しています。<br>「rays_po」より「rays_con」の「div」の方が高さがある状態じゃないとついてきているようには見えないと思います。</p>
					<p><span class="color_r">※注意</span>：親もしくは祖先要素に「overflow: hidden」が指定されている場合、機能しません。<br>その他注意点参考：<span style="word-break: break-all;">https://parashuto.com/rriver/development/position-sticky#notes</span></p> 
	<div class="row">
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
	</div>
				</div>
			</div>

<p class="tl_contit"><span>POSITION STICKY</span>ポジションスティッキー</p>

<p>「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。<br>「rays_con」の終わりまでついてきます。</p>

<p>こちらの「top」はヘッダーが被らないように指定しています。<br>そのときのテーマによってヘッダーの高さは変わると思うので適宜変更してください。</p>

</div>

<p>テキストや画像などを表示できます。<br>今回の例ではボタンを表示しています。<br>「rays_po」より「rays_con」の「div」の方が高さがある状態じゃないとついてきているようには見えないと思います。</p>

<p><span class="color_r">※注意</span>：親もしくは祖先要素に「overflow: hidden」が指定されている場合、機能しません。<br>その他注意点参考：<span style="word-break: break-all;">https://parashuto.com/rriver/development/position-sticky#notes</span></p>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

css

.ray_sticky{
	width: 100%;
}
.rays_po{
	padding: 0 0 1rem;
}
@media screen and (min-width: 768px){
	.ray_sticky{
		display: flex;
		align-items: flex-start;
	}
	.rays_po{
		width: 50%;
		position: sticky;
		top: 80px;
		padding-right: 5%;
	}
	.rays_con{
		width: 50%;
		padding-left: 5%;
	}
	.rays_po.order-md-2{
		padding-right: 0;
		padding-left: 5%;
	}
	.rays_con.order-md-1{
		padding-right: 5%;
		padding-left: 0;
	}
}
@media screen and (min-width: 992px){
	.rays_po{
		top: 220px;
	}
}
@media screen and (min-width: 1200px){
	.rays_po{
		top: 100px;
	}
}

.ray_sticky{

width: 100%;

}

.rays_po{

padding: 0 0 1rem;

}

@media screen and (min-width: 768px){

.ray_sticky{

display: flex;

align-items: flex-start;

}

.rays_po{

width: 50%;

position: sticky;

top: 80px;

padding-right: 5%;

}

.rays_con{

width: 50%;

padding-left: 5%;

}

.rays_po.order-md-2{

padding-right: 0;

padding-left: 5%;

}

.rays_con.order-md-1{

padding-right: 5%;

padding-left: 0;

}

@media screen and (min-width: 992px){

.rays_po{

top: 220px;

}

@media screen and (min-width: 1200px){

.rays_po{

top: 100px;

}

左右の入れ替えはbootstrap4の「order-md-1」「order-md-2」のクラスで出来ます。

POSITION STICKYポジションスティッキー

「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。
「rays_con」の終わりまでついてきます。

上下左右中央にアイコンとテキストボタン

テキストテキスト

上下左右中央にアイコンとテキストボタン

テキストテキスト

html

			<div class="ray_sticky">
				<div class="rays_po order-md-2">
					<p class="tl_contit"><span>POSITION STICKY</span>ポジションス ティッキー</p>
					<p>「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。<br>「rays_con」の終わりまでついてきます。</p>
					<p>こちらの「top」はヘッダーが被らないように指定しています。<br>そのときのテーマによってヘッダーの高さは変わると思うので適宜変更してください。</p>
				</div>
				<div class="rays_con order-md-1">
			<p>テキストや画像などを表示できます。<br>今回の例ではボタンを表示しています。<br>「rays_po」より「rays_con」の「div」の方が高さがある状態じゃないとついてきているようには見えないと思います。</p>
					<p><span class="color_r">※注意</span>：親もしくは祖先要素に「overflow: hidden」が指定されている場合、機能しません。<br>その他注意点参考：<span style="word-break: break-all;">https://parashuto.com/rriver/development/position-sticky#notes</span></p> 

	<div class="row">
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>テキストテキスト</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
	</div>

				</div>
			</div>

<p class="tl_contit"><span>POSITION STICKY</span>ポジションスティッキー</p>

<p>「rays_po」のクラスが付いている「div」は、768px以上からついてくるようになります。<br>「rays_con」の終わりまでついてきます。</p>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>テキストテキスト</p>

</div>

</a>

</div>

background-imageで背景色

石塚建設様で作成しました。
一番下のグレーの背景色は、要素の高さによって位置や高さが変わる場合があるので適宜調整が必要です。

暮らしを彩るデザイン

理想とする暮らしや未来はご家族によって様々です。
一家族に、一つのデザイン。
お客様一人ひとりの想いに寄り添う、
たったひとつのデザインをご提案いたします。

建築家と共につくる
世界にたったひとつのお家

私たちのこだわり、それは住み心地の良い家。
しっかりとした構造で眺めが良く、家族の笑顔が溢れる家。

ご家族の理想や夢を、家という形で実現するのが建築家の仕事です。

お客様の声から、ご家族の生活に寄り添った、
ご家族のための住まいをプランニングします。

お客様の声を聞いた建築家が設計するからこそ、
高いデザイン性かつ、予算に応じた適正価格のお家をご提供できるのです。

引き算で考えるデザイン
シンプルでありながら
こだわりを詰め込んで

引き算で考えるデザインとは、無駄を省くという考え方です。
ムダを省くことで、デザインは意図を持って理に適うデザインとなります。
シンプルかつ機能性に優れたデザインが実現できます。

無駄を省いたシンプルなデザインは、シンプルだからこその美しさをまとうデザインとなります。
更にコスト削減、予算の調整にも繋がります。

レシピ化された工程で
理想のスタイルを叶える家

私たちでは、お客様のご要望に合わせた家づくりスタイルで様々な家をつくっています。

建築家によるしっかりとした枠組みで、
お家の中はお客様自身による色付けを。
日々変化していくライフスタイルに合わせた間取り、
家に暮らし方を左右されない、自分たちの理想の暮らしを実現できる間取り。

今までの日々とは違う、新しい生活をご提案します。

html

<div class="design_main">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-6"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></div>
			<div class="col-11 offset-1 col-md-6 offset-md-0">
				<div class="row h-100 align-items-center">
					<div class="col-12">
				<div class="dm_pl">
				<p class="dm_tit">暮らしを彩るデザイン</p>
				<p>理想とする暮らしや未来はご家族によって様々です。<br>一家族に、一つのデザイン。<br>お客様一人ひとりの想いに寄り添う、<br>たったひとつのデザインをご提案いたします。</p>
				</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="design_contents">
	<div class="container">
	<div class="dc_box">
		<div class="dcb_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></div>
		<div class="dcb_txt">
			<h2 class="dcdt_tit">建築家と共につくる<br>世界にたったひとつのお家</h2>
			<p>私たちのこだわり、それは住み心地の良い家。<br class="br-pc">しっかりとした構造で眺めが良く、家族の笑顔が溢れる家。</p>
			<p>ご家族の理想や夢を、家という形で実現するのが建築家の仕事です。</p>
			<p>お客様の声から、ご家族の生活に寄り添った、<br>ご家族のための住まいをプランニングします。</p>
			<p>お客様の声を聞いた建築家が設計するからこそ、<br class="br-pc">高いデザイン性かつ、予算に応じた適正価格のお家をご提供できるのです。</p>
		</div>
	</div>
	
	<div class="dc_box">
		<div class="dcb_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></div>
		<div class="dcb_txt">
			<p class="dcdt_tit">引き算で考えるデザイン<br>シンプルでありながら<br class="br-sp">こだわりを詰め込んで</p>
			<p>引き算で考えるデザインとは、無駄を省くという考え方です。<br>ムダを省くことで、デザインは意図を持って理に適うデザインとなります。<br class="br-pc">シンプルかつ機能性に優れたデザインが実現できます。</p>
			<p>無駄を省いたシンプルなデザインは、シンプルだからこその美しさをまとうデザインとなります。<br class="br-pc">更にコスト削減、予算の調整にも繋がります。</p>
		</div>
	</div>
	
	<div class="dc_box">
		<div class="dcb_img"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></div>
		<div class="dcb_txt">
			<p class="dcdt_tit">レシピ化された工程で<br>理想のスタイルを叶える家</p>
			<p>私たちでは、お客様のご要望に合わせた家づくりスタイルで様々な家をつくっています。</p>
			<p>建築家によるしっかりとした枠組みで、<br>お家の中はお客様自身による色付けを。<br>日々変化していくライフスタイルに合わせた間取り、<br class="br-pc">家に暮らし方を左右されない、自分たちの理想の暮らしを実現できる間取り。</p>
			<p>今までの日々とは違う、新しい生活をご提案します。</p>
		</div>
	</div>
	</div>
</div>

<p class="dm_tit">暮らしを彩るデザイン</p>

<p>理想とする暮らしや未来はご家族によって様々です。<br>一家族に、一つのデザイン。<br>お客様一人ひとりの想いに寄り添う、<br>たったひとつのデザインをご提案いたします。</p>

</div>

<h2 class="dcdt_tit">建築家と共につくる<br>世界にたったひとつのお家</h2>

<p>私たちのこだわり、それは住み心地の良い家。<br class="br-pc">しっかりとした構造で眺めが良く、家族の笑顔が溢れる家。</p>

<p>ご家族の理想や夢を、家という形で実現するのが建築家の仕事です。</p>

<p>お客様の声から、ご家族の生活に寄り添った、<br>ご家族のための住まいをプランニングします。</p>

<p>お客様の声を聞いた建築家が設計するからこそ、<br class="br-pc">高いデザイン性かつ、予算に応じた適正価格のお家をご提供できるのです。</p>

</div>

<p class="dcdt_tit">引き算で考えるデザイン<br>シンプルでありながら<br class="br-sp">こだわりを詰め込んで</p>

<p>引き算で考えるデザインとは、無駄を省くという考え方です。<br>ムダを省くことで、デザインは意図を持って理に適うデザインとなります。<br class="br-pc">シンプルかつ機能性に優れたデザインが実現できます。</p>

<p>無駄を省いたシンプルなデザインは、シンプルだからこその美しさをまとうデザインとなります。<br class="br-pc">更にコスト削減、予算の調整にも繋がります。</p>

</div>

<p class="dcdt_tit">レシピ化された工程で<br>理想のスタイルを叶える家</p>

<p>私たちでは、お客様のご要望に合わせた家づくりスタイルで様々な家をつくっています。</p>

<p>建築家によるしっかりとした枠組みで、<br>お家の中はお客様自身による色付けを。<br>日々変化していくライフスタイルに合わせた間取り、<br class="br-pc">家に暮らし方を左右されない、自分たちの理想の暮らしを実現できる間取り。</p>

<p>今までの日々とは違う、新しい生活をご提案します。</p>

</div>

css

.design_main{
	width: 100%;
	background-image: linear-gradient(#eee,#eee);
	background-size: 92% 70%;
	background-position: bottom right;
	background-repeat: no-repeat;
	margin-bottom: 60px;
	padding-bottom: 5px;
}
.dm_tit{
	font-weight: bold;
	font-size: 1.6rem;
	margin-top: 18px;
}
.dm_tit+p{
	font-size: 1.1rem;
}
@media screen and (min-width: 768px){
	.design_main{
		background-size: 85% 87%;
		padding-bottom: 35px;
	}
}
@media screen and (min-width: 992px){
	.design_main{
		margin-bottom: 120px;
	}
	.dm_tit{
		font-size: 2rem;
	}
	.dm_tit+p{
		font-size: 1.2rem;
	}
	.dm_pl{
		padding-left: 40px;
	}
}
@media screen and (min-width: 1200px){
	.design_main{
		background-size: 75% 87%;
		padding-bottom: 50px;
	}
}
/*design_contents*/
.design_contents{
	background-image: linear-gradient(#eee,#eee);
	background-size: 90% 20%;
	background-position: bottom left;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	margin-bottom: 60px;
}
.dc_box{
	margin-bottom: 15px;
}
.dcb_txt{
	background-color: #fff;
	margin-top: -30px;
	width: 95%;
	position: relative;
	padding: 15px 15px 10px;
}
.design_contents .dc_box:nth-of-type(odd) .dcb_txt{
	left: -1px;
}
.design_contents .dc_box:nth-of-type(even) .dcb_txt{
	margin-left: auto;
	right: -1px;
}
.dcdt_tit{
	background-image: none;
	font-size: 1.4rem;
	line-height: 1.6;
	margin-bottom: 15px;
	padding: 0 12px;
}
.dcdt_tit{
	border-left: 5px #4a4c4e solid;
	font-weight: bold;
	color: #01071b;
}
@media screen and (min-width: 768px){
	.design_contents{
		background-size: 85% 20%;
	}
	.dcb_img{
		width: 50%;
	}
	.design_contents .dc_box:nth-of-type(odd) .dcb_img{
		margin-left: auto;
	}
	.dcb_txt{
		width: 60%;
		margin-top: -26%;
		padding: 35px 35px 30px;
	}
	.design_contents .dc_box:nth-of-type(odd) .dcb_txt{
		left: 0;
	}
	.design_contents .dc_box:nth-of-type(even) .dcb_txt{
		right: 0;
	}
}
@media screen and (min-width: 992px){
	.design_contents{
		margin-bottom: 120px;
	}
	.dc_box{
		margin-bottom: 40px;
	}
	.dcb_txt{
		width: 50%;
	}
	.design_contents .dc_box:nth-of-type(odd) .dcb_txt{
		margin-left: 5%;
	}
	.design_contents .dc_box:nth-of-type(even) .dcb_txt{
		margin-left: 45%;
	}
}
@media screen and (min-width: 1200px){
	.design_contents{
		background-size: 75% 20%;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

.design_main{

width: 100%;

background-size: 92% 70%;

background-position: bottom right;

background-repeat: no-repeat;

margin-bottom: 60px;

padding-bottom: 5px;

}

.dm_tit{

font-weight: bold;

font-size: 1.6rem;

margin-top: 18px;

}

.dm_tit+p{

font-size: 1.1rem;

}

@media screen and (min-width: 768px){

.design_main{

background-size: 85% 87%;

padding-bottom: 35px;

}

@media screen and (min-width: 992px){

.design_main{

margin-bottom: 120px;

}

.dm_tit{

font-size: 2rem;

}

.dm_tit+p{

font-size: 1.2rem;

}

.dm_pl{

padding-left: 40px;

}

@media screen and (min-width: 1200px){

.design_main{

background-size: 75% 87%;

padding-bottom: 50px;

}

/*design_contents*/

.design_contents{

background-size: 90% 20%;

background-position: bottom left;

background-repeat: no-repeat;

padding-bottom: 5px;

margin-bottom: 60px;

}

.dc_box{

margin-bottom: 15px;

}

.dcb_txt{

background-color: #fff;

margin-top: -30px;

width: 95%;

position: relative;

padding: 15px 15px 10px;

}

.design_contents .dc_box:nth-of-type(odd) .dcb_txt{

left: -1px;

}

.design_contents .dc_box:nth-of-type(even) .dcb_txt{

margin-left: auto;

right: -1px;

}

.dcdt_tit{

font-size: 1.4rem;

line-height: 1.6;

margin-bottom: 15px;

padding: 0 12px;

}

.dcdt_tit{

border-left: 5px #4a4c4e solid;

font-weight: bold;

color: #01071b;

}

@media screen and (min-width: 768px){

.design_contents{

background-size: 85% 20%;

}

.dcb_img{

width: 50%;

}

.design_contents .dc_box:nth-of-type(odd) .dcb_img{

margin-left: auto;

}

.dcb_txt{

width: 60%;

margin-top: -26%;

padding: 35px 35px 30px;

}

.design_contents .dc_box:nth-of-type(odd) .dcb_txt{

left: 0;

}

.design_contents .dc_box:nth-of-type(even) .dcb_txt{

right: 0;

}

@media screen and (min-width: 992px){

.design_contents{

margin-bottom: 120px;

}

.dc_box{

margin-bottom: 40px;

}

.dcb_txt{

width: 50%;

}

.design_contents .dc_box:nth-of-type(odd) .dcb_txt{

margin-left: 5%;

}

.design_contents .dc_box:nth-of-type(even) .dcb_txt{

margin-left: 45%;

}

@media screen and (min-width: 1200px){

.design_contents{

background-size: 75% 20%;

}

振り分けページへ戻る

トップへ戻る

page レイアウト例

レイアウト例

bootstrap4で出来る範囲で縦中央揃え

横並びにした要素の直下に「div.row.h-100.align-items-center」

左右の入れ替え

画像をずらす

「div.img_position」の中にimgタグ

画像とテキスト半々画像

「div.swap_continuous_img>div.scl_box1+div.scl_box2>div」で作成してください。

「swap_continuous_img」末尾に「_order」をつけてください。

画像とテキストを順番を入れ替えながら連続 画像で

「scl_box1」に画像を入れる用

swap_continuous_li テキスト部分に背景色

枠付きリスト

スティッキー

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

background-imageで背景色

建築家と共につくる世界にたったひとつのお家

画像とテキストを順番を入れ替えながら連続画像で

建築家と共につくる
世界にたったひとつのお家