カテゴリー: Bootstrap

センティアテニス、トップにスライダーいれたが,クラス表のモーダルが表示挙動がおかしくなった

カルーセルをトップにいれてスライダー化しようとしたがクラス表のモーダルが表示挙動がおかしくなった。原因はカルーセルを囲むMOAT側で作ったdivでラップする必要があった。

			<div id="Contents_Top01">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12 col-space-0">




<div id="c1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators" >
    <li data-target="#c1" data-slide-to="0" class="active"></li>
    <li data-target="#c1" data-slide-to="1"></li>

  </ol>
  <div class="carousel-inner">
	  
	    <div class="item  active">
      <a href="studio/premier.html">
        <a href="special/special034.html"><img src="<?php echo esc_url(home_url('/')); ?>images/base_bg02.jpg" class="img-responsive hidden-xs" alt="" /><img src="<?php echo esc_url(home_url('/')); ?>images/base_top_bgsp2.jpg" class="img-responsive visible-xs" alt="" /></a>
      </a>
    </div>  
	  
	  
	  
   
    <div class="item">
     
        <img src="<?php echo esc_url(home_url('/')); ?>images/top_01.jpg" class="img-responsive hidden-xs" alt="" /><img src="<?php echo esc_url(home_url('/')); ?>images/top_img01_sp.jpg" class="img-responsive visible-xs" alt="" />
      
    </div>
   


  </div>
	
	
  <a class="carousel-control left" href="#c1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left fas fa-chevron-left"></span>
  </a>
  <a class="carousel-control right" href="#c1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right fas fa-chevron-right"></span>
  </a>
	
	

</div>






						</div>
					</div>
				</div>




</div>

赤文字のラップが必要だった。なお、テニスはbootstrap3で動いてるんだが、スライダーの左右の矢印アイコンがうまく表示されない。この部分をつかさどるglyphiconというfontawsomeのようなサービス側で、サービスが終わったようでアイコンを引っ張ってこれない。なので非表示になっていたのだが、かわりに下記のようにfontawsomeをいれた

<a class="carousel-control left" href="#c1" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left fas fa-chevron-left"></span>
  </a>
  <a class="carousel-control right" href="#c1" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right fas fa-chevron-right"></span>
  </a>

ヨガのスタッフページレイアウト崩れ

コメントが長いと直後の人じゃなくても別の箇所でスマホでレイアウトが崩れる。PCからタブレットまでは大丈夫なのだがスマホになるとくずれる。

その時は何か長めのコメント行を削ってみるとよくなる。

bootstrap4を既存のテンプレページにいれるとbootstrap.min.cssとバッティングしてレイアウト崩れるのでテンプレートページ下では使えない

bootstrap3 の　モーダルの幅変更

※下記はタブレットでうまく中央寄せできなかった。けど一応列記しておく。

.modal-lg で大きさは良しする

.modal-contentの幅を指定する。ただこれだけでは中央寄せにならないのでデフォルト幅が600ｐｘだから、例えば1200ｐｘの横幅にしたときは差分の1200-600＝600　600の半分のマージンの300ｐｘをネガティブマージンのmargin-left:-300px;とする。

https://yokano-jp.blogspot.com/2014/04/bootstrap-modal.html

Bootstrap: modal の幅を変える方法

Twitter Bootstrap ではモーダルなど便利なパーツが提供されています。
モーダルはデフォルトのサイズと小さいサイズが準備されているのですが、
中に入れたいコンテンツと微妙に幅が異なっている場合があります。

今回はデフォルトサイズのモーダルで幅が足りなかったので増やしまました。

div id="edit-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="width:740px; margin-left: -70px;">
            <div class="modal-header"><strong>ヘッダ</strong></div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                フッター
            </div>
        </div>
    </div>
</div>

モーダルの白い部分は .modal-content です。
ここの幅を変えるとモーダルの幅が変わります。
モーダルは幅によって中央寄せされないので、
モーダルの幅を増やすとその分右へ伸びてしまいます。
そのため、伸びた分をネガティブマージンで戻して中央へ寄せています。

