HTML 【HTML】Googleマップ載せる方法
① Googleマップで載せたい場所を検索 共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。 ② HTMLに記入 小サイズにすると、widthは400とHTMLにでてくる。 ％しておいた方がコン...
HTML CSS 【CSS】アイコンと文字を上下中央に
こうなってしまっているのを これにしたい！ ① アイコン＋文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定 ② アイコンに「vertical-align: middle;...
JavaScript 【swiper】スライドショーの画像をPCとモバイル用で変更
モバイルでは丁度いいサイズでも、PC端末で表示すると、画面いっぱいに画像が出てきて見苦しかったので、それぞれ画像を分けることにしました。 swiper については他にも記事にしているのでご参照ください。 概要 サムネイル付きスライド ページ...
CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
① position: fixed 「position: fixed」を使用し固定させる 例 position: fixed; /* 位置を固定する */ top: 0; /* 固定する位置を指定 */ left: 0; /* 固定する位置...
CSS 【CSS】アイコンの色を変える
完成図 もともと黒だったものを変更しました。 フィルター機能で変更する！ invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度) これらを使用して、色を作成するだけ...
CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！ イメージしてから組むとわかりやすいです！ ここではグリッドレイアウトを使用しています。 グリッドレイアウトの応用編ですね！ グリッドレイアウトについては下記記事にもしているので、ご参...
JavaScript swiper ページネーションが途中で消える問題
対処法 原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。 そしてたどり着いたのが、ページネーションのコードを書く位置！ <div class="swi...
JavaScript swiper サムネイル付きスライド 読み込めないときに確認したいこと
swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。 ここでは、私が見落としがちだったポイントを説明します。 【確認①】HTMLの書き方 必須事項を確認しましょう！ コピペしたりしていると、必須classが入ってい...
JavaScript スライドショーができる【swiper】メモ
swiperとは JavaScriptのライブラリ jQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。 導入方法 NPM CDN ダウンロード この3つの方法がありますが、ファイルをダウンロードして使...
Wordpress 【WordPress】子テーマの作り方、アップロードできない時確認したいこと
このサイトはWordpressの無料テーマ「cocoon」を使用しています。 cocoonは、子テーマを使用したいとき、専用のファイルがあるのでそれをダウンロードしてアップロードすれば簡単に有効化できるのですが、 ほかのテーマを使用している...