はてなブックマーク

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

例外でPowerPointも1回だけありましたが、基本的には上記4種類のどれかになると思います。 どのデザインデータで来るかはコーダー側で指定はせず、基本的にデザイナーさん次第です。 そしてお付き合いするデザイナーさんが決まっている場合は、全然使わない物も出てきます。 私も半年くらいIllustratorのカンプが続いていたのですが、ここ半年は全てXDとFigmaなのでIllustratorは一旦解約しようと思いました。 そこで今回は、解約の際にかかる途中解約手数料を無料で回避する方法をご紹介していきます。 ただし今回ご紹介する方法は2021年11月29日現在の情報となり、今後仕様が変わらないとは言い切れませんので、作業に関しては自己責任でお願いします（2024年7月23日にこの記事通りに出来たという報告は受けています） こちらが最新ツイートです👇 ぬあああああ Adobeの無料体験期間

お問い合せ用プラグイン『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の基本的な使い方については以下の記事を参照下さい。

画像にカーソルを乗せて拡大させるのは、実務でも非常に良くある実装です。 そして画像を表示させるには、HTMLの『imgタグ』と、CSSのプロパティ『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制作のみで生活出来るようになりました。 しかし、そのときを思い出すと、