スタイルシート(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

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

/*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を使用してコーディングしてください。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に沿った名称をつけてください。

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

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

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

<section class="company-01">
    <div class="company-02-container">
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </div>
</section>

<section class="company-01">
    <div class="company-01-container">
        <ul>
            <li>aaaaa</li>
            <li>aaaaa</li>
        </ul>
    </div>
</section>

<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>

間違った使用例

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

正しい使用例

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

間違った例

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

正しい例

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

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

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

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;
}

一括指定

.top-03 h2,
.top-04 h2,
.top-05 h2,
.top-06 h2,
.top-07 h2,
.top-03 p {
    text-align: center;
}

.top-04 h2,
.top-06 h2,
.top-04 ul li a span {
    color: #fff;
}

.top-03 h2{
    text-align: center;
}
.top-03 p {
    text-align: center;    
}

.top-04 h2{
    text-align: center;
    color:#fff;
}
.top-04 ul li a span {
    color: #fff;
}

.top-05 h2{
    text-align: center;    
}

.top-06 h2{
    text-align:center;
    color: #fff;
}

.top-07 h2{
    text-align: center;    
}