ゆうすけ@Ｗeb開発

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

ゆうすけ@Ｗeb開発

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

Rubyのcase文の使い方

Rubyのcase文は、複数の条件を処理するための構文です。case文は、特定の式や値に基づいて、それに対する複数の条件をチェックし、該当する条件に基づいて異なる処理を行います。 基本的な構文 case expressionwhen value1 # value1に一致する処理when value2 # value2に一致する処理when value3 # value3に一致する処理else # どの条件にも一致しない場合の処理end expressionは

ゆうすけ@Ｗeb開発

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

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

      ゆうすけ@Ｗeb開発

      • 【Ruby on Rails】redirect_to と render の違いと使い分け

        結論redirect_to: 新しいHTTPリクエストを引き起こし、ページの完全なリロードを伴います。 フォーム送信後の重複送信を避けるために使用されることが多いです。 render: 現在のHTTPリクエストの中で完結し、ページのリロードは発生しません。 フォームのエラー表示や、同じページ上でのビューの更新に使用されます。

        ゆうすけ@Ｗ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開発

        Rubyのcase文の使い方

        ゆうすけ@Ｗ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開発

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

          ゆうすけ@Ｗ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開発

          【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開発

          【JavaScript】モーダルウインドウ

          GitHubHTML https://github.com/Yusuke0620/JavaScript_modalWindow/blob/main/index.html CSS https://github.com/Yusuke0620/JavaScript_modalWindow/blob/main/style.css JavaScript https://github.com/Yusuke0620/JavaScript_modalWindow/blob/mai

          ゆうすけ@Ｗeb開発

          【JavaScript】モーダルウインドウ

          ゆうすけ@Ｗ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開発

          【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開発

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

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

          ゆうすけ@Ｗeb開発

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

          ゆうすけ@Ｗeb開発

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

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

          ゆうすけ@Ｗeb開発

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

          ゆうすけ@Ｗeb開発

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

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

          ゆうすけ@Ｗeb開発

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

          ゆうすけ@Ｗeb開発

          【JavaScript】メソッド「.insertAdjacentHTML」

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

          ゆうすけ@Ｗeb開発

          【JavaScript】メソッド「.insertAdjacentHTML」

          ゆうすけ@Ｗ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開発

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

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

          ゆうすけ@Ｗeb開発

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

          ゆうすけ@Ｗeb開発