HTML 【HTML】Googleマップ載せる方法
① Googleマップで載せたい場所を検索共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。② HTMLに記入小サイズにすると、widthは400とHTMLにでてくる。％しておいた方がコントロール...
maple
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」を使用し固定させる例position: fixed; /* 位置を固定する */top: 0; ...
CSS 【CSS】アイコンの色を変える
完成図もともと黒だったものを変更しました。フィルター機能で変更する！invert (階調) sepia(セピア) saturate(彩度) hue-rotate(色相) brightness(明度)これらを使用して、色を作成するだけです。....
CSS 【CSS】ギャラリーレイアウト／Grid Layoutで複雑なレイアウトも簡単にできる
ギャラリーのレイアウトは、少し考えたら簡単にできました！イメージしてから組むとわかりやすいです！ここではグリッドレイアウトを使用しています。グリッドレイアウトの応用編ですね！グリッドレイアウトについては下記記事にもしているので、ご参照くださ...
JavaScript swiper ページネーションが途中で消える問題
対処法原因がわからなかったので、ページネーションを外に出したりしたのですが、レスポンシブにするのが難しくて、なんどもトライアンドエラーしました。そしてたどり着いたのが、ページネーションのコードを書く位置！<div class="swiper...
JavaScript swiper サムネイル付きスライド 読み込めないときに確認したいこと
swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。ここでは、私が見落としがちだったポイントを説明します。【確認①】HTMLの書き方必須事項を確認しましょう！コピペしたりしていると、必須classが入っていなかった...
JavaScript スライドショーができる【swiper】メモ
swiperとはJavaScriptのライブラリjQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。導入方法NPMCDNダウンロードこの3つの方法がありますが、ファイルをダウンロードして使うことがおスス...
Wordpress 【WordPress】子テーマの作り方、アップロードできない時確認したいこと
このサイトはWordpressの無料テーマ「cocoon」を使用しています。cocoonは、子テーマを使用したいとき、専用のファイルがあるのでそれをダウンロードしてアップロードすれば簡単に有効化できるのですが、ほかのテーマを使用しているとき...
HTML HTMLのルール（全角スペースを使用しない）
HTMLにはルールがあるようで、初心者の私はわかりませんでした。教えてもらったものをご紹介します。全角スペースは使わないキーボードで入力する全角スペースは推奨されていません。理由は下記のとおりです。・複数人でコードを共有する場合に、ミスなの...
CSS 【CSS ネタ帳】文字＋画像のカードの作成、レスポンシブデザイン
完成図※私が作成しているサイトを例にしています。PCモバイルPCだと横並び、モバイルだと縦になるようにしています。HTML※ インデントめちゃくちゃ <!--文字の横にテキスト--> <div class="profile-containe...
CSS 【CSS ネタ帳】CSSのみのハンバーガーメニュー
完成図※私が作成しているサイトを例にしています。HTML※ インデントめちゃくちゃ<!--モバイル用のメニュ--> <div class="hamburger-button"> <input type="checkbox" id="chec...
CSS 【CSS】画像の隣に文字がくるコンテンツの実装
CSS/*画像の隣に文字が来るようなカード*/.card-container{ display:flex; justify-content: center; align-items: center; max-width: 100%; /*親...
CSS 【CSS】「border-radius」使い方メモ／角を丸くする
border-radius とは要素の四隅の角を丸くするためのCSSプロパティーのことです。背景も画像もこれで丸くすることができます。使い方同じ角度の丸み半径10pxの角丸border-radius: 10px; 四隅がそれぞれ違う角度下記...
CSS 【CSS】Grid Layout
Grid Layout とは格子状のマス目をベースとしてレイアウトを組むときに使うもの。似ているもので「Flexbox」があります。Flexbox との違いFlexboxは一方方向でのレイアウトに対して、Grid Layout は縦横自在に...
HTML 【HTML】div、p、span タグの使い分けメモ
div タグウェブページのセクションやブロックを定義p タグ段落を定義span タグ文中の一部を囲むときに使う特定のテキストを強調するときなど
HTML 【HTML】「article」の使い方メモ／コンテンツをグループ化
articleサイトの中で記事やコンテンツの独立したセクションを定義articleで囲むことで独立した要素になるページの構造を明確にし、コンテンツをグループ化するための重要なものです。<article class="post-item"> ...
CSS 【CSS】「display」 の使い方／要素の表示形式
display とはCSSのプロパティの一つで、要素の表示形式を決めるものです。わかりやすい画像をお借りしました。（サルカワさんのサイト）それぞれの意味と使い方display: blockブロックの前後には空白、縦に並ぶのが特徴・幅と高さを...
CSS 【CSS】「:target」 使い方メモ／アンカーリンク先の表示
:target とは:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。アンカーリンクは、同じページにある項目や、別のページにうつるものです。「URLのフラグメント」URLの「」のように、URLの最後につく「＃」に...