これまでの知見からサイトを実際に作ってみる
1:まずするべきこと(レスポンシブ対応)
HTMLに設定を追加する
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>style.scssに以下のような設定をする
// スマホ画面の設定
@import "breakpoints/base";
// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}
// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}
@media (min-width: 960px) {
@import "breakpoints/960up";
}
@media (min-width: 1280px) {
@import "breakpoints/1280up";
}
// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}
// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}モバイルファーストが基本
styles/breakpointsに以下のようなファイルを作成すること
2：これまで作ってきたファイルをコピーする
- ヒーロースライダーを作成したときの_hero-slider.scssをインポート
- styles/modulesに_hero-slider.scssと_mixin.scssを貼り付け
- 変数用のファイルを作成style.scssを貼り付けて_variables.scssにリネーム
- Swiperを使いたいのでvendorsにswiper.min.cssを貼り付け
scriptsにmain.js、libsにhero-slider.js、vendorsにswiper.min.js
を貼り付け
HTMLに記述をする(index.htmlに読み込ませる(太字部分が重要))
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<div id="content">
<!-- 今回の重要な部分 -->
<div class="hero"></div>
<!-- スライダーメインコンテナ -->
<div class="swiper-container">
<!-- ラッパー -->
<div class="swiper-wrapper">
<!-- スライドの部分 -->
<div class="swiper-slide">
<!-- 画像の真ん中の文字 -->
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<!-- ↓矢印の部分 -->
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>style.scssにも読み込ませる
// 設定を読み込む
@import 'modules/variables';
@import 'modules/mixin';
@import 'modules/hero-slider';
// 順番も重要でこのままでよい
// スマホ画面の設定
@import "breakpoints/base";
// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}
// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}
@media (min-width: 960px) {
@import "breakpoints/960up";
}
@media (min-width: 1280px) {
@import "breakpoints/1280up";
}
// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}
// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}3：ノーマライズ
最初にリセットやノーマライズをしておかないと、最後に導入してずれてしまうということもあるので、必ず始めにやっておこう！
ノーマライズの導入方法
https://github.com/twbs/bootstrap/blob/v4.3.1/dist/css/bootstrap-reboot.css
リンクからbootstrap-reboot.cssを画像のように配置して、↓のようにHTMLで読み込ませる
4:Webフォントでデバイス間の表示を統一
使いたいフォントを選択して(今回はKameronとNotoSansJP)
linkの部分をコピー
HTMLに貼り付け
ココをコピーして
bodyの部分に貼り付け
最終的にこのようにする(ローマ字、日本語、それ以外の保険の順番)
5:共通クラスを作って複数回同じことを書かないようにする
_base.scssに以下のように記述
// Stylesheet: ベーススタイル(スマホ用の設定)
body {
font-family: "Kameron", "Noto Sans JP", sans-serif;
}
img {
max-width: 100%;
vertical-align: bottom;
}
.font-sm {
font-size: 14px;
}
.font-md {
font-size: 17px;
}
.font-lr {
font-size: 17px;
}
.font-lg {
font-size: 25px;
}
.mb-sm {
margin-bottom: 16px !important;
}
.mb-lg {
margin-bottom: 80px !important;
}
.pb-sm {
padding-bottom: 16px !important;
}
.pb-lg {
padding-bottom: 80px !important;
}
.content-width {
width: 90%;
margin: 0 auto;
max-width: $contentMaxWidth;
}ある程度よく使うもの(フォントのサイズやマージンやパディング)を共通化する 。
_960up.scssに以下のように記述
