端末サイズごとに、タグの表示・非表示

CSSで、画面サイズ別に切り替える

CSSファイルを、マルチデバイス対応で分割させて、表示・非表示のタグを分けることができる

１．　display:none;

noneはブロックレベルで要素が表示されず、レイアウトに影響を与えない

２．　display:block;

blockはブロックボックスを生成する

※１．２．を組み合わせれば、マルチデバイスで表示・非表示に対応することができる

１．

classのspの部分は非表示(スマホ以外のときは非表示にさせるようにする)

.sp{
     display:none;
}

classのtabの部分は非表示(タブレット以外のときは非表示にさせるようにする)

.tab{
     display:none;
}

classのpcの部分は非表示(PC以外のときは非表示にさせるようにする)

.pc{
     display: none;
}

２．

classのspの部分は表示(スマホで表示にする)

.sp{
     display: block;
}

classのtabの部分は表示(タブレットで表示にする)

.tab{
     display: block;
}

classのpcの部分は表示(PCで表示にする)

.pc{
     display: block;
}