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