チェックレイアウト | OHIRU REGGAE｜お昼レゲエ｜尾張旭市森林公園 無料野外イベント

テキスト

<div class="flex_flot_box">
<div class="img_box"><img class=" " src="/wp-content/themes/newD/1_img/thum/thum_1.jpg" width="" /></div>
<div class="disp_box">
<p>テキスト</p>
</div>
</div>

テキスト

<div class="flex_flot_box2">
<div class="img_box"><img class=" " src="/wp-content/themes/newD/1_img/thum/thum_1.jpg" width="" /></div>
<div class="disp_box">
<p>テキスト</p>
</div>
</div>

    <div class="center_box0" >
  
       <div class="flex_flot_box3">
<div class="img_box"><img class=" " src="<?php echo get_stylesheet_directory_uri(); ?>/img/bride.svg" width="95" /></div>
<div class="disp_box">
<p>下記BRIDE様のシートはN3pureで制菌しております。</p>
</div>
</div>       
    </div>

センターボックス

基本下記を設定して、それ以外は各自クライアントレスで拡張していく。例えば、パディング　マージン　背景色 rgaで透明度など　フォントサイズも無指定なので、各自設定　もしくはサイトごとの共通サイズなど（現状はbodyを引き継ぐ）

<div class="center_box">テキストはどんどん長くしても、それに対応して、幅も大きくなる<br>
小さくもなるよ。１カラムのセンターボックスのデザインに利用<br>
モバイルは改行しないとかは各自設定するか　使いやすいようにね。</div>

<div class="center_box_border">テキストはどんどん長くしても、それに対応して、幅も大きくなる<br>
小さくもなるよ。１カラムのセンターボックスのデザインに利用<br>
モバイルは改行しないとかは各自設定するか　使いやすいようにね。</div>

センターボックスをレイアウトに使う。

その中に、フレックスフロートボックスを使ってレイアウト

    <div class="center_box0" >
  
       <div class="flex_flot_box3">
<div class="img_box"><img class=" " src="<?php echo get_stylesheet_directory_uri(); ?>/img/bride.svg" width="95" /></div>
<div class="disp_box">
<p>下記BRIDE様のシートはN3pureで制菌しております。</p>
</div>
</div>       
    </div>

反転スパン

<div class="center_box_border">モバイルはディスプレイブロックしてあるので、はみ出る場合は改行するよ<br />
どこでも利用可能。<span class="hanten d_bold">アクセントやポイントなど</span>に利用<br />
これをベースに各自設定するか　使いやすいようにね。</div>

画像

html

<div class="img_box ">
    <div class="gray_box_warp">
    <div class="gray_box">
        </div>

    <img src="<?php echo get_template_directory_uri(); ?>/1_img/9_client/1_shinbori/n3/N3-item7.jpg"   alt="N3-pureプラチナ・カテキン|<?php echo $alt1; ?> " style="margin-bottom: 0px;">
    </div>
</div>

画像の上に半透明と文字css

.gray_box_warp{position: relative;


.gray_box{ background: rgba(0,0,0,0.33); position: absolute; width: 100%;height: 100%;
        
  display: flex;
  justify-content: center;
  align-items: center;
        
    
        .moji{color: #fff; font-weight: bold;}
    }
    
 .gray_box::after{content: '生産終了';
        color: #fff; font-weight: bold;}

}

アフターコンテンツメモ

1.cssでアブソルートでマイナス位置につけると、iphoneでモバイルメニューの戻りがおかしくなる。

（モバイルの動き調整）

2.　ie12で　親がz-index していなく、子のアフターコンテンツをzindex アブソルートしても、z-indexが　きれいに反映されない。

親要素にも同じz-indexを入れることで回復