CSS 【CSS】ヘッダーを固定にして追従させる方法／超簡単に説明！
① position: fixed 「position: fixed」を使用し固定させる 例 position: fixed; /* 位置を固定する */ top: 0; /* 固定する位置を指定 */ left: 0; /* 固定する位置...
ネタ帳
CSS CSS 【CSS】アイコンの色を変える
完成図 もともと黒だったものを変更しました。 フィルター機能で変更する！ invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度) これらを使用して、色を作成するだけ...
CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！ イメージしてから組むとわかりやすいです！ ここではグリッドレイアウトを使用しています。 グリッドレイアウトの応用編ですね！ グリッドレイアウトについては下記記事にもしているので、ご参...
JavaScript スライドショーができる【swiper】メモ
swiperとは JavaScriptのライブラリ jQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。 導入方法 NPM CDN ダウンロード この3つの方法がありますが、ファイルをダウンロードして使...
CSS 【CSS ネタ帳】文字＋画像のカードの作成、レスポンシブデザイン
完成図 ※私が作成しているサイトを例にしています。 PC モバイル PCだと横並び、モバイルだと縦になるようにしています。 HTML ※ インデントめちゃくちゃ <!--文字の横にテキスト--> <div class="profile-co...
CSS 【CSS ネタ帳】CSSのみのハンバーガーメニュー
完成図 ※私が作成しているサイトを例にしています。 HTML ※ インデントめちゃくちゃ <!--モバイル用のメニュ--> <div class="hamburger-button"> <input type="checkbox" id="...
CSS 【CSS】画像の隣に文字がくるコンテンツの実装
CSS /*画像の隣に文字が来るようなカード*/ .card-container{ display:flex; justify-content: center; align-items: center; max-width: 100%; /...
Wordpress 【WordPress】サイドバーの目次をスクロールさせたい
デフォルトでサイドバースクロール追従に目次を追加した場合、変なところで目次が切れてしまう問題が発生しました。 その対処についてご説明します！ ウィジェットの設定 ①左の欄の「外観」をクリックまたは、カーソルを当てる ②「ウィジェット」を選択...
Wordpress 【WordPress】ヘッダーをおしゃれに、メニューを右にまとめる
Wordpressのデザインを変更したいときに、参考になる方法があったのと、問題点の対処法をまとめたのでご紹介します。 完成図 現在のフロントページは変更されているかもしれませんが、このような感じで編集しました。 ここではWordpress...
JavaScript 【JavaScript】クイズ問題（簡単なの）
リファクタリングが難しいため、とりあえずここまで記載します。 実際に作ったサイトはこちら（どんどん改良しているはず・・・） この問題のベースはBootstrapで組んでいます。 HTML <div id="js-question" clas...