フロントエンド 動きの実装で気を付けるポイント
スクロールロック画面100%の透過ナビゲーションの場合、透過したレイヤーの背景をスクロールしてしまう状態を防ぐ。コードはコチラ body.scrollLocked { overflow: hidden; }
2024-07
フロントエンド フロントエンド 【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...
フロントエンド よく使用するサイト
①カラーコード変換ツール：
その他 cssリファレンス
①色の設定■登録するとき:root {--title-color:#111111;}■適用するとき...{color:var(-title-color)}
その他 jsコードリファレンス
よく使用するサイト動くWebデザインアイデア帳：①スムーススクロールコードはコチラfunction smoothScroll(){$('a[href*="#"]').click(function () { var href = $(this...
その他 コードリファレンス
画面幅に追従するレスポンシブ実装<link rel="stylesheet" href="styles.css" /><div class="container"> <div class="blur-layer"></div> <div c...