.modal-content のデフォルトの幅が 600px だったので、
600px から増やした幅の半分をネガティブマージンへ回します。
今回は 600px -> 740px へ 140px 増やしたので、
増分 140px の半分 70px を使用しています。

bootstrap3 ガター0 溝無し

https://codepen.io/vipcrew/pen/bIcJC

 

<div class=”container”>
<div class=”row no-gutter”>
<h4>ガター溝なし</h4>
<div class=”col-sm-4″>
<a href=”#” class=”btn btn-block btn-primary”>フルサイズボタン</a>
</div>
<div class=”col-sm-4″>
<a href=”#” class=”btn btn-block btn-primary”>フルサイズボタン</a>
</div>
<div class=”col-sm-4″>
<a href=”#” class=”btn btn-block btn-primary”>フルサイズボタン</a>
</div>
</div>

 

 

/*======================================
= ガター溝なしスタイリング =
======================================*/
.no-gutter > [class*=’col-‘] {
padding-right:0;
padding-left:0;
}

mailformpro　スマホの幅問題

スマホ時のthの幅が記事術した通りにならないときは下記が必要。

textareaの幅を設定する。

(独自ファイルcommon.css)

 #mailformpro textarea
{ width: 80%;
margin-right: auto;
margin-left: auto;}

#form-container th {vertical-align: top;
width:30%;}

#form-container td {vertical-align: top;
}

 

 

htmlのフォーム
textareのsizeを30以上にするとスマホでははみだしてしまい、影響でthの幅も小さくなるから　size=”30″　にしておく。

 

 

スマホ用のCSSに下記記述しても優先されないので直接mailformproのファイルの編集する必要がある。

mailformpro/configs/config.jsの
‘SizeAjustPx’:6, を
‘SizeAjustPx’:null,　に変更

 

 

確認用画面の設定

mailformpro/config.cgi　のレスポンシブ機能はコメントオフにしておく。オンにすると確認画面でスマホは幅は100％以上になってしまう。また、html側ではtextareaが小っちゃくなる。

 

 

確認画面用の為にスマホ幅オーバーしないように

mfp.statics/css/confirm.overlay.css の
div#mfp_overlay_inner 
 { background-color: #FFF;
padding: 15px; 
margin: 0px auto; 
border-radius: 5px; 
box-shadow: 0px 0px 10px #000; 
/*width: 640px;*/　コメントアウトしておく
width: 100%; 　スマホ用にはみ出さないように
max-width:640px;}　ＰＣ＆タブレット用にmax-widthを設定

 

mfp.statics/css/confirm.css の
table#mfp_confirm_table tr th
{ white-space: nowrap;
/* width: 200px;*/　コメントアウトする
width: 30%;}　スマホ用にはみ出さないように

table#mfp_confirm_table tr td 
{ line-height: 1.5em; 
word-break: break-all;
width: 70%;}　スマホ用にはみ出さないように

【bootstrap3】グリッドシステムのボックスの高さをCSSだけで揃える。

https://namagomi-days.com/grid-system-height/

 

flexboxを使用して高さを揃える

floatさせているボックスの高さを常に揃えるにはflexboxというcssプロパティを使います。

flexboxは、CSS3で新しく追加された簡単に横並びにすることができる大注目のレイアウトテクニックです。

数年前は各ブラウザが対応していなくて気軽に使うわけにはいかなかったんですが、最近ではほとんどのブラウザが対応しています。昔のブラウザに対応しなければならないようなWebサイト制作でない限り、問題ないでしょう。

以下のようなクラスをスタイルシートに記述します。

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

ちなみにクラス名「row-eq-height」は、高さ(height)を等しく(equal)するという意味です。

このクラスを、col-*を指定している1つ上の親要素に指定します。rowが指定してあるdivタグですね。

 

