jQuery

HTML・cssの課題で作成したサイトに動きを付けてみましょう！ 下記は復習と、新しく覚えたいことを記録しておきます。 手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教えて頂けたら嬉しいです！ 01. 課題①：ドロワーメニューの実装 ≪HTML≫ まとめ ≪ＣＳＳ≫ まとめ 新しく覚えておきたいこと ≪jQuer≫ まとめ 課題②：ページトップへ戻るボタンを付ける ≪HTML≫ まとめ ≪CSS≫ まとめ ≪jQuer≫ まとめ 覚えておきたいこと 01. 課題①：ドロワーメニューの実装 まず、こちらのサイトを参考に…

前回に引き続きjQueryについて学んでいきましょう。 メソッドとパラメーター メソッドとパラメーターについて jQueryの代表的なメソッド 情報の追加と変更 要素の挿入と削除 属性の取得、変更、追加、削除 class属性の追加と削除 cssの取得、設定 cssの複数の設定方法 メソッドチェーン メソッドを使用したアニメーション 代表的なメソッド一覧 イベントの監視・構文 .on()を使った主なイベント処理 クリックイベントの例 hoverイベントの例 ワンポイント【いろいろなイベント構文の書き方】 メソッドとパラメーター 前回、jQueryはjQuery("セレクタ").メソッド("パラメ…

DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう！ ■jQueryとは？■ jQueryを使うための準備 jQueryを書く時のルール セレクタ（HTML要素）の指定方法【jQuery("セレクタ")】 メソッド("パラメータ") 繰り返し処理【.each(function)】 複数のセレクタを指定する まとめてセレクタを使用 子要素や孫要素などの条件を追加して指定 メソッドを使った要素の指定【Tree Traversal】 ワンポイント jQuery(function(){})について jQueryの省略 ■jQueryとは？■ JavaS…

前書き rails6のradio_buttonタグでradioボタンを作成したところデフォルトのスタイルをクリックしたら文字の色が変わるようにスタイルを変更したいと思いました。色々苦戦したので記事に残します. 環境 Ruby 3.0.6 Rails 6.1.7.6 jquery: 3.7.1 変更前. . 変更後. やったこと ①○を非表示にする. ②クリックした要素を赤く色を付ける。 ①○(radio_button)を非表示にする. radio_buttonの部分のコードだけ載せます。 = f.label :weekly_goal,weekly_goal.weekly_goal,for: "…

ラジオボタンの設定をjqueryのスクリプトで行うときにハマるという話です。 問題の前提 ラジオボタンは通常複数の同一name属性をもつ要素が集まってできています。 <input type="radio" name="post_radio" value="val1" checked>要素１ <input type="radio" name="post_radio" value="val2">要素２ <input type="radio" name="post_radio" value="val3">要素３ こんな感じです。 ここで、要素３にチェックを入れるという設定をjqueryでやりたいとい…

学生の頃ってよくパフェとかシェイクとかアイスとか食べてたのに 大人になるとぜーんぜん食べなくなった。 ダイエットとか全然関係なく、そこへの欲求が出てこない。 だけど、大人になるまで食べたことなかったものを大人になって食べたいな～って 思うことも増え、挑戦することも増えた。 その中の1つがこのメロンソーダフロート。 一口目は喉を潤したいから、メロンソーダをストローでグイっと。 （ストローはグイっとではないと思うけど） しゅわしゅわを味わった後に、ぷかぷか浮かぶアイスをちゅるっと。 大人になって味わう、このモダンチックな食べ物と雰囲気。 THE★大人 幸せのひと時を有難う。 ☟本日の授業の流れ a…

台風のせいで毎日の気温変化があり、頭と体がついていかない今日この頃。 ☟本日の授業の流れ a.m....jQuery＜val,html,prepend,append,remove,index,click,hover,mousemove,scroll, show,hide＞ p.m....4～5限目の途中まで-jQuery＜fadeIn,fadeOut,slideToggle,animate,stop, children,parent,each＞ 5限目の途中～6限目-javaScript＜基本文法(変数)、今後の話(為になる雑談)＞ ＞なんだか英語が使いこなせる人のように見える……(。-`ω-…

kintone の JS カスタマイズですが、複数のアプリを触り始めると、似たような処理をするため、重複したコードが増えてきますね。 このままだと、なんとも効率悪いし、間違いの元なので、 webpack を入れてファイルを共通化して扱えるようにしました。 kintone でも webpack 紹介してくれてますしね。 webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~ 目指せ！JavaScriptカスタマイズ中級者（１） 〜webpack編〜 なんで必要？ でも、そもそもなんで webpack なんてものが必要なのか？というのが疑問でした。フロントエンド周りの開発には…

④Flickityによるカルーセルスライダーの導入 はてなブログ無料版のトップページを、自分好みのスタイルにカスタマイズする方法を紹介するシリーズの第４弾です。 今回は、Intersection Observer Animate.cssを使ったスライドインアニメーションに加え、Flickityを使ったカルーセルスライダーの導入方法をご紹介します。 https://pixabay.com/users/geralt-9301/

初めに フロントエンド開発をするときに、フレームワークを使用すると効率的な開発ができます。本記事では、人気のフレームワークをいくつか紹介します。

はじめに こんにちは、フロントエンド開発グループ Webフロント開発チームの田渕です。普段の業務ではウェルスナビのサービスサイトやコーポレートサイトなどのフロントエンド開発を担当しています。 この記事では、フロントエンド開発のコードチェックをツールで自動化する方法について紹介します。React や Vue.js といった JavaScript フレームワークを使ったフロントエンド開発の環境であれば比較的導入しやすい内容です。フロントエンド開発の環境構築をおこなう際にご参考いただければ幸いです。 進行中のプロジェクト 今回の内容は現在進行中のプロジェクトで新たな環境を構築した時の内容を基に紹介し…

1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティなどの脆弱性調査で行う、JavaScript の静的解析と動的解析についてまとめて紹介します。 1. 始めに 免責事項 想定読者 検証環境 静的解析と動的解析 2. 静的解析 (Static Analysis) 2.1 JavaScript File の URL を収集する getJS hakrawler getallurls (gau) 2.2 エンドポイントを列挙する LinkFinder xnLinkFinder katana jsluice endext 2.3 シークレット情報を検出する SecretFin…

③Animate.cssによるスライドアニメーションとホバー効果2 この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。Intersection Observer（交差検知）とAnimate.cssライブラリを使って、オススメ記事やページへのリンク画像にスクロールに応じたスライドアニメーションを付与します。 HTML、CSS、JavaScriptのコーディングについては丁寧な解説を心掛けました。本記事が、ブログやサイトをより魅力的にするカスタマイズのヒントとなれば幸いです。 https://pixabay.com/u…

②Animate.cssによるスライドアニメーションとホバー効果1 この記事では、はてなブログ無料版のトップページを自分らしいスタイルにアップグレードするための具体的なカスタマイズ方法を紹介します。 Intersection ObserverとAnimate.cssライブラリを駆使して、画像カードにスライドアニメーションを加え、マウスホバーでSNSボタンやメッセージを表示する仕組みも取り入れています。 さらに、Animate.cssの導入方法や基本的なHTML、CSS、JavaScriptの構造についても解説します。これをヒントにして、はてなブログのトップページをより魅力的にカスタマイズしまし…

僕は未経験からエンジニアになり、今はメガベンチャーでエンジニアとして働いている。 未経験からエンジニアになるのはそれなりに難しく、願いが敵わないパターンも多くあると聞く。 そんな中、なぜ自分はエンジニアになり、メガベンチャーで働くことができるようになったのかを分析するため、未経験からエンジニアになるまでに歩んだ道のりのポイントポイントで抱えていた悩み、頑張っていたことなどを思い出し書いてみる。 今、未経験からエンジニアを目指している人がいれば参考になるかもしれない。 （時代や運の影響もあるのであくまで参考程度に) webデザイナーブラック期（スクール、契約社員） 悩んでいたこと デザインができ…

Welcome To My Blog A Theme For Top About Blog Blog Top Blog-1 Blog-2 Blog-2 Top Blog-2-1 Blog-2-2 Blog-2-3 Blog-2-4 Blog-3 Menu Latest Posts Main Category Our Portfolio. Partner Recommended Leisurely Enjoy. Meet The Team Contact Page Content Percentage HTML CSS jQuery SCSS Javascript PHP XML Web Des…

この記事はクラウドワークス Advent Calendar 2023 シリーズ 1の1日目の記事です。 クラウドソーシングサービス「クラウドワークス」（以下 crowdworks.jp ）にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける@okuto_oyamaです。 一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。 フロントエンド活動の振り返りをしてみよう 一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。 qiita.com engineer.crowdworks.jp

id:hc0001 です。前回は ハウテレビジョンのプロダクトの現在地 - ハウテレビジョン開発者ブログ について書きましたが、今回はその進捗について書きます。尚、この記事は HowTelevision Advent Calendar 2023 1日目の記事です。 qiita.com 技術負債の解消プロジェクトの発足と進行 基盤投資にフォーカスするプラットフォームエンジニアリングの組成 部門や全社で利用しているツールやリソースの統廃合 専門性ではなくプロダクトに向き合うチーム組成に向けて 人材戦略部の兼務と組織改善へのフォーカス これからに向けて 技術負債の解消プロジェクトの発足と進行 外資就…

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>