JavaScript swiper サムネイル付きスライド 読み込めないときに確認したいこと
swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。 ここでは、私が見落としがちだったポイントを説明します。 【確認①】HTMLの書き方 必須事項を確認しましょう！ コピペしたりしていると、必須classが入ってい...
プログラミング
JavaScript JavaScript スライドショーができる【swiper】メモ
swiperとは JavaScriptのライブラリ jQueryを使用せず、HTML、CSS、JavaScriptでスライドショーができます。 導入方法 NPM CDN ダウンロード この3つの方法がありますが、ファイルをダウンロードして使...
HTML HTMLのルール（全角スペースを使用しない）
HTMLにはルールがあるようで、初心者の私はわかりませんでした。 教えてもらったものをご紹介します。 全角スペースは使わない キーボードで入力する全角スペースは推奨されていません。 理由は下記のとおりです。 ・複数人でコードを共有する場合に...
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%; /...
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-ite...