CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s; } /* スクロールするとヘッダ...
JavaScript
CSS JavaScript vue.js はじめかたメモ
環境作り ① node.js ダウンロード 詳しくは下記記事参照 ② VSCode起動 ③ 表示→ターミナル を開いて「npm create vue@latest」と入力 ④ Ok to proceed? (y) とでてくるため、「ｙ」と入...
JavaScript 【swiper】スライドショーの画像をPCとモバイル用で変更
モバイルでは丁度いいサイズでも、PC端末で表示すると、画面いっぱいに画像が出てきて見苦しかったので、それぞれ画像を分けることにしました。 swiper については他にも記事にしているのでご参照ください。 概要 サムネイル付きスライド ページ...
JavaScript swiper ページネーションが途中で消える問題
対処法 原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。 そしてたどり着いたのが、ページネーションのコードを書く位置！ <div class="swi...
JavaScript swiper サムネイル付きスライド 読み込めないときに確認したいこと
swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。 ここでは、私が見落としがちだったポイントを説明します。 【確認①】HTMLの書き方 必須事項を確認しましょう！ コピペしたりしていると、必須classが入ってい...
JavaScript スライドショーができる【swiper】メモ
swiperとは JavaScriptのライブラリ jQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。 導入方法 NPM CDN ダウンロード この3つの方法がありますが、ファイルをダウンロードして使...
JavaScript 【JavaScript】クイズ問題作ったけど、TagName(“button”)でbuttonタグすべてが作動してしまう
このように、問題の答えをクリックするボタンと、解説をクリックするボタンの2つが存在します。 JavaScript のコードを 「document.getElementsByTagName("button")」にすると、ボタンタグ全てが配列に...
JavaScript 【JavaScript】クイズ問題（簡単なの）
リファクタリングが難しいため、とりあえずここまで記載します。 実際に作ったサイトはこちら（どんどん改良しているはず・・・） この問題のベースはBootstrapで組んでいます。 HTML <div id="js-question" clas...
JavaScript 【JavaScript】基本的な「変数・定数」を超簡単に紹介
JavaScript最近始めたものなので、自分で理解したことを紹介していきます。 これを覚えるのにも苦労、活用するにも苦労しました。 なんせ、わたくし今まで医療職をしていたもので、Webの知識が全くない！ 初めて 変数 といものをきいたとき...
JavaScript 【JavaScript】エラーの意味を紹介
私はパソコン初心者で、JavaScriptを学習し始めましたが、エラーだらけです。 しかも英語も読めないので、なんのエラーなのかわからないことが起きています。 自分のためにも、一緒に困っている人のためにも、エラーの意味を紹介していきたいと思...