ゆうすけ@Ｗeb制作➡Ｗeb開発

主に以下の用途で投稿しています ・アウトプット ・見返し

ゆうすけ@Ｗeb制作➡Ｗeb開発

主に以下の用途で投稿しています ・アウトプット ・見返し

料理店に例える(3層スキーマ)

料理店に例える(3層スキーマ)外部スキーマ：お客さんがメニュー表を見て注文を行う 概念スキーマ：サービスマンのような立ち位置 内部スキーマ：指示に従い保存していた食材をどう調理するか 外部スキーマ ここでは詳細なレシピや食材の情報、また在庫状況など見せる必要はなく 自分が食べたい料理を簡潔にサービスマンに伝えればよいという認識。 概念スキーマ ユーザーの要求を受け、キッチンに伝え両者がスムーズに動けれるよう管理している、またユーザーは快適なサービスを受けられる。

ゆうすけ@Ｗeb制作➡…

    • 【JavaScript】「for」と「forEach」の違い

      ※notionと同じ内容です 1. 「for」と「forEach」の違い 1-1 ■forEachは配列のみ forEachが繰り返せるのは配列のみ 1-2 ■forEachは配列の持っている要素の数だけ繰り返す 無限ループエラーになりにくいメリット 1-3 ■forEachはコード記述が効率的 forのように繰り返し条件を書く必要が無い 2. 基本構文 3. コード例 /*------------------------------------------

      ゆうすけ@Ｗeb制作➡…

      • 【HTML/CSS】clip-path: polygonを使い疑似要素の三角形や多角形を作るデザインテクニック

        ■参考にさせていただいた記事 ■目標物 ■コード HTML <li class="content"> <a href="#"> <img src="images/icon-document.png" alt=""> <p>資料請求</p> </a></li> CSS ※重要な部分だけ抜粋 clip-path: polygon(0% 100%, 100% 100%, 100% 0%); &::before { positio

        ゆうすけ@Ｗeb制作➡…

        • 【JavaScript】背景画像の無限スクロール

          CSS版のリンク HTML <section id="summary"></section><!-- /summary --> CSS #summary { background: url("../images/bg.gif") repeat; } JavaScript const bgImg = document.getElementById('summary'); //親要素取得let positionX = 0; // X方向の位置初期値let

          ゆうすけ@Ｗeb制作➡…

        料理店に例える(3層スキーマ)

        ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】背景画像の無限スクロール

          課題リンク https://code-jump.com/demo/html/lp/ HTML <section id="summary"></section><!-- /summary --> CSS #summary { background: url("../images/bg.gif") repeat; animation: fall 10s infinite linear; /* fallアニメーションの設定 */ }/* fallア

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】背景画像の無限スクロール

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】画像フェードインアニメーション

          概要 以下のアニメーションをCSSで実装します ①3枚の画像が順番に切り替わり表示する HTML <div id="home"> <ul class="fade"> <!-- スライドイメージ --> <li><img src="images/mainvisual1.jpg" alt=""></li> <li><img src="images/mainvisual2.jpg" alt=""></li> <li><img

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】画像フェードインアニメーション

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS/JavaScript】ハンバーガーメニュー⇨2本線が×に

          コードペン https://codepen.io/Yusuke0620/pen/jOJQrp HTML <div class="hamburger_menu"> <span></span> <span></span> </div> <!-- 以下はコードの説明書き --> ⇧<br> ■仕様<br> // 1 ハンバーガーメニューがクリックされると全画面

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS/JavaScript】ハンバーガーメニュー⇨2本線が×に

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】画像を斜めにカットして表示する方法「clip-path」

          参考にした記事 https://asobi-lab.co.jp/lecture/web/clip-path/ 作成したサイト画像 コード HTML <div class="img"> <img class="bgImg" src="./images/development.jpg" alt=""></div> CSS .container .img .bgImg { clip-path: polygon(15% 0, 100% 0, 100% 100%

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】画像を斜めにカットして表示する方法「clip-path」

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】画面幅に応じた自然なテキスト改行方法「inline-block」

          概要 この記事では、HTMLとCSSを使用して、画面幅に応じてテキストが自然に改行する方法を紹介します。具体的には、以下のステップに従って説明を進めます。 "span"タグでテキストを区切る spanタグに付与していたclass属性に"display: inline-block;"プロパティ指定 インラインブロック要素としての振る舞い ・インライン要素の特性(テキストなどと同じ行に表示される) ・ブロック要素の特性(幅や高さを指定) 以上の両要素を持ち合わせていま

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】画面幅に応じた自然なテキスト改行方法「inline-block」

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【CSS】レスポンシブで横スクロール可能な画像ギャラリーの作り方

          概要: この記事では、HTMLとCSSを使用してレスポンシブで横スクロール可能な画像ギャラリーを作成する方法について解説します。 画像を横一列に配置 コンテナを横方向にスクロール レスポンシブデザインの実装方法 スクロールバー非表示 コード HTML <section id="fourth4"> <div class="fourth4-inner"> <a href="#" class="fourth4-thumbnail">

          ゆうすけ@Ｗeb制作➡…

          【CSS】レスポンシブで横スクロール可能な画像ギャラリーの作り方

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【CSS】高さの大きい要素に合わせる「align-items: stretch; 」

          概要 同じコンテナ内でも文字数が違う場合、横幅を狭めることで文字数が多い方が背景が広くなってしまいます。 それを防ぎ自然な見た目にしてくれるのが"display: flex;"の ”align-items: stretch;”です。 コード CSS　→　親要素に設定 display: flex; align-items: stretch;

          ゆうすけ@Ｗeb制作➡…

          【CSS】高さの大きい要素に合わせる「align-items: stretch; 」

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【JavaScript】メソッド「.insertAdjacentHTML」

          基本の書き方 要素.insertAdjacentHTML("挿入位置", 挿入内容text); 読み方・意味 インサート・アジェイサントHTML 隣接　＝　Adjacent 挿入　＝　insert 挿入位置指定の第一引数4種類 1、beforebegin 要素の直前に挿入します。 2、afterbegin 要素の中の先頭に挿入します。 3、beforeend 要素の中の末に挿入します。 4、afterend 要素の直後に挿入します。 <div>TEST</

          ゆうすけ@Ｗeb制作➡…

          【JavaScript】メソッド「.insertAdjacentHTML」

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】ヘッダーと背景色を固定して余白調整する方法

          概要 Airbnbのサイトを模写していて、ヘッダーの固定、背景色、余白のやり方に少し悩み、解決したので手順と考え方、コードを記載します。 ※該当サイト⇩ コード HTML <div class="granHeader"> <header id="header"> <div class="header-logo"> <a href="#">Bircnc</a> </div> <nav>

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】ヘッダーと背景色を固定して余白調整する方法

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【HTML/CSS】カスタムスライダーの作り方

          概要 この記事では、HTML/CSSを使用してカスタムスライダーを作成する方法を紹介しています。 要点 <input type="range">要素をカスタマイズして、外観やスタイルを自由に変更するコード例 スタイルの設定方法やブラウザ間の互換性についても説明 コード /* ベースのスタイル */input[type="range"] { -webkit-appearance: none; /* ブラウザのデフォルトのスタイルをリセット */ app

          ゆうすけ@Ｗeb制作➡…

          【HTML/CSS】カスタムスライダーの作り方

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【JavaScript】即時関数

          コード (() => { console.log('即時関数');})();

          ゆうすけ@Ｗeb制作➡…

          【JavaScript】即時関数

          ゆうすけ@Ｗeb制作➡Ｗeb開発

          【Git/GitHub】新しい変更をGitHubにプッシュする手順

          ■1.　該当のディレクトリに移動 ※"git status"でリポジトリの状況を表示 ■2.　git add . を使用してすべての変更をステージング git add . ■3.     ステージングした変更をコミットする。変更に関連する意味のあるメッセージを付ける ※”git commit”ならエディタ起動 ※"git commit -m"なら直後に記入 記入したら"git log"もしくは"git log --oneline"で1行表示 git commit

          ゆうすけ@Ｗeb制作➡…

          【Git/GitHub】新しい変更をGitHubにプッシュする手順

          ゆうすけ@Ｗeb制作➡Ｗeb開発