宮崎のホームページ制作会社Tedinc | HTML

menu 0982-60-1084

TEDINC OFFICIAL BLOG

こんにちわTedincの林田です。
今回は自分が技術向上の為に非常に勉強しやすく役だったサイトがあったのでご紹介します。

今回自分はjQueryを自分で自由に実装していと考え行き着いたサイトなので、下記の流れので説明していきます。

メニュー
1,jQueryについて&できる事&使用方法
2,簡単に実装させたい
3,【Progate】:自分でjQueryをカスタマイズする方法を学ぶ



1,jQueryについて&できる事&使用方法


jQueryについて

jquery
jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。
参照
https://ja.wikipedia.org/wiki/JQuery

jQueryでできる事

サイトに個性がある動きなどが表現できます。(スライダー、ナビ、ページスクロールetc…)

参考記事一覧
少しのコードで実装可能な20のjQuery小技集
jQueryでできること
jQueryプラグインまとめ集

使用方法

1,ベーシックな方法

https://jquery.com/からjQueryをダウンロードし、サイトに設置します。

headやfooterなどにようにして下記のように記載して、完了でこれでjqueryが使用できるようになります」。


2,もっと簡単方法(google ajax apiを使う)

「jquery/1/jquery~」この数字はバージョン1の最新版のjQueryを取得するという意味です。(細かい指定もちろん行えます )

JavaScriptのコードを書いていく

JavaScriptのコードを下記の 【// ここにコードを書いていく。】に書いていきます。




2,簡単に実装させたい

これは簡単な説明となります。

下記のイラストを参考にしてくださいしてください。

パソコンの前で腹に息を溜め、叫びます
・・・・・・・・・3
・・・・・・・2
・・・・1
google

・・・・

・・・・

・・・・

注意点(本当に叫んでしまった場合)

1、アパート住まいの方は隣近所の人と亀裂が入ります。
2、実家住まいの方は両親が食卓の時涙目で、「辛いことがあったら言ってね」と言われます。
3、彼女と同棲中の方は、「私がこの人守らなきゃ・・・・・」と彼女に不思議な責任感が生まれます。

・・・・

・・・・

・・・・


冗談はさておき

googleで主観的な表現の検索でも良いので、検索してください。

例えば:

jqueryで滑らかなページ遷移
と検索すると

google2

約 8,990 件も出てきます。

その中から自分が実装したい物と同じような物を探して、記事どうりに行えばイメージしたとおりのフェクトがサイトに実装できます。


3,自分でjQueryをカスタマイズする方法を学ぶ


1,コピペではなく自分でコードを書く

前述した【2,簡単に実装させたい】のように、しっかり覚えなくても実装はできますが、制作するサイトに「オリジナリティ」を少しでも表現したい場合はやはり、自分の想像通りのエフェクトを制作しなければなりません。

「よし、しっかりと頑張ろう!!!!」と思った人にオススメのサイトを紹介します。

progate

サイト名:Progate

内容:WEBの知識を効率よく学習できます。
【HTML&CSS】・【JavaScript】・【jQuery】・【Ruby】・【Ruby on Rails】・【PHP】・【Java】・【Pyton】・【Swift】

上記の内容のカリキュラムが初心者向けで設定されており、プログラムなど構築しながら勉強できるので、非常にわかりやすく技術も身につきます。



まとめ

この仕事をしていて、自分で技術力が上がったと感じるときは、

「問題が発生した時に、自分自信で調べて解決できた時こそ技術が身につく」

と自分は感じており、【Progate】はその観点で技術が身につくのも早いのと思い紹介いたしました。

もちろん色々紹介されているプラグインはレスポンシブなどの観点でも優秀ですので、プラグインと併用しながら自分なりのカスタマイズを行っていくとより良いものができると思います。

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