記事一覧
【JavaScript】背景画像の無限スクロール
CSS版のリンク HTML <section id="summary"></section><!-- /summary --> CSS #summary { background: url("../images/bg.gif") repeat; } JavaScript const …
【HTML/CSS】背景画像の無限スクロール
課題リンク https://code-jump.com/demo/html/lp/ HTML <section id="summary"></section><!-- /summary --> CSS #summary { background: url("../images/bg.gif"…
【HTML/CSS/JavaScript】ハンバーガーメニュー⇨2本線が×に
コードペン https://codepen.io/Yusuke0620/pen/jOJQrp HTML <div class="hamburger_menu"> <span></span> <span></span> </div> …
【HTML/CSS】画像を斜めにカットして表示する方法「clip-path」
参考にした記事 https://asobi-lab.co.jp/lecture/web/clip-path/ 作成したサイト画像 コード HTML <div class="img"> <img class="bgImg" src="./images/develop…
料理店に例える(3層スキーマ)
料理店に例える(3層スキーマ)外部スキーマ：お客さんがメニュー表を見て注文を行う
概念スキーマ：サービスマンのような立ち位置
内部スキーマ：指示に従い保存していた食材をどう調理するか
外部スキーマ
ここでは詳細なレシピや食材の情報、また在庫状況など見せる必要はなく
自分が食べたい料理を簡潔にサービスマンに伝えればよいという認識。
概念スキーマ
ユーザーの要求を受け、キッチンに伝え両者が
【JavaScript】「for」と「forEach」の違い
※notionと同じ内容です
1. 「for」と「forEach」の違い
1-1 ■forEachは配列のみ
forEachが繰り返せるのは配列のみ
1-2 ■forEachは配列の持っている要素の数だけ繰り返す
無限ループエラーになりにくいメリット
1-3 ■forEachはコード記述が効率的
forのように繰り返し条件を書く必要が無い
2. 基本構文
3. コード例
/*--
【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%
【JavaScript】背景画像の無限スクロール
CSS版のリンク
HTML
<section id="summary"></section><!-- /summary -->
CSS
#summary { background: url("../images/bg.gif") repeat; }
JavaScript
const bgImg = document.getElementById('summary'); /
【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 lin
【HTML/CSS】画像フェードインアニメーション
概要
以下のアニメーションをCSSで実装します
①3枚の画像が順番に切り替わり表示する
HTML
<div id="home"> <ul class="fade"> <!-- スライドイメージ --> <li><img src="images/mainvisual1.jpg" alt=""></li> <li><img src="images/mainvi
【HTML/CSS/JavaScript】ハンバーガーメニュー⇨2本線が×に
コードペン
https://codepen.io/Yusuke0620/pen/jOJQrp
HTML
<div class="hamburger_menu"> <span></span> <span></span> </div> <!-- 以下はコードの説明書き --> ⇧<br>
【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 { cli
【HTML/CSS】画面幅に応じた自然なテキスト改行方法「inline-block」
概要
この記事では、HTMLとCSSを使用して、画面幅に応じてテキストが自然に改行する方法を紹介します。具体的には、以下のステップに従って説明を進めます。
"span"タグでテキストを区切る
spanタグに付与していたclass属性に"display: inline-block;"プロパティ指定
インラインブロック要素としての振る舞い
・インライン要素の特性(テキストなどと同じ行に表示
【CSS】レスポンシブで横スクロール可能な画像ギャラリーの作り方
概要:
この記事では、HTMLとCSSを使用してレスポンシブで横スクロール可能な画像ギャラリーを作成する方法について解説します。
画像を横一列に配置
コンテナを横方向にスクロール
レスポンシブデザインの実装方法
スクロールバー非表示
コード
HTML
<section id="fourth4"> <div class="fourth4-inner"> <
【CSS】高さの大きい要素に合わせる「align-items: stretch; 」
概要
同じコンテナ内でも文字数が違う場合、横幅を狭めることで文字数が多い方が背景が広くなってしまいます。
それを防ぎ自然な見た目にしてくれるのが"display: flex;"の
”align-items: stretch;”です。
コード
CSS → 親要素に設定
display: flex; align-items: stretch;
【JavaScript】メソッド「.insertAdjacentHTML」
基本の書き方
要素.insertAdjacentHTML("挿入位置", 挿入内容text);
読み方・意味
インサート・アジェイサントHTML
隣接 ＝ Adjacent
挿入 ＝ insert
挿入位置指定の第一引数4種類
1、beforebegin
要素の直前に挿入します。
2、afterbegin
要素の中の先頭に挿入します。
3、beforeend
要素の中の末に挿入しま
【HTML/CSS】カスタムスライダーの作り方
概要
この記事では、HTML/CSSを使用してカスタムスライダーを作成する方法を紹介しています。
要点
<input type="range">要素をカスタマイズして、外観やスタイルを自由に変更するコード例
スタイルの設定方法やブラウザ間の互換性についても説明
コード
/* ベースのスタイル */input[type="range"] { -webkit-appearance:
【Git/GitHub】新しい変更をGitHubにプッシュする手順
■1. 該当のディレクトリに移動
※"git status"でリポジトリの状況を表示
■2. git add . を使用してすべての変更をステージング
git add .
■3. ステージングした変更をコミットする。変更に関連する意味のあるメッセージを付ける
※”git commit”ならエディタ起動
※"git commit -m"なら直後に記入
記入したら"git log"