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>
プログラミングスクールに通わず、プログラミングを学ぶ方法
「プログラミングスクールってどう思いますか」への、個人的な回答メモ。 LINEのウェブ制作系のオープンチャットで、 「おすすめのプログラミングスクールはありますか？」 「エンジニアに転職したいです。何からやればいいですか？」 「おすすめの勉強方法を教えてください」 など、プログラミング未経験の方によるこの質問から始まって、独学の方法についての意見交換が始まる展開を何度か見ている 初心者なのに数十万かけてスクールに通おうとしている人が多かったのが意外だったので、個人的な考えを長文でまとめたものである。 「リモート研修中にクビになった法政大の〜」という記事を見て、既視感があったので増田に貼る。 昨今のコロナ以前に書いたので、コミュニティの利用方法は若干今の現実と即してないと思う。 この文章は、ある程度の本音と持論を語るために、あえて冗長な長い文章の形式をとっている。 なぜならば世間一般の「エン
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal
jQueryでサムネイル画像をセンタリング+トリミング。 - Qiita
はじめに。 個別にサムネイル画像を準備できれば問題ないのですが、システム案件や顧客側で更新作業をする場合など、 それが難しい場合にjQueryで画像をリサイズ、センタリングしサムネイルを表示する覚え書きです。 表示イメージ 縦長、横長、パノラマの画像を使っていますが、こんなかんじでトリミングしていきます。 （ 画像はこちらからお借りしました。http://www.ashinari.com/ ） サムネイル画像を配置 HTML <div class="trimming"><img src="image1.jpg"></div> <div class="trimming"><img src="image2.jpg"></div> <div class="trimming"><img src="image3.jpg"></div> <div class="cle"></div> div.trim
モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション
Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。 現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。 その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。 『fancyBox3』の主な機能と特徴 まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。 モバイルファースト設置、設定が簡単分かりやすくて便利なUIYouTubeやVimeoやGoogleマップ、Instagramなどの対応画像はもちろん、inl
たった1行！jQueryで指定箇所までアニメーションつきで自動スクロールさせる方法 - Qiita
jQueryで指定したセレクタの箇所まで自動でスクロールする方法を紹介します。 次のように1行で書くことができます。
【jQuery】特定の位置まで来たらイベントを実行 - blog del Teorico
ホーム>【jQuery】特定の位置まで来たらイベントを実行 【jQuery】特定の位置まで来たらイベントを実行 【jQuery】特定の位置まで来たらイベントを実行 2017-08-02 jQueryを利用して特定の位置に来たらイベントを発火させる ある特定の要素の位置まで来たら何かしらのイベントを起こしたい時があると思います。 案件によってはあるのでメモがてら。 var thisOffset; $(window).on('load', function () { thisOffset = $('セレクタ').offset().top + $('セレクタ').outerHeight(); }); $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() > thisOffset) { // 特定
jQueryでmarginも含めた幅や高さを取得 | このコードわからん
しょぼい話し。 たとえば #id{ height: 10px; width: 10px; margin: 5px; padding: 5px; } とした時に、jQueryで普通に $('#id').height(); を実行してもheightで帰ってくる値は 10。 しかしながら、 $('#id').outerHeight(); ってやると、paddingを含んだ高さが返ってきます。 今回の場合は20。 marginを含めるには、trueを渡す必要がある。 $('#id').outerHeight(true); ってやると30だ。
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting