2つのコンテンツを横に並べてそのうち1つの位置をちょっとずらしたい。
ついでに背景の色も変えたい！なんてことありませんか？

mito

#30daysトライアル 2ndの実践演習を元に解説します！

完成イメージとワイヤーフレーム

完成イメージとワイヤーフレームはこちらです。

momo

いきなりコーディングを始めるんじゃなくて手書きでもいいのでワイヤーフレームを書くのはおすすめだよ！

mito

そうすることで、CSSの書く分量を減らしてくれるBootstrapを計画的に使えたり、sassの変数宣言の設計など保守性の高いコーディングができます！

ですね！

それで、順序としては
複雑になってくる→Bootstrap使おう
じゃなくて
こことここはBootstrap使って簡略化しよう→必要な箇所に必要な分だけ使う

って感じです！

だから最初に手書きでもいいのでワイヤーフレームを書くのが大事なんですよね

— ショーヘー@東フリCMO (@showheyohtaki) October 17, 2019

https://mito-lab.com/coding-30days-11-12/

https://mito-lab.com/coding-30days-13-14/

https://mito-lab.com/coding-30days-15-16/

https://mito-lab.com/coding-30days-2nd-7-8/

HTMLのコーディング

ワイヤーフレームに合わせてコーディングしていきます。

    <section id="access">
        <div class="accessItems">
            <div class="address offset">
                <h3 class="font-weight-bold pt-4 contentsTitle">Access</h3>
                <p class="py-5">〒106-6XXX<br>東京都港区六本木 XX町目Y番地<br>セントラルタワー</p>
                <div>
                    <a href="#" class="btnWhite">Google Maps</a>
                </div>
            </div>
            <div class="map">
                <iframe width="100%" height="100%" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15064.912379910664!2d139.87216275814978!3d35.63005293109904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d75d4baaaab%3A0x495f687a2ad1916f!2z5p2x5Lqs44OH44Kj44K644OL44O844K344O844O744Ob44OG44Or44Of44Op44Kz44K544K_!5e0!3m2!1sja!2sjp!4v1568727612321!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
        </div>
    </section> 

SCSSのコーディング

装飾を加えていきます。

#access{
    position: relative;
    height: 810px;
　　 color: #F3F3F3;

    .accessItems{
        display: flex;
        .address{
           padding-left: 93px;
        　　background-color: $black;
        　　color: #fff;
           width: 980px;
           height: 550px;
        }
        .map{
            box-shadow: 0 0 10px #d6d6d6;;
            position: absolute;
            top:120px;
            right: 55px;
            width: 720px;
            height: 515px;
        }
    }
}

まとめ

momo

親、子の関係性、何を基準にしているのか？を意識すると理解が早いよ！

mito

最初にワイヤーフレームを書いておくと早いです。

(スマホはレイアウトが異なっていたので、上のコードはcssでdisplay=noneのして新しく書きました。)

今回は、XDでデザインされたサイトを模写して学んだことをまとめます。

使わせていただいたものはこちらです

Photoshop、Illustrator、XDからのコーディングに慣れよう！

作成したものはこちらです。

mito

こちらのコーディングでfloatを使う部分でつまずいたので実験を交えつつ、解説します！

floatを使った横並び方法

この部分の実装方法です。

mito

floatを使って実装しました。

 <div class="itemRow">
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item"> 
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
            
                <a href="#" class="item"> 
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a> 
            </div>

.itemRow{       
        &:after{   
            content: '';
            display: block;
            clear: both;
        }
    }
    .item{
        margin: 0 50px 50px 0;
        padding: 20px 20px 10px 20px;
        width:360px;
        border-radius: 8px;
        box-shadow: 0 0 5px 0 rgba(17, 51, 72, 0.2);
        float: left;
        text-decoration: none;
        &:hover{
            opacity: 0.5;
        }
        &:nth-child(3n){
            margin-right: 0;
        }
    }
    .item-body{
        padding-top: 24px;
        color: #3c3c3c;
        line-height: 1.5;
        margin:0;
    }

実験１〜親に擬似要素を入れないとどうなるか？〜

以下の部分をコメントアウトします。

&:after{   
            content: '';
            display: block; //block要素
            clear: both;　//float解除
        }

すると、以下のように高さの設定がうまくいっておらず、下の要素と被って表示されます。

momo

親要素はもともと子要素の最下部に合わせて包み込む形で高さが決まるよ！でもfloatにより子要素が浮くので、包むものがなくなったと見なされて高さが保てなくなるんだよ。

擬似要素を作る＝親要素の最下部に新たにボックスを作ることで高さを保てるようになります。

