jQuery ResponsivejQuery Responsive

Responsive Website Templates and jQuery Blog
レスポンシブなWebサイトのテンプレートとjQueryのブログ

  • Media Works Service

    Media Works Service

  • >ECO HOUSE 21

    ECO HOUSE 21

  • ECO REFORM 21

    ECO REFORM 21

  • Baggage Ecommerce

    Baggage Ecommerce

  • 松下奈緒

    JAPANESE TOP ACTRESS

  • Meditative Yoga Studio

    Meditative Yoga Studio

  • Youtube V3 api Search youtube video

    YouTube API Search

  • Book Reference

    Book Reference

HTML5＆CSS3デザインガイド


サンプルページ
　Webサイトの各部名称と機能
サイト名URL
MyBookEditor for Machttp://www.mybook.co.jp/mac/
ANA公式サイトhttp://www.ana.co.jp/
　Webレイアウトの基本6パターン
サイト名URL
Bootstraphttp://getbootstrap.com/
Foundationhttp://foundation.zurb.com/
Code Gridhttp://www.codegrid.net/
Newsweekhttp://www.newsweek.com/
CHANELhttp://www.chanel.com/ja_JP/
Media Querieshttp://mediaqueri.es/
　シングルカラム型レイアウト
サイト名URL
Made in the Futurehttp://madeinthefuture.co/
People & Storehttp://people.st/
インド手刺繍の店 タンカhttp://www.tanka.in/
　マルチカラム型レイアウト
サイト名URL
Yahoo! JAPANhttp://www.yahoo.co.jp/
MSN Japanhttp://jp.msn.com/
日本経済新聞http://www.nikkei.com/
CORUMhttp://www.corum.ch/en
AND READYhttp://www.dot-and-ready.net/
KITTEhttp://jptower-kitte.jp/
　カード型レイアウト
サイト名URL
Lonely Planethttp://www.lonelyplanet.com/food-and-drink
Zitehttp://zite.com/
Flipboardhttps://flipboard.com/
Masonryhttp://masonry.desandro.com/
　1ページアプリケーション型レイアウト
サイト名URL
Airbnbhttps://www.airbnb.jp
SoundCloudhttps://soundcloud.com/
Backbone.jshttp://backbonejs.org/
AngularJShttps://angularjs.org/
Ember.jshttp://emberjs.com/
Airbnbhttps://www.airbnb.jp/
USA TODAYhttp://www.usatoday.com/
　フルスクリーン型レイアウト
サイト名URL
Long Story Shorthttp://www.longstory-short.co.uk/
Solar weekendhttp://solarweekend.com/
The Boxtrollshttp://www.theboxtrolls.com/experience/the-cavern
RADICAL TESTA S.C.http://www.radicaltesta.com/index_d.php
　グリッドを利用したレイアウト手法
サイト名URL
Bootstraphttp://getbootstrap.com/
Foundationhttp://foundation.zurb.com/
960 Grid Systemhttp://960.gs
Golden Grid Systemhttp://goldengridsystem.com/
VOGUE USAhttp://www.vogue.com/?us_site=y
可変グリッドレイアウトのデモhttp://www.profoundgrid.com/examples/fluid.html
レスポンシブに対応した可変グリッドレイアウトのデモhttp://www.profoundgrid.com/examples/fluidresponsive.html
　レスポンシブなレイアウトパターン
サイト名URL
Media Querieshttp://mediaqueri.es/
Column　レイアウトの役割とは
サイト名URL
Awwwardshttp://www.awwwards.com/
BEST WEB GALLERYhttp://bestwebgallery.com/

業種別Webサイトレファレンス

　美容室
サイト名URL
資生堂美容室http://salon.shiseido.co.jp/
宇都宮美容室.comhttps://hairsalon-japan.com
美容室・美容院アースhttp://hairmake-earth.com/
　エステサロン
サイト名URL
スリムビューティハウスhttps://slim.co.jp
エステティックサロン ソシエhttps://www.socie.jp/
エステティックサロン ゲランhttps://www.esgp.guerlain.co.jp/
　ネイルサロン
サイト名URL
ElixirNail【エリクサーネイル】https://elixir-nail.com
大人の女性のネイルサロン ACCUEIL-アクイユhttps://accueilnail.com
ダッシングディバ DASHING DIVAhttps://www.dashingdiva.co.jp/
　フィットネス
サイト名URL
【ティップネス】フィットネスクラブhttp://www.tipness.co.jp/
【スポーツクラブ ルネサンス】https://www.s-re.jp
女性専用フィットネスジムBodieshttp://www.bodies.jp/
　ヨガ
サイト名URL
AGNIYOGAhttp://www.agniyoga.jp/
グラヴィティヨガ協会http://gravity-yoga.jp/
ホットヨガスタジオ LAVAhttps://yoga-lava.com
　クリニック
サイト名URL
札幌クララ美容皮膚科https://clarabeautyclinic.jp
Original Beauty Clinic GINZAhttps://original-beauty-clinic.com
美容皮膚科横浜マリアクリニックhttps://cecile-cl.com
　歯科クリニック
サイト名URL
銀座・東銀座の歯医者｜銀座みらい歯科https://www.miraishika-ginzain.tokyo
CASANOVA DENTAL CLINIChttps://casanova-dental.com
株式会社デンタルサロンジャパンhttps://www.dentalsalon-japan.com
　ハウジングカンパニー
サイト名URL
東急リバブルhttps://www.livable.co.jp
パナソニック ホームズ - Panasonichttps://homes.panasonic.com/
大和ハウス工業株式会社https://www.daiwahouse.co.jp
　リフォームカンパニー
サイト名URL
LIXIL | リフォームhttps://www.lixil.co.jp/reform/
注文住宅新築とリフォームの 浅井良工務店https://www.asairyo.com/
ポラスアフターメンテナンスhttps://www.polus.co.jp/after/
　ITカンパニー
サイト名URL
ホームページ制作 大阪｜株式会社ユニオンネットhttps://www.unionnet.jp/
株式会社ＮＴＴデータ・ビーンサービスhttps://been-service.co.jp
東京都のWeb制作会社LINICAhttps://linica.jp

