フロントエンド 【slick】使用するときに気を付けるポイント
スライド時に複数のスライドを切り替えるときポイント・slick内の調節によって空白のスライドが生じることはない。・空白のスライドをあらかじめ実装したい場合は、ダミーのdivなどを用意することになる。スライドカウンターの実装方法slick内の...
フロントエンド
フロントエンド フロントエンド jsの位置取得早見表
var link = document.getElementById('myLink'); var rect = link.getBoundingClientRect(); //要素のページトップからのbottom位置 var bottom...
フロントエンド 動画、アニメーションや視差効果を利用したページでつまづいたこと
動画の周りに黒い線が入る画面をスクショするときには黒い線が消える→画面が小数点以下のpx数をとっていて、勝手に黒い線を表示してしまっている可能性がある・動画の比率が原因であることが多いが、それでも改善されなかった・そのため、動画のafter...
フロントエンド 【javascript】JQueryからjavascriptコードへ変換
$(window).width(); //window.innerWidth;$(window).height(); //window.innerHeight;$(element).outerHeight(); //element.offs...
フロントエンド 動きの実装で気を付けるポイント
スクロールロック画面100%の透過ナビゲーションの場合、透過したレイヤーの背景をスクロールしてしまう状態を防ぐ。コードはコチラ body.scrollLocked { overflow: hidden; }
フロントエンド 【CSS】blockまわりで押さえておくこと
blockとは要素の表示の型を指定し、組み方を決めます。文章のあとに配置したり（インライン要素）、行ごとの塊として配置したり（ブロック要素）します。よく使うblockの種類①display:block②diplay:none③display...
フロントエンド htmlのhead周りについて押さえておくこと
■headとは何か・htmlファイル内に…で囲まれた内容。・ページのタイトルなどの情報などを含んでいます。・ページが読み込まれてもブラウザには表示されない情報を記述しています。以下のコードだと、緑色の箇所がheadにあたります。<!doct...
フロントエンド JS実装で気を付けるポイント
①pushをするときにaaaなどとオブジェクトを入れることはできない。②画面いっぱいのナビゲーションを表示したとき、背景のスクロールができてしまう →bodyにoverflow:hiddenｗを設定する③imgの高さ要素を取得したいが0にな...
フロントエンド インクルードできないときの代替実装
以下はjsのFeacthAPIを使った実装。header.htmlとfooter.htmlはそれぞれインクルードファイルです。const fileUrls = [ "/common/inc/header.html", "/common/in...
フロントエンド ブラウザと端末の対応で気を付けるポイント
近年、ブラウザと端末の対応において特定のベンダープレフィックス（例：-webkit-）を気にする必要は随分減りました。とはいえ、端末ごとの癖や違いには注意が必要で、コードに間違いがなくても異なる動作を見せることがあります。ここでは、iPho...