スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

スタイルシート(CSS)

公開後のメンテナンスでも特にスタイルシート(css)の一貫性は重要です。公開後も管理がしやすい、ルールに沿ったスタイルシートにしてください。

CSSファイルの種類

 .com ルートディレクトリー
└ css
  ├ reset.css--------:リセット用
  ├ style.css--------:WEB 1,280px以上
  ├ pc.css-----------:WEB 1,279px以下、1,025以上
  ├ tablet.css-------:WEB 1,024以下、601px以上
  └ smart.css--------:WEB 600px以下

制作者の方が編集をするファイルは、主に上記の4つのファイルです。その他にも複数のcssファイルが存在していますが、基本的には編集不要です。

cssファイルの読込順序

以下の通りにcssファイルが読み込まれます。reset.cssは、ファイル名の通り、リセット用のファイルです。その次に読み込まれる、style.css(つまり1,280px以上のデバイス)から制作をスタートしてください。その後、pc.css, tablet.css, smart.css の順でスタイルを上書きしながらスタイルシートを最短表現で記述していってください。

reset.css
style.css
pc.css
tablet.css
smart.css

間違っている記述方法

どのファイルに書いても同じ記述(4行目のflex-wrap:wrap;)を末端のsmart.cssに記載してしまっている例。smart.cssに書かなくてはいけない記述であれば問題ありませんが、style.cssに書いても影響がない場合は、極力style.cssに記述をしてください。

/*style.css*/
.about-01-container{
  display:flex;
}
/*smart.css*/
.about-01-container{
  flex-wrap:wrap;
  margin:5px;
}

正しい記述方法

どのファイルに書いても同じ記述(4行目のflex-wrap:wrap;)を先頭のstyle.cssに記載してしいる例。

/*style.css*/
.about-01-container{
  display:flex;
  flex-wrap:wrap;
}
/*smart.css*/
.about-01-container{
  margin:5px;
}

cssファイル内の記載順序

随時変更がある可能性がありますが、基本的な順序は以下です。B-02. headerの内容を、B-14. 内部ページのところに書いたりすると、管理が煩雑になってしまいます。記載順序をしっかりと守って、誰がいつ見ても分かるようなスタイルシートの記述をしてください。

B-01. 枠組共通
B-02. header
B-03. nav
B-04. main共通
B-05. h1,h2見出し
B-06. breadcrumb
B-07. pager
B-08. aside
B-09. footer
B-10. toppage
B-11. form
B-12. レギュレーション
B-13. 検索結果
B-14. 内部ページ

ID、classについて

前提として、サイトに導入するCMS freoのページIDに依存します。freoのページIDは、サイト制作者orディレクターが決定しますが、例えば以下のようなものがあります。

  • about
  • about/term
  • company
  • company/president
  • area
  • area/kanto
  • area/kanto/saitama
  • area/kanto/saitama/fujimi

使い分け

IDを使用せずに、classを使用してコーディングしてください。idを利用しなくてはいけない場合のみ、idを使用してください。例:アンカーリンクなど。

<div class="more"><a href="#">更に詳しく</a></div>
<h3 id="01">主にアンカーリンクの場合に使用</h3>

ID名の付け方

ページの順序に従ったIDをつけてください。

<h2 id="01">
<h2 id="02">
<h3 id="02-01">
<h3 id="02-02">
<h4 id="02-02-01">
<h4 id="02-02-02">
<h2 id="03">

class名の付け方

freoのページIDに沿った名称をつけてください。

トップページの場合

トップページは、top-01, top-02と順番にクラス名を付けてください。そのため、ページIDにはtopという名称を使わないことを推奨します。

<section class="top-01">
<section class="top-02">
<div class="top-02-container">
<ul class="top-02-box">

freoのページIDが、about の場合

ページIDのaboutが接頭辞となり、その後にコンテンツに沿ったナンバリング、最後に要素の意味をあらわす英単語とする。

<section class="about-01">
<section class="about-02">
<div class="about-02-container">
<ul class="about-02-box">

freoのページIDが、about/term の場合

