WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

jQuery

jQuery.3 では .loadは廃止

2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。 「jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。 中でもよく使わ…

ローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

jQuery演習

使用するjQueryメソッド .on() .css() .fadeIn() .fadeOut() 【問01】「変化」ボタンをクリックしたら300pxの正方形であるdiv#boxの背景色が黒色から、赤色に変わるように記述しなさい。 【問02】「変化」ボタンをクリックしたらh2に対して文字色が赤、背景…

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したら幅・高さ共に0pxから300pxに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタ…

アニメーションを使ったナビボタン

<body> <header> <h1>ナビボタン</h1> <p class="btn"><span class="icon"></span></p> </header> <nav id="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">お店について</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </body>

slideToggleに合わせてテキストを変更させる

今回は以前作った既存サイト(キリン)の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。 slideToggleの動きに合わせたスイッチの作成 以前はtoggl…

モバイルファーストを意識したレスポンシブデザインサイトの制作 4

ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。 また、スマホの機種によっては、「touchs…

ウィンドウサイズによって画像を切り替える

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。 backgroundプロパティであればメディ…

ハンバーガーメニューの実装

<html lang="ja"> <head> <meta charset="utf-8"> <title>スクロールすると固定になるナビ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="nav2.js">…</link></meta></meta></head></html>

cssセレクタの指定方法 復習

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。 jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しま…

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…