今日は、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したいと思い、テンプレ配布の企画をしました。
配布は無料です。
ご興味をお持ちのかたがいらっしゃいましたら、Twitterより受け付けておりますので、お気軽にお知らせください♪
このテンプレートの使い方
このファイルは、コーディングを始めるときの基本の記述を集めたものです。
何か完成している模擬サイトがあるわけではありません。
わたしは、いつも実務コーディングをはじめるときに、
②VSCodeでこのフォルダをひらく
③デザインカンプに合わせて、いらない記述は消す
④コーディング開始
という手順を踏んでいます。
・HTMLの基本の記述
・OGP設定やSEO設定
・SCSSの変数やmixin設定
などは毎回同じのため、今回のようにテンプレ化して時短コーディングに活かしています。
今回は、わたしがコーディングすることの多いLP(= ランディングページという1枚のペラサイト)寄りです。ご了承ください。
*** おまけ ***
上記に加えて、よく実装する
・横並びのヘッダーナビ
・セクション共通のタイトル・インナー
・jQuery ヘッダー固定
・jQuery ハンバーガーメニュー
などを加えました。
必要ない部分は削除、または加筆をして、ご自身に合ったテンプレに編集していただければと思います。
コードの解説
今回、配布するにあたって、
に監修していただき、お墨付きをいただきました。この場を借りて厚く御礼申し上げます。
どうぞ、ご安心してテンプレをお使いください！
HTML
まず、HTMLの解説からです。
<head>内の記述
たくさん書いてある<meta>タグはOGP設定 です。
OGPは「Open Graph Protcol」の略で、SNS上で共有されたときに、画像やタイトル、説明文などが正しく伝わるように設定するHTMLです。
詳しくは、こちらをご覧ください！
・<link>で、CSSの読み込みをします。
・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ではよく使うので入れておきました。
・ハンバーガーメニューのクラス名ですが、hamburger__btnより「menu_btn{}」のほうがいいと思います。 「humburger」というようにデザイン自体の内容をクラス名に入れてしまうとデザインの変更のためにCSSのクラス名の変更までしなくてはならず、改修コストや将来的な負債になってしまいす。 今回の例を使うとハンバーガーメニューをハンバーガーではない別のデザインに変更するとなったときに、CSSのクラス名に入っている「humburger」という文字をすべて編集する必要が出てきてしまうということです。 クラス名の付け方は「デザイン」をクラス名にするのではなく「機能や役割」をクラス名にしたほうがいいです。 この場合は「menu」などにしておくほうがいいとアドバイスをいただきました。
<main>以下は、
・ファーストビュー
・セクション
・フッター
・jQuery読み込み
・JavaScriptのファイル読み込み
を入れました。↓
※jQueryは、公式ページ内「otherCDNs」を確認し、最新のURLをご利用くださいませ。
SCSS
今回はSassを使い、命名規則はBEMを使用しました。
また、配布のフォルダ内に普通のCSSファイルも入れておきました。お好きな方をご利用ください！
変数
冒頭で、変数の管理をします。
よく使うカラーは、変数にしておくと便利です。今回は例としてblackとwhiteを入れておきました。
変数に関して、はなえさん(@kon_hanae)にシェアしていただいた情報を貼ります。
個人的な拘りだけど、CSS変数でもSassの変数でもそうだけど、汎用的な数値を変数化して使う時は、そのまま汎用的な数値を指定した変数を使うのではなく、一旦その用途を示した変数を作ってそれにinしてから使うようにしている。（画像参照）
これやっとくだけで改修の時楽だから…。広まって欲しい。 pic.twitter.com/wZSxaCHBdC
— TAK / Web Creator. (@tak_dcxi) July 16, 2020
リプ欄に解説がありました。
極端な例ですが#fd3c2fというカラーコードをアラート文含む100箇所に適応させるとします。
改修が入った時にアラート文だけ#fd3c2fから#ff0000にしたいと要望を受けました。
アラート文が1箇所ならそこを変更すればOKですが、50箇所を変更するってなったら面倒じゃないですか？
— TAK / Web Creator. (@tak_dcxi) July 16, 2020
今回は小規模の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;を入れておくと、余計な余白が消えるので便利です。
模写の中級(@cresta_design)
▫️画像の下にできる余白を消す
vertical-align: bottom;またひとつ新たな知識(｀・ω・´)paddingもmarginもついてないのになぜ？と思ったらこれだった！#駆け出しエンジニアと繋がりたい pic.twitter.com/1pzybSSc1p
— はる | Webコーダー (@fuwafuwahappy) July 25, 2020
以下、ホンマさんからいただいた情報をシェアします↓
わたしは以前まで、ユニバーサルセレクタ(＊)に
・margin: 0;
・padding: 0;
を加えていたのですが、これだと読み込み速度に影響があるそうです。（厳密に言えば、シングルページだとさほど影響はないが、大規模になると影響してくる。）
marginとpaddingをリセットしたいときは、リセットしたいセレクタに対してのみ別途設定するのが良さそうです。
勉強になりました🙇♀️
・速度に関しては、そこまで気にする必要がないとのご意見もありました。記載が漏れてしまったり、可読性が下がって改修時にわかりにくいなどの理由からです。今回は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の×印を元に戻す
・.click(function(){})は.on('click', function(){})で書いた方が汎用性がありよいです。
.click()だと後から追加したDOMへイベントがつかないそうです。以下参照。
勉強になりました🙇♀️
もうjqueryを主体に書いていたことは4年位前だけど、.click()って使うメリットないから使わないほうがいいよ。Jquery3系で非推奨だし、.click()はあくまで存在するDOMへのイベント付与しかできずDOM追加が起きる現代では不具合起きやすい。イベントは全部 .on(eventName, dom?, function(){})で書こ。
— 正直プログラマー (@nyangineer256) November 3, 2020
ヘッダー固定
こちらはおまけのおまけです。笑
ヘッダーを上部に固定+ 背景色をつけるオーダーが多いので例として載せてみました。
・赤線を引いた、.fvのところがヘッダーに色を付けるタイミングです。必要に応じて編集してください。
・赤線を引いた、addcolorクラスをつけるとヘッダーに色がつくようになっています。
今回のSCSS テンプレには、addcolorクラスを記述していないので,
header__inner.addcolor{
background-color:$color-black;
opacity:0.6;
}
必要であればこのように記述して使用してください。
あとがき
すごく簡単になってしまいましたが、解説を終わります。
一つ一つのコード解説はつけていないので、わからないところがあればご自身で調べていただけたらと思います🙇♀️よろしくお願いいたします。
何か1つでも、ご参考になれば幸いです。
★Thanks：師匠「もりけんさん」(@terrace_tec)
フロントエンドエンジニア もりけんさんのHPはこちら
★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん（@akira0727x)がYouTubeをはじめました！
Web制作で結果を出すためのノウハウを公開されています✨