ページIDのabout/termの最後の/(スラッシュ)以降の言葉(このケースはterm)が接頭辞となり、その後にコンテンツに沿ったナンバリング、最後に要素の意味をあらわす英単語とする。

<section class="term-01">
<section class="term-02">
<div class="term-02-container">
<ul class="term-02-box">

親子関係

親子関係を守って、class名をつけていってください。

間違っている親子関係の例

<section>タグを起点に考えて、親要素に、company-01 というクラス名が付与された場合は、その中の要素は company-01-xxxxというクラス名を付与する。xxxxの部分は、意味を連想できるような英単語を採用する。

<section class="company-01">
    <div class="company-02-container">
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </div>
</section>
正しい親子関係の例

親要素のsectionタグに、company-01 というクラス名が付与されているので、その子要素であるdivタグに、company-01-containerというクラス名を付与。containerとは容器などを意味する言葉(その言葉が何を意味するか、他のスタッフでも理解できるように名称を付ける)。

<section class="company-01">
    <div class="company-01-container">
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </div>
</section>
親子関係のクラス名をつけなくてよい例

<div class="conversion">などの共通パーツを使用する場合は、親子関係通りのコーディングは不要です。

<section class="company-01">
    <div class="company-01-container">
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </div>
    <div class="conversion"><a href="/form/inquiry">お申し込みはこちらへ</a></div>
</section>

ショートハンドの使い方

ショートハンドは無意味に使用せずに、スタイルシートのメンテナンスが簡易的で最短表現になるようにしてください。また、以下の注意点にも留意してください。

  • スタイルが継承されているプロパティに使用しない。
  • 指定する値が1つのならば使用しない。

間違った使用例

.about{
  margin: 10rem 4rem 5rem 4rem;
}
.about.term{
  margin: 10rem 4rem 3rem 4rem;
}

正しい使用例

.about {
  margin: 10rem 4rem 5rem 4rem;
}
.about.term {
  margin-bottom: 3rem;
}

ベンダープレフィックスの順序

  1. -webkit-
  2. -moz-
  3. -ms-
  4. -o-
  5. ベンダープレフィックスなし
.about {
  -webkit-box-sizing: transition .3s;
  -moz-box-sizing: transition .3s;
  -ms-box-sizing: transition .3s;
  -o-box-sizing: transition .3s;
  box-sizing: transition .3s;
}

以下のサイトで、自動でベンダープレフィックスを付けてくれるので、ベンダープレフィックスなしで作成し、最後に以下のサイトでベンダープレフィックスつきのCSSを生成する。

サイズ指定

font-size
rem指定
margin, padding
px / rem / %など適宜判断
line-height
単位なしで指定

以下を、style.cssに記述することで、デバイスサイズが1,280px以上で1.6rem = 16px, 2.4rem = 24pxと同等になる。

html{
  font-size:62.5%;
}
@media screen and (max-width:1279px){
  html{
    font-size:56.25%;
  }
}
p{
  line-height:1.6;
}

間違った例

p{
    font-size:16px;
}
h1{
    font-size:40px;
}

正しい例

p{
    font-size:1.6rem;
}
h1{
    font-size:4.0rem;
}

font awesome

標準テンプレートに、font awesomeを導入しています。/templates/header.html 内に以下のような記述があります。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

アイコンの種類を参照する

以下はfont awesomeのスクリーンショットです。使いたいアイコンページに行くと、以下の赤線箇所に必要なコードを見つけることができます。

fontawesomeのスクリーンショット

cssに::beforeを使って埋め込む方法

nav ul li::before{
  content: "\f015";
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  padding-right:1.0rem;
}

cssにabsoluteを使って埋め込む方法

blockquote{
  position: relative;
}
blockquote::before{
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  font-weight:900;
  position: absolute;
  top:10px;
  left:10px;
}

iタグを使用して埋め込む方法

<i class="fas fa-sort-down"></i>

その他の実例

複数指定の際の改行

#top .top-09 h2::before, #top .top-12 h2::before{
  font-size:2.0rem;
}

↓見づらいので、カンマの後に改行を入れる

#top .top-09 h2::before,
#top .top-12 h2::before{
  font-size:2.0rem;
}