1. /
  2. WEB制作

WEB制作

【jquery】slickなどでページ表示毎にランダムに開始スライドを設定する方法

slickオプションの初期表示指定の

initialSlide:○

に数値をランダムに入れるメソッドを使う

var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;

seed*3←この数字が全体のスライド数

「0」が1枚めなので「-1」して「: 0」も含む書き方してます。

var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;
$('.slick').slick({
initialSlide:randKv
});

この書き方ならslickじゃなくても他のものにも応用できそうな便利なメソッドです！

【コーディング】新しくサイトをコーディングに参考にさせていただいたサイト

HTML5の基本テンプレ

https://qiita.com/Y_ASAMOTO/items/90afe7d24467020c17f0

XDからソース取り出し

Adobe XDの新機能『CSS書き出し』を使ってみよう

XDで画像書き出し

https://sinap.jp/blog/2016/12/adobe-xd-export.html

スクロールに応じてヘッダーが変化（固定＆変化など）

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

ホバーエフェクト

CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

改めてclearfixなど（今回使わなかったけど、、）

CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】

cssのcontentに画像を指定したい時

CSSのcontentで画像を指定する

.list_item a::after {
content: url(./arrow.png);
display: inline-block;
vertical-align: middle;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

contentで追加した画像にはサイズを指定することができません。
そのため、サイズを変更したい場合はtransformプロパティのscale()で拡大・縮小させます。

Slick Sliderのカスタマイズ

https://webdesignday.jp/inspiration/technique/jquery-js/3847/

Tggleメソッドの使い方

https://qiita.com/sunnyG/items/faf1821ae09820e30ce8

ハンバーガーメニュー

https://www.webopixel.net/javascript/1483.html

【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。(シンプルバージョン)
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋

フル画面メニューでスクロールさせる方法

【特集｜position:fixed】vol.1 – 固定した中身をスクロールさせる方法と慣性スクロールについて

jquery css追加メソッド

https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d

SSIの設定　.htaccess

https://qiita.com/yoshida-hi/items/4909c578b098f172efdb

検索バーのデザイン

https://kagesai.net/search-form-design/https://kagesai.net/search-form-design/

【jQuery】チェックボックスのチェック状態を取得してリンクのURLにパラメーターとして付与する方法

外部リンクにチェックボックスのアンケートを挟んでGAだけで確認したいという依頼があり作ってみました

実装の順番としては2つに分けて考えました

  1. チェックボックスのチェック状態を取得
  2. URLに代入（attrメソッドを使用）

1チェック状態の取得の参

https://itsakura.com/jquery-checkbox

https://qiita.com/nmta/items/dc29378adf79c5784218

2URLへの代入方法の参考

URLへの代入方法

jQueryでURLに特定の文字（#contentなどの文字）を足す

attr()メソッドのかんたん解説！

30分で理解！jQueryのattr()で属性操作を極めるコツ！