【無料配布】HTML/SCSSコーディングテンプレート【基本】

Web制作

今日は、Twitterで配布する「HTML/SCSSコーディングテンプレート【基本】」の解説をしたいと思います。

こんにちは。Webコーダーのharuです。

*わたしについて*
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。2020.5.11~学習スタート2020.8.10~実務でコーディングしていますHTML/CSS(SCSS)/jQuery に加えWordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

HTML/SCSSコーディングテンプレート【基本】配布します

僭越ながら、Twitter(@fuwafuwahappy)のフォロワーさんが1000人を超えました。

今回、Twitterやブログをみてくださっているみなさんに何かgiveしたいと思い、テンプレ配布の企画をしました。

https://twitter.com/fuwafuwahappy/status/1319620726614183936?s=20
https://twitter.com/fuwafuwahappy/status/1320661595815460879?s=20

配布は無料です。

ご興味をお持ちのかたがいらっしゃいましたら、Twitterより受け付けておりますので、お気軽にお知らせください♪

2020.11.3追記 ブログを見てくださった 正直プログラマーさん(@nyangineer256)からフィードバックをいただき、いくつか追記しました!本当に感謝いたします!追記した部分は、この付箋背景の場所です。

このテンプレートの使い方

!) 注意点です。
このファイルは、コーディングを始めるときの基本の記述を集めたものです。
何か完成している模擬サイトがあるわけではありません。

わたしは、いつも実務コーディングをはじめるときに、

①フォルダごとコピー
②VSCodeでこのフォルダをひらく
③デザインカンプに合わせて、いらない記述は消す
④コーディング開始

という手順を踏んでいます。

・HTMLの基本の記述
・OGP設定やSEO設定
・SCSSの変数やmixin設定

などは毎回同じのため、今回のようにテンプレ化して時短コーディングに活かしています。

今回は、わたしがコーディングすることの多いLP(= ランディングページという1枚のペラサイト)寄りです。ご了承ください。

*** おまけ ***

上記に加えて、よく実装する

・横並びのヘッダーナビ
・セクション共通のタイトル・インナー
・jQuery ヘッダー固定
・jQuery ハンバーガーメニュー

などを加えました。

必要ない部分は削除、または加筆をして、ご自身に合ったテンプレに編集していただければと思います。

コードの解説

今回、配布するにあたって、

・Web制作会社にお勤めの はなえさん(@kon_hanae)
・Webディベロッパーの ホンマさん(@hirohom2)

に監修していただき、お墨付きをいただきました。この場を借りて厚く御礼申し上げます。

どうぞ、ご安心してテンプレをお使いください!

HTML

まず、HTMLの解説からです。

<head>内の記述

たくさん書いてある<meta>タグはOGP設定 です。

OGPは「Open Graph Protcol」の略で、SNS上で共有されたときに、画像やタイトル、説明文などが正しく伝わるように設定するHTMLです。

詳しくは、こちらをご覧ください!

・<link>で、CSSの読み込みをします。

2020.11.3追記
・OGP内の「og:type」ですが、今回よく使用するwebsite/blog/articleしか書いていませんが、他にもたくさんの種類があります。断定のようになってしまい申し訳ございません!
その他の種類は、こちらにあります。用途にあったものを使用します。→https://ogp.me/
・OGP内の「og:image」ですが、サムネイル画像のURLは絶対パスで記述します。
OK) https://twitter.com/fuwafuwahappy/photo
NG) ../common/img/photo.png

<header>

次にヘッダーです。

ヘッダーはいろいろな形がありますが、今回は以下のような形のヘッダーナビをテンプレに入れました。


クリスタ さんのカンプより

ナビゲーションを作るときは<ul><li>でリストを作るので、別の形のヘッダーナビでもリストはコピペできます。テンプレに入れておくと楽です。

スマホ版のハンバーガーメニューもLPではよく使うので入れておきました。

2020.11.3追記
・ハンバーガーメニューのクラス名ですが、hamburger__btnより「menu_btn{}」のほうがいいと思います。 「humburger」というようにデザイン自体の内容をクラス名に入れてしまうとデザインの変更のためにCSSのクラス名の変更までしなくてはならず、改修コストや将来的な負債になってしまいす。 今回の例を使うとハンバーガーメニューをハンバーガーではない別のデザインに変更するとなったときに、CSSのクラス名に入っている「humburger」という文字をすべて編集する必要が出てきてしまうということです。 クラス名の付け方は「デザイン」をクラス名にするのではなく「機能や役割」をクラス名にしたほうがいいです。 この場合は「menu」などにしておくほうがいいとアドバイスをいただきました。

<main>以下は、

・ファーストビュー
・セクション
・フッター
・jQuery読み込み
・JavaScriptのファイル読み込み

を入れました。↓

※jQueryは、公式ページ内「otherCDNs」を確認し、最新のURLをご利用くださいませ。

SCSS

今回はSassを使い、命名規則はBEMを使用しました。

 

また、配布のフォルダ内に普通のCSSファイルも入れておきました。お好きな方をご利用ください!

変数

冒頭で、変数の管理をします。

よく使うカラーは、変数にしておくと便利です。今回は例としてblackとwhiteを入れておきました。

変数に関して、はなえさん(@kon_hanae)にシェアしていただいた情報を貼ります。

リプ欄に解説がありました。

今回は小規模の1ページサイトを想定してテンプレを作成したので、変更はしていません。

しかし、規模が大きくなればなるほど便利な方法だなと思いました!勉強になります!

 

