流れ ヘッダーのデフォルトの位置を保存する ウィンドウのスクロール量を常に監視する ウィンドウのスクロール量がヘッダーのデフォルトの位置を超えた場合は、ヘッダーをスティッキー配置にする ウィンドウのスクロールが画面上部まで戻ったら、ヘッダーをデフォルトの位置に戻す offset() jQuery要素のドキュメント上の位置を取得するメソッド プロパティはtop leftの2つ ex.) $header.offset().top on() 特定の出来事が起こるタ
スライドショー仕組み 全ての画像を一箇所に重ね、非表示 最初のスライドのみを表示 時間経過後、フェードアウトで非表示。次が表示される eq() 複数あるjQueryオブジェクトのうち、引数に渡したインデックスに該当するものを選択するメソッド var $slides = $(this).find('img'), // すべてのスライド slideCount = $slides.length, // スライドの点数 cur
スコープ 変数や関数を利用できる範囲 each オブジェクトに含まれる書く要素に対して個別に処理を実行するメソッド each(function(index){ 処理 }); indexには何番目のボタン(0,1,2,3…)かが格納される (p.121) $('#buttons2 button').each(function(index){ var pos = index * 40 - 40; $(this).css('top', po
$() HTML要素をもとにしてjQuery独自の要素を生成するという機能を持っている関数(p.44) $(function(){処理}); HTML読み込んだら実行してね(p.47) .on('click' , function(){ }); 〇〇したら イベントが起こるタイミングに命令を下す(p.52) メソッドチェーン mouseover , mouseout とかつなげて書く(p.57) .animate({ 処理 }, 時間, イージング );
HTML<section class="company"> <div class="card-wrap"> <ul class="card-container"> <li class="card"><a href="#" class="card__link"></a><img src="image/img02.jpeg" alt="" class="card__image"><p class="card__te
1行の場合 .text{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 複数行の場合 .text{-webkit-line-clamp: 3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
他のscssを読み込む時は@useを使う @use '_reset.scss'; 普通は'reset'だけで済むが、フルにファイル名を書くと勝手にファイルを作ってくれるからおすすめらしい。
HTML <header class="header"> <div class="header-inner"> <h1 class="header-logo"><a href="#"><img src="image/logo-mini-bk.png" alt=""></a></h1> <nav class="header-nav"> <ul class="nav__inner">
ボーダーあり＆右下配置を作るにあたり、使いまわせるように、基準とボーダーver.と右下配置ver.を想定したコーディングをしていく。 HTML <li class="card"> <figure class="card__img-wrapper_square"><img src="image/img05.jpeg" alt="" class="card__img"></figure> <div class="card__main"> <a hre
スマホでは1カラム。画面サイズが大きくなるにつれカラムが増えていく、レスポンシブなグリッドを作っていく HTML <div class="gallery"> <ul class="grid-inner"> <li class="card"> <figure class="card__img-wrap"><img src="image/img05.jpeg" alt="" class="card__img card__img_square"></figu
命名規則 Block-name__Element-name_Modifier-name Block 周りに影響を及ぼすスタイリング(position,float,margin)をしてはいけない block内にblockがネスト→MIX Element block内に必ずないといけない blockの名前を継承しないといけない Modifier 見た目、状態、振る舞いを定義するためのもの 単独で使うことはない。必ずBlockかElementがある状態で2つ目以降のクラス名と
