【模写コーディング】Nortonサイト模写で学んだことを紹介します

僕がツイートしたこちらの項目からいくつか抜粋して紹介していきます。

模写で学んだ事

では、紹介していきます。

比較表の作り方

僕のいう比較表とはこちらの様な機能をまとめた表です。

他にも色々な場面でこうゆう表を作る機会があると思います。

まずHTMLを書く時にこの表をみて『tableタグ』で書いてあとはレイアウトしていけば大丈夫かなと

考えていました。

そこれ、実際にスタイルを決めていた時に以下の様な問題にぶつかりました。

自分のtableタグの知識が浅いからかもしれませんが、このレイアウトを実現するのが

苦しいと感じたので、tableタグでのコーディングをやめました。

そこで使ったのがdisplayプロパティの値である『grid』です

gridを使って

display: grid;
grid-template-columns: 150px 200px 200px 200px 200px;

このような感じで、横に5つ並べてその幅も一つ一つ指定ができます。

これで今回表の形を作る事ができました。

gridについて詳しく知りたい方はこちらをどうぞ

枠線に関しては『borderプロパティ 』を使って指定していきました。

グラデーションの付け方

Nortonのサイトではよく見るとバッググランドの色がグラデーションになっています

グラデーションの付け方は難しそうでとても簡単なので安心してください。

background: -moz-linear-gradient(top, 開始色, 終了色);
background: -webkit-linear-gradient(top, 開始色, 終了色);
background: linear-gradient(to bottom, 開始色, 終了色);

こちらを説明していくと、topからボトムにかけて開始色→終了色に

グラデーションしていくよという事です。このtop・bottomは変更できます。

div{
  width: 100px;
  height: 100px;
  background: -moz-linear-gradient(top, black, white);
  background: -webkit-linear-gradient(top, black, white);
  background: linear-gradient(to bottom, black, white);
}

この様に書いた結果はこんな感じです。

上から下に向かってグラデーションしていきます。

Sassの便利点・グラデーションの便利点

次に先ほど紹介したグラデーションを実践で使う時に便利だと思った点と、

Sassを使っていてよく使用した便利な機能を紹介します。

まだSassについてよくわからない方は、分かりやすく解説しているのでこちらを読んでみてください

早速ですがSassで便利だと思ったのは『ネスト』と『@mixin』です

この二つの恩恵をよく感じたのが『ボタン』をコーディングする時です。

@mixin btn_base{
  display:inline-block;
  background-color: #03851b;
  color: #fff;

  background: -moz-linear-gradient(top, #0a9502, #036a14);
  background: -webkit-linear-gradient(top, #0a9502, #036a14);
  background: linear-gradient(to bottom, #0a9502, #036a14);
    &:hover{
      background: -moz-linear-gradient(bottom, #0a9502, #036a14);
      background: -webkit-linear-gradient(bottom, #0a9502, #036a14);
      background: linear-gradient(to top, #0a9502, #036a14);
    }
}

実際に使っていたコードですが、『btn_base』などとしてボタンの基礎部分だけをまとめておきます

あとは、部分的にサイズなどが違うのでこれを『@include』で呼び出して

サイズだけいじれば完成というわけです。

また『&:hover』をネストで書く事で視認性もよくなるし、効率が良いです

これは他のhoverアクションが欲しい要素の時も同じでとても便利でした。

ちなみにこのグラデーションはhoverした時にグラデーションの方向を逆にすることで

hoverしている事を表示しています。