初心者HTMLコーダーは無理にJavascript・PHPを学習しなくてOK！既成プログラムを上手に活用しよう

こんにちは、ガタガタです。

HTML/CSS学習初心者のよくある悩みとして、以下が挙げられると思います。

私もこのことでずいぶんと悩まされました。いざコーディングを始めてみると、特にJavascriptが書けないと不便な場面はそこそこあります。

とはいえ、HTMLも覚えたばかりなのに、いきなり次の言語を学習するのはハードル高いですよね。

結論から言いますと、焦って学習し始めるは必要はありません。というのも、よくサイトに使われるアニメーションやスクリプトは、先人たちが既に簡単にサイトに導入できるライブラリーなどを作り、配布している場合が多いからです。

そのほとんどが無料で利用できる上に、商用利用可能（つまり、お金をもらって制作している納品物に使用しても良い）だったりします。これを使わない手は無いですよね。

以下、私もよくお世話になっているものをいくつか紹介します。いずれも既成のCSS・JSファイル等を読み込んで、HTMLをちょちょっと書くだけで実装できます。ぜひ一度触ってみて、制作物の幅を広げてください！

超高機能なJavascript画像スライダー「Swiper」

CSS・JSを読み込んだらHTMLをコピペするだけで導入できる、超高機能・レスポンシブ対応のスライダーです。

私はぶっちゃけ「スライダーを設置してください」と言う要望にはほぼ全てこれで対応しています。

Swiperのすばらしいところは、設置の簡単さと、見た目がシンプルなためにどんなサイトに組み込んでも違和感がなくなじむところです。

そして特筆すべきは何といってもその自由度・拡張性です。

• 自動スライドのオン・オフ
• 自動スライドの間隔の設定
• ループのオン・オフ
• ページネーション使用の有無
• 縦にスワイプするか、横にスワイプするか
• etc……

そのほか、縦書き漫画などにも対応できる逆向き（右から左へ）のスライダー再生なども設定できます。いずれの設定方法も超簡単です。

詳しい使い方は、以下が参考になります。

ハンバーガーメニューを作るなら「pushy」

pushy公式サイト

カンタンにハンバーガーメニューを設置することができるスクリプトです。メニューのデザインに特にこだわらなくてもいい場合は、これを使ってさくっと導入してしまうのが良いでしょう。

設置にはjQueryが必要です。詳しい導入・カスタマイズ方法は以下の記事が詳しいです。

画像ギャラリーを作るならLightbox2

サムネイル画像をクリックすると、フルサイズの画像がその場でふわっと浮かび上がるギャラリースクリプトです。詳しい挙動は公式サイトのデモを確認してください。

こんなプロっぽいアニメーションをカンタンに設置できるなんて、素晴らしいですね。設置方法は以下です。

高機能メールフォーム「MailForm01」

お客様のサイトにメールフォームを設定するならこれ一択です。PHPで作られているのですが、設定方法は指定の箇所に送り先アドレス、設置するドメイン等の設定を書き込むだけで、プログラム部分をいじる必要はほとんどありません。

ただメールを送信するだけでなく、以下のような機能もつけられます。

• 送信内容確認画面を表示する
• 自動返信メールの設定
• スパム防止機能
• お礼ページへの遷移設定

また、有料版ではファイル添付や禁止IPなどの設定をつけることもできます。とはいえ、ほとんどの案件では無料版で事足りそうです。

もちろん、CSSが書ければメールフォームのデザインも自由自在。開発者が日本人なので、日本語のサポートが充実しているところも◎ですね。

自分で学習するのは、ある程度JS・PHPの扱いに慣れた後でいい！

Web制作に限らず初心者のうちは、いきなりスキルをあれこれ取得しようとするのではなく、とにかく場数を踏んでひとつずつ確実に自分のものにして行くのが大切です。

javascriptやPHPの知識の必要性を感じて焦る気持ちは分かりますが、あまり焦ってあれこれ手を出して、パンクして辞めてしまうのでは意味がありませんよね。

プログラミングの先輩たちが作ってくれた制作物を触っているうちに、javascriptやPHP等の未知の言語への抵抗感は、少しずつ薄れてくると思います。これらの言語を本格的に学習するのは、あるていど既成のプログラムを触り慣れてからでも充分です。

こういったプログラムに触り慣れて、「自分で作ってみたい」と思うようになったら習得にチャレンジするのが、一番良いのではないかと思います。

少しずつステップアップできるよう、頑張ってみてください！

こちらもおすすめ