mito

擬似要素でよく使われる、親要素にposition:relative,子要素にposition:absoluteと書いても高さは保てません。

positionは要素の位置を決める時に使うものなので今回はブロック要素で必然的に最下部に配置されるので不要です。

実験2〜子要素に一律右marginをつけるとどうなるか？〜

以下の部分をコメントアウトします。

&:nth-child(3n){
            margin-right: 0;
        }

横幅が足りず、折り返されてしまいます。

momo

nth-child(番号)を使うことで兄弟要素の中の1つだけ設定を変えることができるよ！

まとめ

横並び表示でfloatを使うポイントは2つです。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！

momo

2ndのDAY5,6はprogateを使ってSassを学んでいくよ！

Sass(サス)とは

Sass(Syntactically Awesome StyleSheet)は、CSSをより便利に効率的に書くことができる言語です。

mito

SASS記法とSCSS記法の2種類の書き方があります。私はSCSS記法を学びました。

momo

ファイルの拡張子もcssではなく、scssになるよ！

1. CSSより記述量を減らせること
2. コードを再利用できること

入れ子構造の使い方

1つのセレクタのなかに別のセレクタを入れ子にして指定できます。

<div class="message">
  <h1>About us</h1>
  <p>私たちは・・・・</p>
</div>

CSSで記載する場合

.message{
 width:100%
}
.massage h1{
 font-size:50px;
}
.massage p{
 font-saize:20px;
}

Scssで書く場合

.message{
 width:100%
　h1{
   font-size:50px;
  }
  p{
  font-saize:20px;
  }
}

momo

同じセレクタをなんども書かなくてすむね！

&記号の使い方

入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換えることができます。

momo

「&」はhoverだけでなく、activeなどにも使うことができるよ！

HTMLの記載↓

<div class="col-12 social">
   <a href="#" class="socoalIcon"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: #d5d5d5;
  }
}

momo

liなどの中の特定の要素の指定にも使えるよ！

HTMLの記載↓

<ul>
    <li>planA</li>
    <li class="color-change">PlanB</li>
    <li>PlanC</li>
</ul>

Scssの記載↓

li{
  padding-left: 10px;
  &.color-change{
    color:red;
  }
}

変数の定義

momo

右の値を左の変数に入れる(代入)という意味だよ。

$hover-color:#d5d5d5;

.fa-facebook{
  color: #3d5998;

　&:hover{
  color: $hover-color;
  }
}

mito

他でも使い回しができるので便利ですね。

まずはこの3つを使えるようになるだけでもかなり便利です。
以下はさらに効率的にコーディングするための書き方です。

mixinについて

mixinとは

mixinは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能です。

mixinの定義

momo

呼び出すときは@include mixin名;で呼び出すよ！

@mixin circle{
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  text-align: center;
  background-color: black;
}

.main {
  margin: 20px 10px;
  
  .small {
    @include circle;
    
    width: 10px;
    height: 10px;
  }
  
  .large {
     @include circle;
    
    width: 50px;
    height: 50px;
  }
}

引数を使ったmixinの定義

mixinの引数を指定しておくことで、includeから値を渡すことができます。

HTMLの記載↓

<div class="social">
  <a href="#"><i class="fab fa-facebook"></i></a>
</div>

Scssの記載↓

@mixin social($color){
  color:$color;
  padding: 3rem;
}
@mixin hoverColor{
  color:#d5d5d5;
}

.social{
  .fa-facebook{
    @include social(#3d5998);
      &:hover{
        @include hoverColor;
      } 
  }
}

関数の使い方

色を操作する関数はよく使われます。
HTMLの記載↓

    <div class="colorChange">
        <ul>
          <li class="orange1"></li>
          <li class="orange2"></li>
          <li class="black1"></li>
          <li class="black2"></li>
        </ul>
    </div>

Scssの記載↓

$orange:#fd7e00;
$black:#000;

.colorChange{
  margin-top: 10px;

  li{
    list-style: none;
    float: left;
    height: 50px;
    width:20%;
    margin-bottom: 10px;
  }
  .orange1{
    background-color:$orange;
  }
  .orange2{
    background-color:darken($orange,20%);
  }
  .black1{
    background-color:lighten($black,20%);
  }
  .black2{
    background-color:lighten($black,50%);
  }
}

結果

まとめ

これまで取り上げてきた書き方を実践することで効率的にコードが書けます。
環境設定については、VS codeの拡張機能「Easy Sass」で作りました。

VS codeについての記事はこちらです。

https://mito-lab.com/how-to-vscode/