はてなブックマーク

セクション間の区切りが曲線になってるデザインはたまにありますが、意外とどうやっていいか分からない人も多いと思います。 今回はCSSでセクション間の区切りを曲線にする方法をサンプルを元に解説していきます。

お問い合せ用プラグイン『Contact Form 7』を使った時に、入れた記憶のない『pタグ』や『brタグ』が入っている事があります。 これは『Contact Form 7』が勝手に入れているので、これを削除する方法を2つご紹介します。

中央に1枚表示されていて、左右に少し見えているスライダーは比較的良くあるタイプかと思います。 今回はslickでオプションの『centerMode』を使って実装する方法を解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

今回はそんな疑問にお答えします。 スライダーを簡単に実装できるプラグインとして有名なslickですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

以前『wow.jsの使い方』で同じような物をご紹介しましたが、実務でよく使うのは圧倒的に『inview.js』の方になります。 正確に言えばフェードインだけではなく、スクロールして表示領域に入ったらclassを付与して色んなイベントを発生させることが出来ます。 今回は画像とサンプルを使って『inview.js』の使い方を解説していきます。 また、GSAPを使えばCSSを編集せずに実装できるので、GSAPを使う方法もおすすめです。

という感じで各種数値などを取得してコーディングしていきます。 要するにコーディングの設計図みたいなものですね。 そしてデザインカンプは主に4種類あります。

お問い合わせフォームの定番プラグインといえばContact Form 7ですが、送信前の確認画面はデフォルトの機能だけでは出せません。 実務ではよくありそうですが、実は滅多に実装することはありません（個人的に） 個人的には確認ボタンを送信ボタンだと思って確認ボタンをクリックして終了・・・という機会損失を避ける為にも不要だと思っていて、それを提案すると確認ボタンは無くなる事もありますが、それでも欲しいと言われる場合もあるのでそういった場合に使います。 また、確認画面で送信ボタンをクリックしたらサンクスページに飛ばす事も多いので、それについても解説していきます。 Contact Form 7の基本的な使い方については以下の記事を参照下さい。

画像にカーソルを乗せて拡大させるのは、実務でも非常に良くある実装です。 そして、画像を表示させるには『imgタグ』と『background-image』の2種類の方法があります。 今回は、両方のケースで画像を拡大する方法を解説していきますが、どちらもCSSのみで実装できます。、

slickには様々なオプションがありますが、ズームさせるオプションはありません。 しかし、CSSアニメーションを使えば可能です。 今回はslickを使ってズームしながらフェードで切り替わるスライダーをご紹介します。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

通常横スクロールなどはドラッグでは動かすことは出来ませんが、jQueryを使えば出来るようになります。 今回はその方法をご紹介します。

Contact Form 7でサンクスページってどうやって作るの？あとフォームごとにサンクスページを分ける方法ってある？ お問い合わせフォームで送信された後に表示する『お問い合わせ頂きありがとうございました』というお礼のページを『サンクスページ』と呼びます。 WordPress制作では非常によくある実装ですが、Contact From 7にはサンクスページを作る機能はありません。 また1つのサイトにお問い合わせフォームが2つ以上ある場合、それぞれ別の目的で作られている事がありサンクスページもそれに合わせて変えたい場合があります。 今回はサンクスページの作り方と、複数のフォームを振り分ける方法について解説します。 サンクスページの前には当然お問い合わせフォームを作る必要があるので、お問い合わせフォームの作り方は以下の記事を参照下さい。

PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。 それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます（ブレイクポイントは複数指定できます） 今回はコピペ可能なコードとデモを使って解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

すごく地味な話ですが、セレクトボックスの矢印をデザイン通りにしようと思ったらデフォルトの矢印では駄目な場合があります。 これはCSSでカスタマイズすることが出来ます（画像にも出来ます） 今回はデフォルトの矢印を非表示にして、デザイン通りの矢印にする2つの方法についてコードとデモで解説していきます。

私は37歳になる手前からWeb制作の勉強を始め、現在ではWeb制作のみで生活出来るようになりました。 それまでの経緯については以下の記事に書いてあります。