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 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...
はじめての方へ 独学！Web初心者の参考本ご紹介
※ここではアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。 こんにちは。 看護師から何とか短期間でジョブチェンジするためにがんばって学習しています。 私が参考にしている本を紹介します！ 自分だけでは何がいいのかわかりませ...
Bootstrap 【Bootstrap】幅と高さと中央揃えの設定
幅（width） 20%、50%、75%、100%、autoがあります。 <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w...
JavaScript 【JavaScript】基本的な「変数・定数」を超簡単に紹介
JavaScript最近始めたものなので、自分で理解したことを紹介していきます。 これを覚えるのにも苦労、活用するにも苦労しました。 なんせ、わたくし今まで医療職をしていたもので、Webの知識が全くない！ 初めて 変数 といものをきいたとき...
JavaScript 【JavaScript】エラーの意味を紹介
私はパソコン初心者で、JavaScriptを学習し始めましたが、エラーだらけです。 しかも英語も読めないので、なんのエラーなのかわからないことが起きています。 自分のためにも、一緒に困っている人のためにも、エラーの意味を紹介していきたいと思...