これでボックスの高さは揃いましたが、borderを指定しているのは子要素のinner-boxなので、height:100%を指定してあげます。

.inner-box {
    border: 1px solid #ccc;
    height: 100%;
}

 

 

<div class="row row-eq-height">
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="inner-box">
            <p>テキスト…</p>
        </div>
    </div>
</div>

 

 

 

bootstrap ブートストラップテーブルのストライピング：ストライプの背景色を変更するにはどうすればよいですか？

花の湯　キャンペーン　special/sp001.htmlで実装

https://code.i-harness.com/ja-jp/q/13dc47b

ブートストラップを読み込んだ後、次のCSSスタイルを追加します。

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

要素の背景に背景画像全体を表示させるCSSの記述

http://o.inchiki.jp/obbr/242

 

1.coverを使う方法

background-image: url("sample.jpg");
background-size: cover;
  • 要素の背景を指定した画像で覆い尽くす。
  • 背景画像は1つだけ使われ、繰り返されない。
  • 画像の中に要素が内包されるイメージ。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • 要素が1枚の背景画像に内包され、要素の外側にはみ出した背景は表示されない。

2.containを使う方法

background-image: url("sample.jpg");
background-size: contain;
  • 要素の背景を指定した画像で敷き詰める。
  • 背景画像は1つ以上使われ、必要に応じて繰り返される。
  • 要素の中に画像が内包されるイメージ。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • 要素が1枚以上の背景画像を内包し、必ず画像の全体が表示される。

3.パーセントを使う方法（採用）

background-image: url("sample.jpg");
background-size: 100% auto;
// background-size: 横 縦;
  • 要素の背景を指定した画像で覆い尽くす、または敷き詰める。
    （要素のサイズを100%とし、背景画像を何%に拡大、または縮小するかを指定する。）
  • 指定が横縦伴に100%を超える場合、背景画像は1つだけ使われ、繰り返されない。
  • 横縦のサイズが伴に100%未満の場合、背景画像は1つ以上使われ、必要に応じて繰り返される。
  • 横の指定が100%で縦の指定がautoの場合、背景画像は1つ以上使われ、
    要素の縦のサイズが背景画像の縦のサイズを超えると繰り返し描画される。
  • 縦の指定が100%で横のサイズがautoの場合、背景画像は1つ以上使われ、
    要素の横のサイズが背景画像の横のサイズを超えると繰り返し描画される。
  • 割合の指定の仕方で、coverとしてもcontainとしても、また両者を合わせ持つ性質を持たせることができる。
  • 要素の縦横のサイズによって背景画像のサイズが決定される。
  • autoを指定した場合はアスペクト比を維持したサイズが自動的に決定される。
  • 横、縦伴に値を指定した場合、アスペクト比は考慮されない。

レイヤー重ね順　z-index 中央揃え position

https://saruwakakun.com/html-css/basic/z-index

https://cotodama.co/position-absolute-center/

 

ユニオンの婦中スタジオ移転のために、婦中ページに一時施行

親要素にrelative付けなくても丁度良い箇所（スタジオ情報箇所に挿入された？）

 

.studioOuter2 {
position: absolute;
z-index: 20;
height: 30%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

 

<div class=”container”>
<div class=”row”>
<div class=”col-xs-12 studioOuter2″>
<img src=”../images/studio/toyama_fuchu/jyunbi01.png” class=”img-responsive center-block” alt=”2018冬移転オープン”/></div>
</div>
</div>

赤い箇所は画像を中央揃えさせるため。

bootstrap カラム間のマージンや余白

https://tonari-it.com/column-margin/

Bootstrapのカラム割におけるカラム間のマージンは常に「15px+15px」の30pxです。
これはどのようなカラムサイズの組み合わせでも変わりません。

さらに言えば、並べたカラム全体の右端と左端に、15pxのマージンが発生している点もご注意ください。

 

https://tonari-it.com/column-margin-control/

 

カラム間のpadding-left padding-rightを0にするとカラムの余白15ｐｘを削除できる