・font-familyは、例としてヒラギノver.と游ゴシックverを入れてみました。
実務では、今までWebフォントを使うことが多かったのであまり使用していません。

レスポンシブを@mixinで管理

わたしはいつも、レスポンシブ対応を@mixinで管理しています。

ブレイクポイントは、デザインによって使い分けています。

タブレット959pxとスマホ559pxで作るとき↓

はにわまんさんの、

  • PC → インナーの幅まで
  • タブレット → インナーの幅からiPad(768px)まで
  • スマホ → iPadより小さい(767px)からiPhone SE(320px)まで

で作るときがあります。↓

使用の際は、

div{
  width:100%;
  @include mobile{
    width:50%;
  }
}

のように、レスポンシブに対応したいセレクタ内でそれぞれ使用しています。(この例だと、PC→100%, SP→50%となる)

font-sizeを@mixinで管理

remを使用するときは、@mixinで自動計算できるようにします。

実際に使用するときは、16pxで表示させたいなら

@include rem(16);

と記述します。数字は勝手に計算してくれるので、実際には1remになります。

remなどの文字サイズについては、もし良ければこちらをどうぞ!

base(共通)

わたしは、ページ内の共通の記述をまとめて書いています。

・colorやfont-familiyの変数は、このように使用します。

・letter-spacingは、カンプによって調整します。

・imgにvertical-align:bottom;を入れておくと、余計な余白が消えるので便利です。

以下、ホンマさんからいただいた情報をシェアします↓
わたしは以前まで、ユニバーサルセレクタ(*)に

・margin: 0;
・padding: 0;

を加えていたのですが、これだと読み込み速度に影響があるそうです。(厳密に言えば、シングルページだとさほど影響はないが、大規模になると影響してくる。)

marginとpaddingをリセットしたいときは、リセットしたいセレクタに対してのみ別途設定するのが良さそうです。

勉強になりました🙇‍♀️

2020.11.3追記
・速度に関しては、そこまで気にする必要がないとのご意見もありました。記載が漏れてしまったり、可読性が下がって改修時にわかりにくいなどの理由からです。今回はLP向けのテンプレですが、大規模サイトなどで使用する場合は、速度が気になった場合のみこのような対策をとってもよいのかもしれません。
・その後、このテンプレには入れなかったreset.cssのオリジナル版を作り、セレクタ指定のリセットをかけました。
オリジナルのreset.cssをブログにUPしました→こちらです!

各セクションの共通設定

mainの各セクションに共通の設定がある場合は、まとめておきます。

セクションごとに、同じ記述をすることがなくなるので楽だし、可読性も上がります。

わたしの語彙力で伝わっているかわからないので、例です。

下記は、クリスタさんのカンプをわたしが模写したものです。


・Concept
・Works
・Service
・Contact

などのタイトルが、ここでいうsection__ttlにあたります。(テンプレではcenter入れてしまってますが)

このように同じタイトルの型などがカンプにある場合は、1つのコンポーネントとして記述をまとめて、使いまわせるようにしています。

header

ヘッダー・ヘッダーナビは、この形のコードです。

paddingは、レスポンシブで可変するように%とvwを使用しています。もちろん数値は、サイトによって調節する

4vwにしてあるのは、下記動画で「いい感じになる」という解説があったからです笑

初心者のとき、模写後にクリスタ さんの解説動画を見たのはとても参考になりました。

 

ハンバーガーメニュー

レスポンシブ対応として、ハンバーガーメニューを作ることが多いのでテンプレに入れました。

必要なければ消していただければと思います。

もしコードが読み取れない部分があれば、このような解説を見るとよいかと思います。

実際にハンバーガーメニューを動かす時は、jQueryを使っています。

jQuery

おまけとして、jQueryのファイルもテンプレにつけました。

必要なければ消していただければと思います。

ハンバーガーメニュー

・btm__hamburgerをクリックすると、activeクラスがつく→btnが×印になる

・btnにactiveクラスがついているときは、スライドメニューにもactiveをつける。(そうでないときはactiveクラスを外す)→スライドメニュの開閉

・hamburger__list(スライドのメニュー)のどれかをクリックすると、スライドメニュー・btn共にactiveクラスを外す→スライドを閉じて、btnの×印を元に戻す

2020.11.3追記
・.click(function(){})は.on('click', function(){})で書いた方が汎用性がありよいです。
.click()だと後から追加したDOMへイベントがつかないそうです。以下参照。
勉強になりました🙇‍♀️

ヘッダー固定

こちらはおまけのおまけです。笑

ヘッダーを上部に固定+ 背景色をつけるオーダーが多いので例として載せてみました。

・赤線を引いた、.fvのところがヘッダーに色を付けるタイミングです。必要に応じて編集してください。

・赤線を引いた、addcolorクラスをつけるとヘッダーに色がつくようになっています。

今回のSCSS テンプレには、addcolorクラスを記述していないので,

header__inner.addcolor{
  background-color:$color-black;
  opacity:0.6;
}

必要であればこのように記述して使用してください。

あとがき

すごく簡単になってしまいましたが、解説を終わります。

一つ一つのコード解説はつけていないので、わからないところがあればご自身で調べていただけたらと思います🙇‍♀️よろしくお願いいたします。

何か1つでも、ご参考になれば幸いです。

 

★Thanks:師匠「もりけんさん」(@terrace_tec)

フロントエンドエンジニア もりけんさんのHPはこちら

★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん(@akira0727x)がYouTubeをはじめました!

Web制作で結果を出すためのノウハウを公開されています✨

タイトルとURLをコピーしました