こんにちは、ガタガタです。
HTML/CSS学習初心者のよくある悩みとして、以下が挙げられると思います。
HTML/CSSはなんとなく書けるようになったけど、ハンバーガーメニューとか、画像スライダーとか、メールフォームを作る方法がわからない……。Javascriptとか勉強しなきゃいけないのかな?でももうぶっちゃけキャパオーバーだよ……。
私もこのことでずいぶんと悩まされました。いざコーディングを始めてみると、特にJavascriptが書けないと不便な場面はそこそこあります。
とはいえ、HTMLも覚えたばかりなのに、いきなり次の言語を学習するのはハードル高いですよね。
結論から言いますと、焦って学習し始めるは必要はありません。というのも、よくサイトに使われるアニメーションやスクリプトは、先人たちが既に簡単にサイトに導入できるライブラリーなどを作り、配布している場合が多いからです。
そのほとんどが無料で利用できる上に、商用利用可能(つまり、お金をもらって制作している納品物に使用しても良い)だったりします。これを使わない手は無いですよね。
以下、私もよくお世話になっているものをいくつか紹介します。いずれも既成のCSS・JSファイル等を読み込んで、HTMLをちょちょっと書くだけで実装できます。ぜひ一度触ってみて、制作物の幅を広げてください!
超高機能なJavascript画像スライダー「Swiper」
Swiper – The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
CSS・JSを読み込んだらHTMLをコピペするだけで導入できる、超高機能・レスポンシブ対応のスライダーです。
私はぶっちゃけ「スライダーを設置してください」と言う要望にはほぼ全てこれで対応しています。
Swiperのすばらしいところは、設置の簡単さと、見た目がシンプルなためにどんなサイトに組み込んでも違和感がなくなじむところです。
そして特筆すべきは何といってもその自由度・拡張性です。
- 自動スライドのオン・オフ
- 自動スライドの間隔の設定
- ループのオン・オフ
- ページネーション使用の有無
- 縦にスワイプするか、横にスワイプするか
- etc……
そのほか、縦書き漫画などにも対応できる逆向き(右から左へ)のスライダー再生なども設定できます。いずれの設定方法も超簡単です。
詳しい使い方は、以下が参考になります。
「Swiper」の使い方とオプションを使ってカスタマイズする方法 | マインドステージ
「Swiper」はjQueyを使わずに、スライダーを実装することが可能となります。さらに、オプションによるカスタマイズ方法をご紹介していきます。
ハンバーガーメニューを作るなら「pushy」
カンタンにハンバーガーメニューを設置することができるスクリプトです。メニューのデザインに特にこだわらなくてもいい場合は、これを使ってさくっと導入してしまうのが良いでしょう。
設置にはjQueryが必要です。詳しい導入・カスタマイズ方法は以下の記事が詳しいです。
【jQuery】超便利なドロワー風ナビゲーションメニューの紹介【簡単】
jQueryでイケてるドロワーメニュー(ナビゲーション)を実装したい方向け。本記事では、jQueryで超便利なドロワー風ナビゲーションメニューの『Pushy』をご紹介します。
画像ギャラリーを作るならLightbox2
Lightbox
Lightbox is a script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
サムネイル画像をクリックすると、フルサイズの画像がその場でふわっと浮かび上がるギャラリースクリプトです。詳しい挙動は公式サイトのデモを確認してください。
こんなプロっぽいアニメーションをカンタンに設置できるなんて、素晴らしいですね。設置方法は以下です。
画像拡大スクリプトLightbox2の簡単な設置方法&使い方
画像クリックで拡大画像を表示できるレスポンシブ対応の代表的スクリプトLightbox2の使い方とカスタマイズ方法を1ページで解説。表示サンプルと共にオプションの書き方も紹介。Lightbox2はjQueryと共にCDN経由で読み込めば、自サイトに何も設置することなく簡単に使用可能。PCでもスマホでも動きます。
高機能メールフォーム「MailForm01」
PHPメールフォーム多機能版 フリー(無料)|PHP工房
PHPで作られたフリーのメールフォーム多機能版です。差出人名、Bcc(複数アドレス設定可)メールフッタ、確認画面、必須設定、メールアドレスの形式チェックなど様々な設定が可能です。メールフォームに必要な一般的な機能はすべて付いています。
お客様のサイトにメールフォームを設定するならこれ一択です。PHPで作られているのですが、設定方法は指定の箇所に送り先アドレス、設置するドメイン等の設定を書き込むだけで、プログラム部分をいじる必要はほとんどありません。
ただメールを送信するだけでなく、以下のような機能もつけられます。
- 送信内容確認画面を表示する
- 自動返信メールの設定
- スパム防止機能
- お礼ページへの遷移設定
また、有料版ではファイル添付や禁止IPなどの設定をつけることもできます。とはいえ、ほとんどの案件では無料版で事足りそうです。
もちろん、CSSが書ければメールフォームのデザインも自由自在。開発者が日本人なので、日本語のサポートが充実しているところも◎ですね。
自分で学習するのは、ある程度JS・PHPの扱いに慣れた後でいい!
Web制作に限らず初心者のうちは、いきなりスキルをあれこれ取得しようとするのではなく、とにかく場数を踏んでひとつずつ確実に自分のものにして行くのが大切です。
javascriptやPHPの知識の必要性を感じて焦る気持ちは分かりますが、あまり焦ってあれこれ手を出して、パンクして辞めてしまうのでは意味がありませんよね。
プログラミングの先輩たちが作ってくれた制作物を触っているうちに、javascriptやPHP等の未知の言語への抵抗感は、少しずつ薄れてくると思います。これらの言語を本格的に学習するのは、あるていど既成のプログラムを触り慣れてからでも充分です。
- とにかく、複雑なプログラムを素早くサイトに導入できる
- たくさん使われているプログラムなので、バグや不具合の心配が少ない
- javascriptやPHPなどのプログラムに触れることで、これらの言語への抵抗感を取り払うことができる
- javascriptやPHPなどの言語を使うとどういうことができるのか、なんとなくイメージできるようになる
こういったプログラムに触り慣れて、「自分で作ってみたい」と思うようになったら習得にチャレンジするのが、一番良いのではないかと思います。
少しずつステップアップできるよう、頑張ってみてください!
【web制作を】模写コーディングができるようになったら、次にすべきこと【仕事にする】
html/css勉強の仕上げとして模写コーディングを行う人は多いですが、その次に何をするか考えていますか?この記事では、模写コーディングができるようになったらやっておくといいことを挙げます。この中から2つくらいは実践しておくと、各段に実力がアップするはずです。興味のあることを選んで、やってみてください。
この記事は役に立ちましたか?
もし参考になりましたら、下記のボタンで教えてください。