 |
Mam's WebSite |
 |
Javascript CSS講座
- jQuery
-
jQueryを使って指定オブジェクトに滑らかにスクロール
jQueryを使って指定オブジェクトに滑らかにスクロールさせる
-
jQueryでanimateを使ってアニメーションを行うには
jQueryを使って任意のCSSプロパティでアニメーションを行うには
-
jQueryでanimateを使ってアニメーションを行う（transformを使う）
jQueryを使って任意のCSSプロパティでアニメーションを行う（transformを使う場合はstepを使う）
-
mamImageBoxでWEBで写真を表示させる
jQueryベースのライブラリmamImageBoxでWEBで写真を表示させる
- CSS
-
displayプロパティのinline,block,inline-block
CSSのdisplayプロパティのinline,block,inline-blockの違い
-
displayプロパティのflex、inline-flex
CSSのdisplayプロパティのflex、inline-flexの使い方
-
CSSのfilterプロパティを使う
CSSのfilterプロパティのblur,brightness,contrast,drop-shadow,grayscale,hue-rotate,invert,opacity,saturate,sepiaを使う
-
CSSのtransformプロパティを使う
CSSのtransform-origin:0 0、transform:scale(拡大縮小率) rotate(角度)プロパティを使う
-
CSSのtransition、transform、filterプロパティと疑似クラス:hoverを使う
CSSのtransition、transform、filterプロパティと疑似クラス:hoverを使う
-
CSSのanimationとtransform、translate、rotateY、scaleプロパティを使う
CSSのキーフレームanimationとtransform、translate、rotateY、scaleプロパティを使う
-
brタグにdislpay:none、inlineを適用して改行位置を調整する
brタグにdislpay:noneを設定すると改行されなくなる。メディアクエリCSSと組み合わせてデバイス幅に応じて改行位置を設定する。
-
CSSのclip-pathプロパティを使う
clip-pathプロパティでパス指定を行い、エレメントから切り抜き（クリッピング）を行う。
-
CSSのclip-pathプロパティと@keyframesとanimationを使う
CSSのclip-pathプロパティと@keyframesとanimationを使ってアニメーションを行う。
-
CSSのbackground: linear-gradient()でグラデーションを背景に表示
CSSのbackground: linear-gradient()でグラデーションを背景に表示
-
nav,ul,liタグとCSSを使って縦並びのメニューをつくる
nav,ul,liタグとCSSを使って縦並びのメニューをつくる
-
nav,ul,liタグとCSSを使って横並びのメニューをつくる
nav,ul,liタグとCSSを使って横並びのメニューをつくる
-
CSSを使って角が丸いフレームの入力画面をつくる
CSSを使って角が丸いフレームの入力画面(input text,select)をつくる
-
CSSで画面上下に固定のヘッダー、フッターをつくる
CSSで画面上下に固定のヘッダー、フッターをつくる
-
position:stickyを使ってスクロール位置に応じて要素を固定表示する
CSSのposition:stickyを使ってスクロール位置に応じて要素を固定表示する
-
scroll-snap-typeを使って親要素のスクロールバーのスクロール位置を子要素の上や左にスナップさせる
CSSのscroll-snap-typeを使って親要素のスクロールバーのスクロール位置を子要素の上や左にスナップさせる
- Javascript
-
Javascriptの配列、連想配列
Javascriptの配列、連想配列の生成と値の代入、forEachを使う
-
JavascriptでCSSを動的に追加する
JavascriptでCSSを動的に追加し、エレメントにクラスを設定、解除する
-
Javascriptで画像をリサイズしてimgタグにData URI Scheme
Javascriptで選択した画像ファイルを、アスペクト比を保持しながら縮小を行いPNG形式に変換してimgタグに表示する
-
Javascriptでモーダルダイアログ風ダイアログの表示
Javascriptでモーダルダイアログ風ダイアログの表示します。マウスでタイトルバーをドラッグしてダイアログを移動できます。
-
Javascriptでカレンダーから日付を入力する
Javascriptでカレンダーから日付を入力する ～ mamCalendar.js
-
Javascriptでダイアログで時刻（時分）を入力する
Javascriptでダイアログで時刻（時分）を入力する ～ mamTimePicker.jsを使う
-
Javascriptでダイアログで選択する汎用ピッカー
Javascriptでダイアログで選択する汎用ピッカー ～ mamGeneralPicker.jsを使う
-
Javascriptで画像を分割回転移動フェードアウト
Javascriptで画像バラバラに回転移動フェードアウトするアニメーション ～ mamImageSplit.js
-
Javascriptで画像を分割回転移動フェードアウトで順次画像表示
Javascriptで画像をバラバラに回転移動フェードアウトしながら順次画像表示するアニメーション ～ mamImgSplitCarousel.js
-
Javascriptで物体の周囲360度を撮影した画像を表示する
JavascriptでCG等で物体の全周囲の方向から撮影した多くの画像をJavaScriptで回転表示する ～ mamImgAround.js
-
キャッシュの影響を受けずに.css、.jsの外部ファイルの読み込み
サーバーやブラウザのキャッシュの影響を受けないように、CSS（.css）ファイルやJavascript（.js）の外部ファイルの読み込みと適用を行う
-
inputタグのtype属性設定の違いによるiPhoneとAndroidの仮想キーボード
inputタグでtype属性設定の違いによるiPhoneとAndroidの仮想キーボード表示形式
-
スマートフォン（Androidのみ）の傾きをセンサーから取得
スマートフォン（Androidのみ）の傾きをセンサーから取得して表示する
-
スマートフォン（Androidのみ）のバイブレーション機能をJavascriptから使う
スマートフォン（Androidのみ）のバイブレーション機能をJavascriptから使って振動させる
-
Javascriptでcanvasにアナログ時計を表示させる
Javascriptでcanvasに色を塗ったり線を引いたりしてアナログ時計を表示させる
-
Google Map APIを使って地図を表示する
Google Map APIを使って地図を表示し、マーカーとインフォウィンドウを作成して表示する
-
HTML5のcanvasにモバイルから写真を撮影して表示
HTML5のcanvasにモバイルから写真を撮影して表示（PCは写真ファイルを選択して表示）
-
GPS機能を使って緯度経度を表示
HTML5のGPS機能を使って緯度経度を表示する
-
HTML5のcanvasで手書きでお絵かき
HTML5のcanvasで手書きでお絵かきができるjavascript
-
javascriptでスロットマシン ゲームを作る
スロットマシン ゲームを短いソースコードで作る
-
JavaScriptでキーボードタイピングゲームを作る
JavaScriptでキーボードタイピングゲームを作る
-
javascriptでマウスを使ってボールを跳ね返すラケットゲームを作る
javascriptでマウスを使ってボールを跳ね返すラケットゲームを作る
-
javascriptでモグラたたきゲームを作る
javascriptでマウスを使ってボールを跳ね返すラケットゲームを作る
-
マウスカーソルにオブジェクトが追従するjavascriptサンプル
マウスカーソルにオブジェクトが追従するjavascriptサンプル
-
スライダーを使って画像を拡大縮小表示するJavaScriptサンプル
スライダーを使って画像を拡大縮小表示できるスクロールボックスのJavaScriptサンプル
-
画像をHSV変換し、色相変換するJavaScriptサンプル
スライダーを使って画像を拡大縮小表示できるスクロールボックスのJavaScriptサンプル
-
画像をHSV変換し、指定色相範囲のみを色相変換するJavaScriptサンプル
スライダーを使って画像を拡大縮小表示できるスクロールボックスのJavaScriptサンプル
-
ローン返済金額計算
元金均等返済計算、元利均等返済計算ができるJavaScriptサンプル
- WebGL(three.js)
-
three.jsを使ったWebGL
Three.jsを使ってWebで3D表示（WebGL）
-
CSS3Dを使って2DのHTMLを3Dに表示する
Three.jsのCSS3Dを使って3DオブジェクトにHTMLを表示する
-
３Ｄオブジェクトのクリックとタッチ
3Dオブジェクトをclickやtouchに応答させる（ビジョントレーニングのアプリ）
-
OBJファイルの表示
OBJ,MTLファイルを表示する
- jQueryMobile
jQueryMobileの基本構文
jQueryMobileの基本構文の記述
jQueryMobileのページの記述
jQueryMobileのページ(data-role="page")の記述についての
jQueryMobileでAタグを使ったボタンの基本的な使い方
jQueryMobileでAタグを使ったボタンの基本的な使い方(data-role="button")
jQueryMobileでラジオボタンの使い方
jQueryMobileでラジオの使い方
jQueryMobileでセレクトウィジェットの使い方
jQueryMobileでselect,optionタグの使い方
JQuery Mobile
JQuery Mobileのサンプルページ