vue.jsを使ってタブメニューをサクッと実装してみた。
こんにちは！ アウラの河野です。 今回は制作中の案件で、タブメニューで表示を切り替える仕様があり、 簡単に作成する方法が見つかりましたので、ご紹介いたします。 まずはマークアップから <div id="contents"> <div class="tab_box"> <ul class="tab_list"> <li>タブ1</li> <li>タブ2</li> <li>タブ3</li> </ul> <ul class="article"> <li>ダミーテキスト1</li> <li>ダミーテキスト2</li> <li>ダミーテキスト3</li> </ul> </div> </div>
【保存版】Vue.js入門【特徴・メリットから基本的な使い方まで】
2020/05/15 (更新日: 2020/06/10) 【保存版】Vue.js入門【特徴・メリットから基本的な使い方まで】JavaScript そんな疑問にお答えします。 Vue.jsは今とても勢いのあるJavaScriptフレームワークです。この記事では、初心者にも分かりやすいようにVue.jsのメリットやjQuery・Reactとの違い、基本的な使い方までを詳しく解説していきます。 長い記事になってしまったので、必要な部分や知りたいと思った内容から読んでいただければ幸いです。 Vue.js公式サイト はじめにまずはじめに、この記事のターゲットや取り扱う範囲について書いていきます。 この記事のターゲットこの記事では、下記のような方をターゲットとしています。 Vue.jsがどんなものか知りたい人Vue.jsの基本的な使い方を知りたい人JavaScript、jQueryを学んで先に進みたい
Vue.jsとjQueryの違いは メリット・デメリットを歴史的に比較 | RUNTEQ - 公式ブログ｜未経験からWebエンジニアへ RUNTEQ BLOG
「jQueryでもアプリは作れるのになぜjQueryではいけないのか？Vue.jsを学ぶ理由を知りたい」RUNTEQの生徒さんから出たこの疑問についてjQuery脱却の歴史的背景とVue.jsとの比較について説明します。サーバとクライアントの役割がどう変遷してきたか、それによってJavaScriptの役割がどう変遷してきたかなどメリット・デメリットをわかりやすく解説。 RUNTEQではVue.jsのカリキュラムを用意しています。先日生徒さんから『jQueryでもアプリは作れるのになぜjQueryではいけないのか？Vue.jsを学ぶ理由を知りたい』との声を頂いたのでこの記事を書くに至りました。 それを説明するには事前知識としてフロントエンドの歴史を知っておかなければいけないので、そこから簡単に解説します。 フロントエンドの歴史 ＊注）初心者向けの記事になるので、以下厳密性に欠ける部分はあると
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
