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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

スクロール後ナビゲーションをトップに固定

スクロール後ナビゲーションをトップに固定 PCサイズのみの場合 すぐ使えるダミーテキスト - 日本語 Lorem ipsum <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール後、ナビゲーションをトップに固定</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </link></meta></head></html>

ページトップへスムーズスクロール

ページトップへ(基本) この例はPNG画像ですが、CSS3やFont Awesomeなどの指定も試してみましょう 【例1】フェードインして表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページトップへ移動</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style> #content { height: 2000px; } /*top btn ----…</meta></head></html>

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

垂直型メガドロップダウンメニュー 大きな二次元のパネルでナビゲーションの選択肢をグループ化できる ナビゲーションの選択対象をレイアウトやアイコンによって構造化できる すべてが一目で見渡せる(スクロールが不要) 表示のタイミング 0.5秒間は待つ。 …

タブパネル - 実践

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

モーダルウィンドウ - fancyBoxとColorBox

画像の準備 Photoshopのレイヤーを適切な名前に変更しておく fancyBox ダウンロード 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyBox</title> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

モーダルウィンドウ - Lightbox

モーダル (modal) ウィンドウ モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことを指します Lightbox JavaScriptライブラリ Ajax(JavaScript)を利用して動作する機能をまとめてあるもの Ajax…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

bxSlider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.bxslider.min.js"></script> スライド画像の設定 …</link>

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></link></meta></head></html>

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

jQuery基礎演習(1)

基礎演習 以下の指示に従って、プログラムを作成しなさい。 Q01 「追加」ボタンを押したら「List1」「List2」の次に「List3」を追加表示し、「削除」ボタンを押したら「List3」が削除されるよう記述しなさい。 Q02 ボタンをクリックしたら、表示してある「幅…

jQuery基礎 - まとめ(内容や属性を変更する)

text / html 要素の内容をまるごと書き換えるメソッドです <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery sample</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div id="div1">入っていたテキスト</div> <div id="div2">入っていたテキスト</div> </body></html>

jQuery基礎 - まとめ(アニメーション)

fadeIn / fadeOut <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery sample</title> <link rel="stylesheet" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div id="box1" class="box">fadeIn</div> </body></html>

jQuery基礎 - まとめ(セレクタ)

jQueryの概念 「何かをとってくる」→「それに何かをする」 画面の表示の書き換え(DOMの操作) jQueryオブジェクトとインスタンス jQueryオブジェクト → jQuery{ } 「$()」は「 jQuery{ }」のインスタンス 「$()」は、何かをとってきて、jQueryオブジェクト…

アコーディオンメニューとは

アコーディオンメニュー 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探…

イベント

イベントとは ユーザーとWebサイトとの間でやり取りを行う処理を「イベント」と呼びます ユーザーイベント(キーボードやマウスを操作することで実行されます) ブラウザイベント(おもにWebブラウザに関連するイベント) イベントの設定 イベントを設定する…

関数とメソッド HTML・CSSの操作

jQueryの関数 jQueryは、関数オブジェクトです 「function」と表示され、jQueryがfunctionオブジェクトであることを示しています jQuery = window . jQuery = function( ){ }; jQueryメソッド jQuery関数が、jQuery関数オブジェクトがもつ関数オブジェクトで…

セレクタ

セレクタとは 名前・属性・状態などによりドキュメント内の要素を選択する機能(要素がオブジェクトとして返ってきます) $( '要素' ) jQueryでは、jQueryオブジェクトつまりインスタンスをを生成してからメソッドやプロパティを実行する jQueryオブジェクト…

はじめてのjQuery

jQueryとは JavaScriptのライブラリ https://jquery.com/ jQueryでできること HTMLドキュメントの横断操作 イベントハンドリング アニメーション Ajax(通信処理) 以上のことを簡単に使うことができるAPI(Application Programming Interface) 1系と2系 …