最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【実例アリ】BEMとSassでのコーディング方法

Web制作

【実例アリ】BEMとSassでのコーディング方法

最近注目されているのが、CSSのメタ言語であるSassです。

近年、利用者が増えており、年々注目度が高まっています。

そして、Sassと相性が良いのは、CSSの設計ルールの1つであるBEMです。

今回は、BEMの設計に基づいたSassでのコーディングを紹介します。

Sassとは

SassとはCSSを拡張したメタ言語です。

もっと簡単に説明すると、CSSを効率的に書けるようにした言語です。

なので、Sassでできることや基本的な記述方法は、CSSと同じになります。

Sassのメリット

Sassのメリットはとにかく効率的に記述できることです。

このように、入れ子形式で記述することで自動的に形成されます。

Sassのコード

.sample{
 color: #333;
 p{
  font-size: 16px;
 }
}

CSSにコンパイルしたコード

.sample{
 color: #333;
}

.sample p{
  font-size: 16px;
}

入れ子形式で記述することで、自動的に親要素を取得してくれます。

Sassにはこれ以外も便利な機能があります。

Sassの使い方については、過去に執筆した【超効率的】Sassを使って生産性をアップしようを参考にしてください。

また、CSSの設計やBEMについて詳しく知りたい方は、過去に執筆した【保存版】絶対に破綻しないCSSの設計を学ぼうを参考にしてください。

【実例】BEMに基づいたSassを使ったコーディング

実際のコードを見る前に、コーディングした後のWEBサイトを紹介します。

今回、コーディングしたのはこのようなWEEBサイトです。

BEMに基づいたHTMLのコードはコチラになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <div class="header__fixed">
            <div class="header__fixed__wrapper">
                <div class="header__fixed__wrapper__logo">
                    <h1>
                        ロゴ
                    </h1>
                </div>
                <nav class="header__fixed__wrapper__gNav">
                    <ul class="header__fixed__wrapper__gNav__ul">
                        <li class="header__fixed__wrapper__gNav__ul__li"><a href="#">ナビ</a></li>
                        <li class="header__fixed__wrapper__gNav__ul__li"><a href="#">ナビ</a></li>
                        <li class="header__fixed__wrapper__gNav__ul__li"><a href="#">ナビ</a></li>
                        <li class="header__fixed__wrapper__gNav__ul__li"><a href="#">ナビ</a></li>
                        <li class="header__fixed__wrapper__gNav__ul__li"><a href="#">ナビ</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="header__content">
            <div class="header__content__ttl">
                <p class="header__content__ttl__main">
                    Design Company
                </p>
                <div class="header__content__ttl__sub">
                    Something amazing
                </div>
            </div>
            <div class="header__content__btn">
                <a href="#">ABOUT</a>
            </div>
        </div>
    </header>
    <section class="maintenance">
        <div class="maintenance__ttl">
            <figure class="maintenance__ttl__img">
                <img src="img/house.svg" alt="">
            </figure>
            <h2 class="maintenance__ttl__text">
                3つの安心のメンテナンス
            </h2>
            <span class="maintenance__ttl__sub">
                Three of peace of mind
            </span>
        </div>
        <div class="maintenance__ul">
            <div class="maintenance__ul__li">
                <figure class="maintenance__ul__li__img">
                    <img src="img/content.jpg" alt="">
                </figure>
                <h3 class="maintenance__ul__li__ttl">
                    任せられる安心
                </h3>
                <p class="maintenance__ul__li__text">
                    安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。
                </p>
            </div>
            <div class="maintenance__ul__li">
                <figure class="maintenance__ul__li__img">
                    <img src="img/content.jpg" alt="">
                </figure>
                <h3 class="maintenance__ul__li__ttl">
                    任せられる安心
                </h3>
                <p class="maintenance__ul__li__text">
                    安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。
                </p>
            </div>
            <div class="maintenance__ul__li">
                <div class="maintenance__ul__li__img">
                    <img src="img/content.jpg" alt="">
                </div>
                <h3 class="maintenance__ul__li__ttl">
                    任せられる安心
                </h3>
                <p class="maintenance__ul__li__text">
                    安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。安心の言葉が入ります。
                </p>
            </div>
        </div>
    </section>
    <section class="support">
        <div class="support__ttl">
            <div class="support__ttl__img">
                <img src="img/house.svg" alt="">
            </div>
            <h2 class="support__ttl__text">
                サポート体制
            </h2>
            <span class="support__ttl__sub">
                support system
            </span>
        </div>
        <p class="support__message">
            メンテンナンスの大切さをお伝えします。
        </p>
        <p class="support__desc">
            文言が入ります。文言が入ります。文言が入ります。文言が入ります。
            文言が入ります。文言が入ります。文言が入ります。
        </p>
        <div class="support__btn"><a href="#">詳しく見る</a></div>
    </section>
    <section class="sectionArea">
        <h2 class="sectionArea__ttl">
            SECTION-AREA
        </h2>
        <div class="sectionArea__ul">
            <div class="sectionArea__ul__li"><a href="#">会社概要<br><span class="sectionArea__ul__li__sub">Company</span></a></div>
            <div class="sectionArea__ul__li"><a href="#">よくある質問<br><span class="sectionArea__ul__li__sub">Question</span></a></div>
            <div class="sectionArea__ul__li"><a href="#">お問い合わせ<br><span class="sectionArea__ul__li__sub">Contact</span></a></div>
        </div>
    </section>
    <footer class="footer">
        <div class="footer__wrap">
            <nav class="footer__wrap__nav">
                <ul class="footer__wrap__nav__ul">
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                    <li class="footer__wrap__nav__ul__li"><a href="#">会社について</a></li>
                </ul>
            </nav>
            <div class="footer__wrap__info">
                <img src="img/footer_logo.svg" alt="">
                <div class="footer__wrap__info__tel">
                    06-000-0000
                </div>
                <adress class="footer__wrap__info__adress">
                    東京都〇〇区〇〇ー〇〇ー〇〇
                </adress>
            </div>
            <div class="footer__wrap__map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4824506003333!2d139.689727715259!3d35.689743630192346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1537770963221" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>
        <div class="footer__copyright">
            <p><small>&copy;copyright</small></p>
        </div>
    </footer>