レスポンシブデザインテンプレート

Media Works Service

Media Works Service

>ECO HOUSE 21

ECO HOUSE 21

ECO REFORM 21

ECO REFORM 21

Aler Real Estate

Aler Real Estate

Square - Free Bootstrap

Square - Free Bootstrap

Baggage Ecommerce Category

Baggage Ecommerce

松下奈緒

JAPANESE TOP ACTRESS

Meditative Yoga Studio

Meditative Yoga Studio

Beauty Hair Salon

Beauty Hair Salon

Beauty Nail Salon

Beauty Nail Salon

Beauty Esthetic Salon

Beauty Esthetic Salon

Beauty Fitness Gym

Beauty Fitness Gym

Restaurant delizioso

Restaurant delizioso

Japanese Restaurant

Japanese Restaurant

Organic Life Store

Organic Life Store

Comfortable Cafe

Comfortable Cafe

Sunny Cafe

Sunny Cafe

Jazz Dining Bar Ural Owl

Jazz Dining Bar Ural Owl

ダイニングバー Bar

Dining Bar

Dental Clinic

Dental Clinic

Natural Flower House

Natural Flower House

Backstretch Slideshow

Backstretch Slideshow

Youtube V3 api Search youtube video

YouTube API Search

Book Reference

Book Reference

PART01 jQueryのベーシックライブラリ

animate()メソッド使ったアニメーション
ウィンドウ上端で固定するグローバルナビゲーション［１］
ウィンドウ上端で固定するグローバルナビゲーション［２］
スマホやPCの両方で多階層メニュー
スマホサイトの多階層メニュー
スマホサイトのハンバーガーメニュー
スマホサイトのドロップダウンメニュー［１］
スマホサイトのドロップダウンメニュー［２］
フローティングメニュー［１］
フローティングメニュー［２］
Bootsnav - Bootstrapメニュー
レスポンシブからドロワーまで！jQueryで実装できるメニュー関連のプラグイン9選
特定のクラスを持つコンテンツだけを表示する
ツールチップを作ってみよう
入力フォームの簡易バリデーション
使用しているブラウザーを表示
デバイスピクセル比を判別して画像を切り替える
スマートフォンでの縦向き・横向きを判別する
コンテンツを次々に読み込んで無限にスクロールするページ
スクロールを判別して指定位置に移動する
数値データからSVGでグラフを描画する
テーブルの表示をウインドウサイズに合わせて変更する
ページ遷移時にフェードアニメーションをつける
画像の遅延読み込み

PART02 jQuery ビジュアルデザイン

コンテンツを切り換えるタブ
タブとアコーディオンを切り替えるUIを作成する
テキストが長い場合は「続きを見る」リンクを表示する
メイン画像をプリロードする簡易的なイメージギャラリー
レスポンシブ対応ギャラリー
アニメーションで切り替わるギャラリー
ブラウザの画面内にバランスよく綺麗に整列されたギャラリー
レスポンシブ対応スライドショー
複数画像をクロスフェードで切り替えるレスポンシブスライドショー
フルスクリーンバックグラウンドビデオ1
フルスクリーンバックグラウンドビデオ2
ウィンドウ幅いっぱいに広がるフルスクリーンYouTube動画
SingerAlicia Keys
AudioPlayerAudioPlayer
YouTube007 Skyfall
FullScreen HTML5 VideoFullScreen HTML5 Video
FlexSliderFlexslider
bxSliderbxSlider
SlideshowSlideshow
FullScreen SlideshowJennifer Lopez
CarouselResponsiveCarousel
NavigationjQuery fatnav
DropDown Navigation
Drawer Navigation
FullScreen Navigation
Mega Dropdown Navigation
Validatorform validator
LightboxLightbox
Grid LayoutGrid Layout
GalleryGallery
NewsTickerNewsticker
Others
Table
Tooltip

ABOUT 概要

職業訓練で制作したロゴ
職業訓練で制作したロゴ
jQueryのブログは代表的なプラグイン(Flexslider, Lightbox2, audioplayerなど)などをレスポンシブにカスタマイズ。
レスポンシブな業種別Webサイトのテンプレートは教科書や様々なサイトを参考にしてWordPressで構築したものをベースにしています。
東京、名古屋でプログラマーを経験した後、大分に帰郷
WEBデザイナーの職業訓練を受けて自宅近くの情報学習センターでサイト制作の為の講義を受講
jQueryのブログを公開
業種別Webサイトテンプレートを公開
サイトにjQueryのブログ以外でJavaScript,jQueryについて調べたコンテンツを追加し始める
トップページにWebデザインやJavaScript,jQueryについて教科書や様々なサイトについて調べた内容を記述
連絡先
生年月日 1957年3月28日
大学 名古屋大学
郵便番号 〒870-0886
住所 大分市上田町3丁目3番4-212
電話番号 097-543-0816
Mobile (080)6406-4613
Email ryouji6488@gmail.com
Facebook Timeline