カテゴリー:
コーディングルール
閲覧数:679 配信日:2019-10-13 11:26
ページ固有CSSの取り扱い
案a.使用しているページでのみ読み込む
使用していないページでは読み込まない
<?php if($individual){ ?>
<style>
.h1title{
background-color:#<?php echo $randColor[0]; ?>;
color:white;
padding:1rem;
}
body {
padding-top: 0;
}
</style>
<?php } ?>案b.全ページで読み込む
使用していないページでも読み込む
基本方針
・一意なclass名を付与
・minify化したCSSファイルを全ページで一括読込
動的部分
その都度方針を決定していく
ページとの紐付け
そのページで使用されているCSSを知りたい、ということがよくある
案A.1ファイル。コメントでページ単位に分ける
/*---------- 共通ページ ----------*/
/*グローバルナビ表示*/
.gnavi {
display:inline-block;
}
/*---------- トップページ ----------*/
案B.ページ毎にファイルを分ける
・ページで使用されている「id名」「class名」をChromeで取得したい