コンテンツ
- 01.セットアップする
- 02.HTMLを完成させる
- 03.Sass変数を調べる
- 04.ボディスタイリングを調整する
- 05.セクションタイトルのスタイルを設定する
- 06.CTAを目立たせる
- 07.コンテナの背景と画面を設定します
- 08.背景画像を追加する
- 09.トランジションとホバー効果を追加します
- 10.JavaScriptに移行します
- 11.クラスを追加および削除します
- 12.応答性を高める
ランディングページは、Webサイトのレイアウトにおける重要な要素です。それはあなたがあなたのビジネス、またはあなたが売る製品を紹介しなければならない最初の本当の機会なので、そのデザインが鍵となります。ランディングページは、召喚状（CTA）と呼ばれる単一の焦点を絞った目的で設計されています。行動の呼びかけとユーザーエクスペリエンスを補完するために色と画像を使用することは必須です。
- このチュートリアルについては、動作するCodePenを参照してください
このチュートリアルでは、架空のファッションブランドの魅力的なランディングページを作成する方法について説明します。これは、ホバー時に発生する大きな画像とアニメーション化されたトランジションを備えた分割画面デザインを中心に行われます。このページには2つの明確な召喚ボタンがあり、HTML、スタイリングにSass、ES6構文を使用するバニラJavaScriptを使用します（WebホスティングがWebサイトのニーズに適していることを確認してください）。複雑すぎますか？コードを必要とせずにウェブサイトを作成し、簡単なウェブサイトビルダーを試してみてください。
01.セットアップする
CodePenを使用している場合は、ペン設定でCSSが「SCSS」に設定されていることを確認してください。この変更を行うには、[設定]タブをクリックし、[CSS]を選択して、ドロップダウンオプションでCSSプリプロセッサをSCSSに変更します。
次に、HTMLの追加を開始できます。コンテナクラス内で「左」と呼ばれるセクションと「右」と呼ばれるセクションをラップし、両方のセクションに「画面」のクラスを指定します。
div>セクション> /セクション>セクション> /セクション> / div>
02.HTMLを完成させる
HTMLを完成させるために、を使用して各セクションのタイトルを追加します。 h1 鬼ごっこ。その下にボタンを追加する必要があります。これが実際のプロジェクトである場合は、別のページにリンクします。これにクラスを与えます ボタン 物事を素晴らしくシンプルに保つために。
div>セクション> h1>メンズファッション/ h1>ボタン> ahref = "＃">詳細/ a> /ボタン> /セクション>セクション> h1>レディースファッション/ h1>ボタン> a href = "＃">学ぶ詳細/ a> /ボタン> /セクション>
03.Sass変数を調べる
Sassについて私たち全員が気に入っていることの1つは、変数の使用です。ネイティブCSS変数のサポートが増えていますが、Sassを使用して安全を確保します。これらを一番上に置きます .scss、そしてあなたはあなたが望むどんな色でも選ぶことができますが、 rgba 値は私たちにより多くの柔軟性を与えます。
/ * *変数 * * / $ container-BgColor：＃444; $ left-bgColor：rgba（136、226、247、0.7）; $ left-button-hover：rgba（94、226、247、0.7）; $ right-bgColor：rgba（227、140、219、0.8）; $ right-button-hover：rgba（255、140、219、0.7）; $ hover-width：75％; $ small-width：25％; $ animateSpeed：1000ms;
04.ボディスタイリングを調整する
まず、本文のデフォルトのパディングとマージンをすべてクリアしてから、フォントファミリをOpenSansに設定します。これはボタンにのみ影響するため、使用するフォントはそれほど重要ではありません。次に、幅と高さをに設定します 100% X軸にオーバーフローしたものがすべて非表示になっていることを確認してください。
html、body {padding：0;マージン：0; font-family：「OpenSans」、sans-serif;幅：100％;高さ：100％;オーバーフロー-x：非表示; }
05.セクションタイトルのスタイルを設定する
セクションタイトルにGoogleフォントを選択するときが来ました– PlayfairDisplayを選択しました。次に使用する translateX セクションのタイトルが常にX軸の中央に配置されるようにすることができます。
h1 {フォントサイズ：5rem;色：#fff;位置：絶対;左：50％;トップ：20％;変換：translateX（-50％）;空白：nowrap; font-family：「PlayfairDisplay」、セリフ; }
06.CTAを目立たせる
ボタンは行動を促すフレーズとして機能するため、ボタンは大きく、太字で、クリックしやすい場所に配置する必要があります。両方のボタンには白い境界線と興味深いトランジション効果があります。両方のボタンのデフォルトのスタイルは同じですが、ホバーすると色が変わります。
.button {表示：ブロック;位置：絶対;左：50％;上：50％;高さ：2.6rem;パディングトップ：1.2rem;幅：15レム; text-align：center;色：白;ボーダー：3px実線#fff; border-radius：4px;フォントの太さ：600; text-transform：大文字;テキスト装飾：なし;変換：translateX（-50％）;遷移：すべての.2;
メインボタンにはシンプルなホバー効果があり、色に指定したSass変数を使用します。これは、ページの背景に似た色になります。
.screen.left .button：hover {background-color：$ left-button-hover; border-color：$ left-button-hover; } .screen.right .button：hover {background-color：$ right-button-hover; border-color：$ right-button-hover;
07.コンテナの背景と画面を設定します
コンテナクラスはページラッパーとして機能し、画面を絶対位置に配置したいという理由だけで、これの位置を相対位置に設定します。コンテナにデフォルトの背景色を指定しますが、両方の画面の背景に異なる色を設定するため、もちろんこれは表示されません。
.container {位置：相対;幅：100％;高さ：100％;背景：$ container-BgColor; .screen {位置：絶対;幅：50％;高さ：100％;オーバーフロー：非表示; }}
08.背景画像を追加する
左右両方のセクションに画像が表示され、Unsplash、Pixabay、Pexels（このチュートリアルで使用）などのWebサイトからロイヤリティフリーのストック画像を見つけることができます。作業を簡単にするために、CSSでリンクできるimgbbという無料の画像ホスティングおよび共有サービスを使用しました。
.screen.left {左：0;背景：url（ ’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’）センターセンター繰り返しなし;背景サイズ：カバー; ＆：before {position：absolute;コンテンツ： "";幅：100％;高さ：100％;背景：$ left-bgColor; }}
ページの右側にもimgbbを使用した背景画像が表示され、背景色をピンクに設定します。ここでも、背景サイズをに設定します カバー。これにより、含まれている要素全体をカバーできるようになります。この場合は、 。画面 クラス。
.screen.right {right：0;背景：url（ ’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’）センターセンター繰り返しなし;背景サイズ：カバー; ＆：before {position：absolute;コンテンツ： "";幅：100％;高さ：100％;背景：$ right-bgColor; }}
09.トランジションとホバー効果を追加します
両方の画面でのホバー効果のアニメーション速度は、変数の値を保持するトランジションによって制御されます $ animateSpeed、これは1000ms（1秒）です。次に、アニメーションにいくらかのイージングを与えることで終了します。これは、スムーズなアニメーションを提供するのに役立つインとアウトの容易さです。
.screen.left、.screen.right、.screen.right：before、.screen.left：before {transition：$ animateSpeedすべてのイーズインアウト; }
ここで実行したいのは、左側の画面にカーソルを合わせると、JavaScriptを使用してそのセクションにクラスが追加されることです（これについては後の手順で記述します）。このクラスが追加されると、その画面は指定した変数の幅（75％）に拡大され、右側が小さい方の幅の変数（25％）に設定されます。
.hover-left .left {width：$ hover-width; } .hover-left .right {width：$ small-width; } .hover-left .right：before {z-index：2; }
これは左側とまったく同じように機能し、JavaScriptを使用してマウスホバーで新しいクラスが追加され、それに応じて右側の画面が拡大します。また、 z-index に設定されています 2 そのため、CTAボタンがより目立つようになります。
.hover-right .right {width：$ hover-width; } .hover-right .left {width：$ small-width; } .hover-right .left：before {z-index：2; }
10.JavaScriptに移行します
CSSクラスの追加と削除に役立つバニラJavaScriptを少し使用し、ES6の新機能のいくつかも使用します。最初に行う必要があるのは、いくつかの定数変数を宣言することです。
使用するので 資料 複数回、と呼ばれる定数変数を設定します doc その中にドキュメントを保存して、「ドキュメント」という言葉を簡潔に保つことができるようにします。
const doc = document;
次に、を格納するさらに3つの定数を設定する必要があります。 。正しい, 。左 そして 。コンテナ セレクター。定数を使用する理由は、これらの値を変更したくないことがわかっているため、定数を使用することは理にかなっています。これらが設定されたので、先に進んでいくつかのマウスイベントを追加できます。
const right = doc.querySelector（ "。right"）; const left = doc.querySelector（ "。left"）; const container = doc.querySelector（ "。container"）;
を使用して 左 前のステップで宣言した定数変数に、イベントリスナーを追加できるようになりました。このイベントは mouseenter イベントであり、コールバック関数を使用する代わりに、と呼ばれる別のES6機能を使用します 矢印関数 ’（（）=>）.
//ホバーのコンテナ要素にクラスを追加しますleft.addEventListener（ "mouseenter"、（）=> {container.classList.add（ "hover-left"）;}）;
11.クラスを追加および削除します
最後のステップで、イベントリスナーは mouseenter メインコンテナクラスを対象とし、という新しいクラスを追加するイベント ホバー左 左側のセクション要素に。これが追加されたので、ホバーしたときに削除する必要があります。これを行うには、 マウスリーブ イベントと 。削除する（） 方法。
//ホバーで追加されたクラスを削除しますleft.addEventListener（ "mouseleave"、（）=> {container.classList.remove（ "hover-left"）;}）;
これまで、左側の画面ですべてを実行してきました。次に、JavaScriptを終了し、右側のセクション要素でクラスを追加および削除します。ここでも、矢印関数の構文を使用して、すべてをきれいに見せています。
right.addEventListener（ "mouseenter"、（）=> {container.classList.add（ "hover-right"）;}）; right.addEventListener（ "mouseleave"、（）=> {container.classList.remove（ "hover-right"）;}）;
12.応答性を高める
どんなに大きくても小さくても、プロジェクトは応答性を持たないようにする必要があります。したがって、このステップでは、CSSにいくつかのメディアクエリを追加し、この小さなプロジェクトを可能な限りモバイルデバイスに適応できるようにします。これがどのように機能するかを確認するには、元のCodePenをチェックする価値があります。
@media（max-width：800px）{h1 {font-size：2rem; } .button {幅：12rem; }
ページの幅が800ピクセルに下がると、フォントとボタンのサイズが小さくなるようにしました。したがって、最後に、高さもターゲットにして、ページの高さが700pxを下回ったときにボタンがページの下に移動することを確認します。
@media（max-height：700px）{。button {top：70％; }}
あなたのページを保存したいですか？それらをPDFとしてエクスポートし、安全なクラウドストレージに保存します。
Webデザインイベント ロンドンを生成する 2018年9月19〜21日に戻ってきて、業界をリードする講演者の満載のスケジュール、1日のワークショップ、貴重なネットワーキングの機会を提供します。お見逃しなく。 今すぐGenerateチケットを入手してください.
この記事はもともとネットマガジンに掲載されました 305号. 今すぐ購読.
