読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

メガドロップダウンメニュー

最後にPC用のナビにメガドロップダウンメニューを入れます 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならな…

Waypointsを使ったスクロールナビゲーション

Getting Started • Waypoints <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery Waypoints</title> <meta name="viewport" content="width=device-width"> <style> html,body,h1,ul,li { margin:0; padding:0; } ul { list-style:none; } a { text-decoration:none; color:#FFFFFF; } header…</meta></meta></head></html>

無限スクロールの制作

前回の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。ポイント ・無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。 ・ページのタイトル・サイトURLの最適化 ・コンテンツを細分化する事で表…

無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…

画像を遅延読み込みさせるjQueryプラグイン「Lazy Load」

Lazy Loadとは画像のレイジーローディング(遅延読み込み)を実装する為のjQueryプラグインです。前回やった無限スクロールと同様に画像を遅延読み込みさせる事で転送量の節約、ページの表示速度の向上に繋がります。 一見メリットだらけに思えますが、こうい…

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

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

レスポンシブデザインを考えたナビゲーション

前回作ったメニュー部分をPCの時には横並びのメニューが表示されていて、スマホ時にはメニューが隠れている状態で表示されるような作りにしてみましょう。 PCサイト スマホサイト ただ、このままでは色々と問題があり、修正が必要です。どこが問題点かをしっ…

jQueryプラグイン モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

ボタンにアニメーションを追加する

「jQueryのclickイベントを使ってtransformを適用させる」を応用し、ボタン自体にアニメーションを追加させてみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('.btn').on('click', function() { …</meta></head></html>

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

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

jQuery基礎

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