webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

jQuery

jqueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。jonsuh.com もちろん便利なプラグインはありますが、このようなシンプルな動き…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

jQueryを記述する上で気をつけるポイント

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…

クリックする度にdivごと表示を切り替える

今回の会社概要は日本語と英語を併記。スマホでは横並びでは見辛く、かといって縦に並べると冗長化してしまうので、適した見せ方を考えましょう。 <div class="info"> <h2>会社概要</h2> <dl> <dt>会社名</dt><dd>株式会社フェリカ企画</dd> <dt>所在地</dt><dd>東京都豊島区南池袋2-12-9 KKビル4F</dd> <dt>設立日</dt><dd>2000年1月1日</dd> <dt>代</dt></dl></div>…

スクロールしたらナビゲーションが固定

<html> <head> <meta charset="utf-8"> <title>スクロールイベント</title> <style> html,body,h1 { margin:0; padding:0; } body { height:2000px; } header { width:100%; background:#399; } .header-inner { height:20vh; } h1 { text-align:center; line-height:20vh; } .fix h1{ text-align:left; line-height…</meta></head></html>

jQueryでクリックする度にテキストを切り替える

<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでのテキスト変更</title> <style> html,body { margin:0; padding:0; } img { vertical-align:bottom; } .txt { width:200px; height:50px; border:1px solid #444; border-radius:6px; text-align:center; line-height:50px; margin:50px auto 20px…</meta></head></html>

スムーススクロール

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…