</body>
</html>

次はSassのコードです。

@charset "utf-8";

//幅とマージンオート
@mixin width{
    width: 960px;
    margin: 0 auto;
}

//フレックスボックス両端寄せ
@mixin flex_between{
    display: flex;
    justify-content: space-between;
}

//フレックスボックス縦の中央寄せ
@mixin flex_align_center{
    display: flex;
    align-items: center;
}

//ボタン
@mixin btn($border_color){
    width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    border: 1px solid $border_color;
}

//ボタンのリンク
@mixin btnLink($color){
    color: $color;
    text-decoration: none;
    font-size: 20px;
    line-height: 40px;
    display: block;
    transition: .4s;
}

//ボタンのリンクのホバー
@mixin btnLinkHover($color, $background){
    color: $color;
    background: $background;
}



.header{
    background: url(../img/mv.png) center/cover no-repeat;
    height: 500px;
    position: relative;
    @include flex_align_center;
    &::before{
        content: "";
        background: #47c47a;
        opacity: 0.5;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    &__fixed{
        width: 100%;
        background: #fff;
        opacity: 0.8;
        position: fixed;
        top: 0;
        z-index: 100;
        &__wrapper{
            @include width;
            @include flex_between;
            align-items: center;
            padding: 10px 0;
            &__gNav__ul{
                display: flex;
                &__li a{
                    text-decoration: none;
                    color: #333;
                    padding: 0 20px;
                    display: block;
                    position: relative;
                    &::before,&::after{
                        content: "";
                        background: #333;
                        display: block;
                        width: 0px;
                        height: 2px;
                        position: absolute;
                        top: 100%;
                        transition: .4s;
                    }
                    &::before{
                        left: 50%;
                    }
                    &::after{
                        right: 50%;
                    }
                    &:hover::before,&:hover::after{
                        width: 20px;
                    }
                }
            }
        }
    }
    &__content{
        width: 100%;
        color: #fff;
        text-align: center;
        z-index: 10;
        &__ttl__main{
            font-size: 50px;
            line-height: 70px;
        }
        &__ttl__sub{
            font-size: 20px;
        }
        &__btn{
            @include btn(#fff);
            & a{
                @include btnLink(#fff);
                &:hover{
                    @include btnLinkHover(#47c47a, #fff);
                }
            }
        }
    }
}

.maintenance{
    @include width;
    margin-bottom: 50px;
    &__ttl{
        text-align: center;
        margin-bottom: 50px;
        &__img{
            margin: 50px 0 10px 0;
            & img{
                width: 50px;
            }
        }
        &__text{
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
        }
        &__sub{
            font-size: 16px;
            padding: 0 10px;
            color: #aaa;
            position: relative;
            &::before,&::after{
                content: "";
                background: #aaa;
                width: 30px;
                height: 1px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            &::before{
                right: 100%;
            }
            &::after{
                left: 100%;
            }
        }
    }
    &__ul{
        @include flex_between;
        &__li{
            width: 250px;
            &__img{
                & img{
                    border-radius: 50%;
                }
            }
            &__ttl{
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                margin: 15px 0;
            }
            &__text{
                font-size: 18px;
                line-height: 1.5;
            }
        }
    }
}

.support{
    padding-bottom: 80px;
    background: url(../img/bg.png) center/cover no-repeat;
    &__ttl{
        text-align: center;
        padding-top: 10px;
        margin-bottom: 50px;
        &__img{
            margin: 50px 0 10px 0;
            & img{
                width: 50px;
            }
        }
        &__text{
            font-size: 24px;
            font-weight: bold;
            line-height: 1;
        }
        &__sub{
            font-size: 16px;
            padding: 0 10px;
            color: #aaa;
            position: relative;
            &::before,&::after{
                content: "";
                background: #aaa;
                width: 30px;
                height: 1px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            &::before{
                content: "\A" ;
                white-space: pre ;
                right: 100%;
            }
            &::after{
                left: 100%;
            }
        }
    }
    &__message{
        font-size: 20px;
        font-weight: bold;
        margin-top: 40px;
        text-align: center;
    }
    &__desc{
        font-size: 18px;
        text-align: center;
        margin: 35px 0 70px;
    }
    &__btn{
        @include btn(#47c47a);
        & a{
            @include btnLink(#47c47a);
            text-align: center;
            &:hover{
                @include btnLinkHover(#fff, #47c47a);
            }
        }
    }
}

.sectionArea{
    background: #F2F2F2;
    padding: 40px 0 75px;
    &__ttl{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        padding-bottom: 20px;
        margin-bottom: 40px;
        line-height: 1.1;
        position: relative;
        &::before{
            content: "";
            display: block;
            width: 100px;
            height: 5px;
            background: #333;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    &__ul{
        @include width;
        @include flex_between;
        &__li{
            width: 300px;
             a{
                display: block;
                background: #fff;
                font-size: 20px;
                text-align: center;
                text-decoration: none;
                color: #333;
                line-height: 1.1;
                padding: 15px 0;
                position: relative;
                transition: .4s;
                &::before{
                    content: '';
                    display: block;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0 0 15px 15px;
                    border-color: transparent transparent #16ac43 transparent;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    transition: .4s;
                }
                &:hover::before{
                    border-color: transparent transparent #f0ad42 transparent;
                }
            }
            &__sub{
                color: #16AC44;
                font-size: 14px;
            }
        }
    }
}

.footer{
    background: #16ac43;
    color: #fff;
    &__wrap{
        @include width;
        @include flex_between;
        padding: 50px 0 50px 0;
        &__nav{
            width: 300px;
            &__ul{
                display: flex;
                flex-wrap: wrap;
                &__li{
                    width: 50%;
                     a{
                        font-size: 14px;
                        color: #fff;
                        text-decoration: none;
                        padding-left: 20px;
                        background: url(../img/arrow.svg) center left/8px no-repeat;
                        transition: .4s;
                        &:hover{
                            background-position: center left 8px;
                        }
                    }
                }
            }
        }
        &__info{
            width: 200px;
            & img{
                width: 200px;
                display: block;
                margin-bottom: 10px;
            }
            &__tel{
                display: block;
                line-height: 1;
            }
        }
    }
    &__copyright{
        text-align: center;
    }
}

このSassコードをコンパイルすると、このようなCSSコードになります。

.header {
  background: url(../img/mv.png) center/cover no-repeat;
  height: 500px;
  position: relative;
  display: flex;
  align-items: center;
}
.header::before {
  content: "";
  background: #47c47a;
  opacity: 0.5;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.header__fixed {
  width: 100%;
  background: #fff;
  opacity: 0.8;
  position: fixed;
  top: 0;
  z-index: 100;
}
.header__fixed__wrapper {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.header__fixed__wrapper__gNav__ul {
  display: flex;
}
.header__fixed__wrapper__gNav__ul__li a {
  text-decoration: none;
  color: #333;
  padding: 0 20px;
  display: block;
  position: relative;
}
.header__fixed__wrapper__gNav__ul__li a::before, .header__fixed__wrapper__gNav__ul__li a::after {
  content: "";
  background: #333;
  display: block;
  width: 0px;
  height: 2px;
  position: absolute;
  top: 100%;
  transition: .4s;
}
.header__fixed__wrapper__gNav__ul__li a::before {
  left: 50%;
}
.header__fixed__wrapper__gNav__ul__li a::after {
  right: 50%;
}
.header__fixed__wrapper__gNav__ul__li a:hover::before, .header__fixed__wrapper__gNav__ul__li a:hover::after {
  width: 20px;
}
.header__content {
  width: 100%;
  color: #fff;
  text-align: center;
  z-index: 10;
}
.header__content__ttl__main {
  font-size: 50px;
  line-height: 70px;
}
.header__content__ttl__sub {
  font-size: 20px;
}
.header__content__btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
  border: 1px solid #fff;
}
.header__content__btn a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  line-height: 40px;
  display: block;
  transition: .4s;
}
.header__content__btn a:hover {
  color: #47c47a;
  background: #fff;
}

.maintenance {
  width: 960px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.maintenance__ttl {
  text-align: center;
  margin-bottom: 50px;
}
.maintenance__ttl__img {
  margin: 50px 0 10px 0;
}
.maintenance__ttl__img img {
  width: 50px;
}
.maintenance__ttl__text {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
.maintenance__ttl__sub {
  font-size: 16px;
  padding: 0 10px;
  color: #aaa;
  position: relative;
}
.maintenance__ttl__sub::before, .maintenance__ttl__sub::after {
  content: "";
  background: #aaa;
  width: 30px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.maintenance__ttl__sub::before {
  right: 100%;
}
.maintenance__ttl__sub::after {
  left: 100%;
}
.maintenance__ul {
  display: flex;
  justify-content: space-between;
}
.maintenance__ul__li {
  width: 250px;
}
.maintenance__ul__li__img img {
  border-radius: 50%;
}
.maintenance__ul__li__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 15px 0;
}
.maintenance__ul__li__text {
  font-size: 18px;
  line-height: 1.5;
}

.support {
  padding-bottom: 80px;
  background: url(../img/bg.png) center/cover no-repeat;
}
.support__ttl {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 50px;
}
.support__ttl__img {
  margin: 50px 0 10px 0;
}
.support__ttl__img img {
  width: 50px;
}
.support__ttl__text {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
.support__ttl__sub {
  font-size: 16px;
  padding: 0 10px;
  color: #aaa;
  position: relative;
}
.support__ttl__sub::before, .support__ttl__sub::after {
  content: "";
  background: #aaa;
  width: 30px;
  height: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.support__ttl__sub::before {
  content: "\a";
  white-space: pre;
  right: 100%;
}
.support__ttl__sub::after {
  left: 100%;
}
.support__message {
  font-size: 20px;
  font-weight: bold;
  margin-top: 40px;
  text-align: center;
}
.support__desc {
  font-size: 18px;
  text-align: center;
  margin: 35px 0 70px;
}
.support__btn {
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
  border: 1px solid #47c47a;
}
.support__btn a {
  color: #47c47a;
  text-decoration: none;
  font-size: 20px;
  line-height: 40px;
  display: block;
  transition: .4s;
  text-align: center;
}
.support__btn a:hover {
  color: #fff;
  background: #47c47a;
}

.sectionArea {
  background: #F2F2F2;
  padding: 40px 0 75px;
}
.sectionArea__ttl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 40px;
  line-height: 1.1;
  position: relative;
}
.sectionArea__ttl::before {
  content: "";
  display: block;
  width: 100px;
  height: 5px;
  background: #333;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.sectionArea__ul {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.sectionArea__ul__li {
  width: 300px;
}
.sectionArea__ul__li a {
  display: block;
  background: #fff;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  color: #333;
  line-height: 1.1;
  padding: 15px 0;
  position: relative;
  transition: .4s;
}
.sectionArea__ul__li a::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 15px;
  border-color: transparent transparent #16ac43 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: .4s;
}
.sectionArea__ul__li a:hover::before {
  border-color: transparent transparent #f0ad42 transparent;
}
.sectionArea__ul__li__sub {
  color: #16AC44;
  font-size: 14px;
}

.footer {
  background: #16ac43;
  color: #fff;
}
.footer__wrap {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 50px 0 50px 0;
}
.footer__wrap__nav {
  width: 300px;
}
.footer__wrap__nav__ul {
  display: flex;
  flex-wrap: wrap;
}
.footer__wrap__nav__ul__li {
  width: 50%;
}
.footer__wrap__nav__ul__li a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding-left: 20px;
  background: url(../img/arrow.svg) center left/8px no-repeat;
  transition: .4s;
}
.footer__wrap__nav__ul__li a:hover {
  background-position: center left 8px;
}
.footer__wrap__info {
  width: 200px;
}
.footer__wrap__info img {
  width: 200px;
  display: block;
  margin-bottom: 10px;
}
.footer__wrap__info__tel {
  display: block;
  line-height: 1;
}
.footer__copyright {
  text-align: center;
}

/*# sourceMappingURL=style.css.map */

まとめ

いかがでしたか？

Sassの「&」を使うことで簡単にコーディングできます。

BEMとSassはとても相性が良いので、ぜひ使ってみてください。