コーディングで使ったコードまとめ（参考サイト）

ごきげんよう。最近コーディングを色々とやってるので、自分で使って便利だったコードやその応用を参考サイトとともにまとめておきます。

一定のスクロールをしたらヘッダーに固定するナビゲーション

特定のタイミングで固定するために、jQueryで高さを取得してます。指定の高さを超えると「position: fixed」にして、固定するというものです。

これは、よくある使い方だと思います

特定のタイミングでヘッダーナビゲーション部分を上部に固定する - MdN Design Interactive

https://www.mdn.co.jp/di/contents/3265/38908/

応用：スマホ用に画面スクロールがメインVを超えてからナビゲーションを表示したい。

スマホ用レイアウト時には、ファーストビューを大きくが動画を表示するため、ヘッダーナビゲーションメニューを非表示にしま

元々は、特定の位置を過ぎたら固定するためにjQueryで高さを取得して、指定位置を超えたら、特定のIDにクラス名を追加するようにしました。

通常時はメニューに「display: none;」を付与しておいて、指定位置を越えると、メニューに「display: block;」を含んだクラスを追加しています。

以下の例では、id="hd"に対してclass="bloked"というのを追加しています。

$(function() {
var flg = false;
var scrollpos;
var winW = $(window).width();
var winH = $(window).height();
var hd = $('#hd');	
$(window).scroll(function () {
	if ($(this).scrollTop() > (winH / 1) ) {
		hd.addClass('bloked');
	} else {
		hd.removeClass('bloked');
	}
});
});

Swiper.jsでのスライダーの追加

LPで使うためプラグインではないものを利用しました。

・次へ、前へのスライドボタン
・ページネーション（どのスライドか分かるようについてる「●●●」ってやつ）

「<div class="swiper-slide">Slide 1</div>」の中あるものをスライドしてくれるので、普通に画像のスライドショーにするのではなく、商品メニューやテキスト＆画像をスライドさせられます。

<!-- Swiper START -->
<div class="swiper-container">
	<!-- メイン表示部分 -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
	</div>
	<!-- 前ページボタン -->
	<div class="swiper-button-prev"></div>
	<!-- 次ページボタン -->
	<div class="swiper-button-next"></div>
</div>
<!-- Swiper END -->

これを使ってボクは「商品名＋説明＋価格＋イメージ」を含んだDivをスライドさせて、カルーセルメニューとしました。(๑•̀ㅂ•́)و✧

参考：サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編）

サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） | ガリガリコード

また、Swiper.jsで使う設定は以下のサイトで一覧チェックできます。

Swiperの使い方【日本語訳 】スライダー設置方法 | WEBTEQ | ページ 2

swiper.js6系使ってみたからそのオプションについて(v6.0.4) | なんかいろいろデザインする人

Swiperのカスタマイズの例はこちらが便利

Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説 - STAND-4U

Swiper.jsのバグを対策。初期位置から左にスライドしたときにページネーションの●●の表示がバグるので改修。

作業中なので終わったら何をしたか記載します。

前のナビゲーションでのiDangerous Swiperループのバグ

Swiperの紹介と、ループのバグらしき挙動に対処する · 電子雪原ちほー

swiperを２つのタブ切り替えで使うとナビゲーションがうまく表示されない不具合が解決できません｜teratail

申し込みボタン（CTA）に▶矢印をつけるCSS

画像でつくるって人もいますが、CSSで作れるので、覚えておくと便利です。ボクは右側につけることが多いですね。

ボタンによくついている矢印マークをCSSで作る方法 | 福岡のホームページ制作会社　シンス株式会社

CSSで▽マークをつくる

ツールでかんたんに作れるので便利です

CSS三角形作成ツール

CSSで複数のコンテンツの高さを揃える！

flexboxを使うと便利なんですね〜。html5になってからコーディングは外注のコーダーさんに任せきりだったのでこの方法はしりませんでした。

Flexboxを使って孫要素まで高さを揃える方法 - Qiita

その他、色々と追加予定