原龍我

初めまして、原龍我と申します。web業界に入って間もない23歳男です。こちらでは自分が…

原龍我

初めまして、原龍我と申します。web業界に入って間もない23歳男です。こちらでは自分が勉強してきたことや技術の記録として投稿していこうと思っています。また、面白いと思ったことなども投稿していきますのでよろしくお願いします！！！！ https://ryuga-player.com/

[自分用メモ]バニラjsのみでタグを切り替えを実装

脱jqをするために、タグ切り替えをvanilla.jsのみで実装しました。 意外と簡単でした。ただまだ、jqの方がコード記述が少ないです。 下記のHTMLをファイルを用意する <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>タブ

原龍我

    • [自分用メモ脱jq]　トップへ戻るボタン　スムーズにスクロールしてページのトップへ戻る　

      脱jqをするため、トップに戻るボタンをjsにて実装しました。 その時の備忘録です。 HTMLファイルに下記を記入 <div class="dammy"> <p>Javascript ページトップへ戻るボタン</p></div><button id="page-top" class="page-top" aria-label="ページの最初に戻る"></button> CSSファイルには下記を記載 div.dammy{ display: inline-block;

      原龍我

      • [自分用メモ]バニラjsでテキストにクラス付与してアニメーションを付ける方法　

        HMTLファイルに記載したテキスト「 PLAY ANIMATION」にjsを使い一文字ずつに<span>タグを付与していく方法 HMTLの記述 <body> <div id="container"> <div class="animate-title inview"> PLAY ANIMATION </div> </div></body> CSSの記述 html { font-family: "Teko"

        原龍我

        • Intersection Observerを使おう

          特定要素が画面内に入ったら発火する監視システムです。 Intersection Observer は特定の要素が指定領域内に入ったかどうかを検知するAPIです。 基本的には IntersectionObserver を呼び出して、第1引数に実行したい関数、第2引数にオプション設定を記述します。オプションは初期値でよければなくてもOK。 const options = { root: document.querySelector('#scrollArea'), root

          原龍我

        [自分用メモ]バニラjsのみでタグを切り替えを実装

        原龍我

        • [自分用メモ脱jq]　トップへ戻るボタン　スムーズにスクロールしてページのトップへ戻る　

          原龍我

        • [自分用メモ]バニラjsでテキストにクラス付与してアニメーションを付ける方法　

          原龍我

        • Intersection Observerを使おう

          原龍我

          Swiper.jsの基本的に使い方

          以下が公式サイト 公式サイト：https://swiperjs.com/ 資源：https://unpkg.com/browse/swiper@7.0.2 まずは、CDNでライブラリを読み込むかもしくは、資源をダウンロードしてローカルで設置する。 下記は<head></head>タグ内に設置する。<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.c

          原龍我

          Swiper.jsの基本的に使い方

          原龍我

          ページ開く際のローディングアニメーションの作り方

          今回は「pace.js」を使う。 ①pace.jsページに行き好きなアニメーションを選び「DOWNLOAD」ボタンを押す ②ダウンロードできたCSSファイルをHTMLファイルにリンクさせる。 ③pace.jsを用意するかCDNを使ってpaceを読み込む pace.jsファイルを下記に用意した。 ④header内にpace.jsとCSSをリンクさせる。 <link rel="stylesheet" href="loader.css" /> <script

          原龍我

          ページ開く際のローディングアニメーションの作り方

          原龍我

          ワードプレスの投稿を静的サイトに組み込む方法

          静的サイトにwpの記事を入れた時の方法。 ①ワードプレスをダウンロードする。 ②wp設定が終わったら、phpのファイルを２つ用意する。 自分の場合はindex.phpとsingle.phpとして用意した。 ③index.phpの ファイルの一番上に記載する。 パスでwp-load.phpとリンクさせる。 <?php include ( dirname(__FILE__) . '../../wp/wp-load.php'); ?> mainタグに下記のように記載する

          原龍我

          ワードプレスの投稿を静的サイトに組み込む方法

          原龍我