本日はwebサイトの修正の修正を行いました。
———————————-
webサイトの修正
———————————-
Bootstrapでの表示位置の調整にoffsetというものがあります。
Bootstrapでは1行を12カラムに分けますが、
「col-md-6」と「col-md-6」の合計12を
「col-md-offset-2 col-md-4」と「col-md-6」にすると
幅2の空白、幅4、幅6の合計12にすることができます。
「md」はmediumの略でPCサイズ、「sm」はsmallの略でタブレットサイズです。
「col-md-offset-2 col-md-4」を「col-md-offset-2 col-md-4 col-sm-offset-1 col-sm-5」とすると
PCサイズの時は、幅2の空白、幅4
スマホサイズの時は、幅1の空白、幅5にすることができます。
.col-sx-xx(Extra small)
.col-sm-xx(Small)
.co-md-xx(Medium)
.co-lg-xx(Large)
各サイズで表示、非表示を切り替えることもできます。
PCサイズでは、横幅が広いので1行で表示し、スマホサイズでは横幅が狭いので2行で表示する場合、改行を表す
タグを、PCサイズでは非表示、スマホサイズでは表示にします。
class名「visible-xs」でスマホサイズの時のみ表示にすることができるので
「
ほげ
ふが
」で、PCサイズは1行、スマホサイズは2行にすることができます。
スマホサイズ以外の時（1行で表示の時）のみ「ほげ」と「ふが」の間にスラッシュを入れるには、「hidden-xs」をつかって
「
ほげ/
ふが
」とします。
下記のような場合、ほげ、ふが、ぴよ、ふー、PCサイズ、スマホサイズ均等に余白を入れたい場合、.container .rowに余白を入れるとスマホサイズの時に不均一になってしまします。
.container .row .rowによはくを入れましょう。
行間は、「line-height」で設定します。
リンク先は、あらかじめ設定したid名を指定します。