webcordingカテゴリーの共通アイキャッチ画像

Part4 1カラムページを作ってみよう

レスポンシブのランディングページを作成

ページレイアウト制作実習

  • HTML、CSSを使用したコーディング基本技能

テキスト140P~207P

ランディングページ(LP)とは

テキストP143

1枚のページで構成されるWebサイトをペライチランディングページと言います。

  • Web業界における「ペライチ」という言葉は、1枚のページのみで構成されたWebサイトを指す俗称として使われます。
  • ランディングページ(Landing Page)は直訳すると訪問者が初めに着地(landing)するページのことです。 広義の意味では、リンクやWeb広告、検索エンジンなどから流入してきたユーザーが最初に閲覧するWebページ全般を意味します。
  • 狭義のランディングページは、自社の商品やサービスに関する情報をまとめた単体のページを指し、Webマーケティングの場面でよく使われます。企業のWebサイトとは別に作られ、申し込みや商品購入などのコンバージョンを目的として、ユーザーに行動を促す設計で作られます。

ランディングページの特徴

  • 縦に長いデザインであることが多い
  • ユーザーの印象に残るような派手なデザインであることが多い
  • 写真やイラストなどビジュアルを効果的に使用していることが多い
  • 一ページに伝えたい情報やメッセージを集約している

ランディングページの主な目的

  • 商品やサービスの宣伝:新製品などを広く告知するキャンペーン
  • 商品やサービスの販売:商品やサービスの特徴やメリットを訴求し、購入や申し込みを促す
  • 資料請求:資料ダウンロードを促す
  • 会員登録:メルマガ登録や会員登録を促す
  • イベント参加:セミナーや説明会などのイベント参加を促す

参考URL:LP(ランディングページ)とは?ホームページとの違いを解説!

デザインカンプを見ながらHTMLコーディング

header テキスト145p

<!--header-->
    <header>
      <div class="innerWrap">
        <見出し1>
          <画像  代替えテキスト:Welcome to Our Wedding Party></見出し>
        <ナビゲーション>
          <番号なしリスト class="ffJosefin">
            <リスト項目><リンク href="#ページ内リンク">Message</リンク></リスト項目>
            <リスト項目><リンク href="#ページ内リンク">Date</リンク></リスト項目>
            <リスト項目><リンク href="#ページ内リンク">Form</リンク></liリスト項目
        </ナビゲーション>
        <段落 class="scroll ffJosefin">Scroll<改行><画像 ></段落>
      </div>
    </header>
<!--header-->

main領域Messageエリア

<!--main -->
    <main>

<!--msgArea-->
      <section class="msgSec" id="msgArea">
        <div class="innerWrap">
          <見出し2 class="ffJosefin">Message</見出し2>
          <段落>
            この度、カピぞうとカピ子は<br>
            ウェディングパーティーを開催することとなりました。<改行>
          </段落>
          <段落>
            お忙しいとは思いますが、ご参加いただけたら嬉しいです。<改行>
            ご出欠のお知らせは、ページ下のフォームよりお願い申し上げます。<改行>
          </段落>
          <段落 class="illust"><画像  代替えテキスト;カピぞうとカピ子></段落>
        </div>
      </section>
<!--msgArea-->

main領域Dateエリア

<!--dateArea-->
      <section class="dateSec" id="dateArea">
        <div class="innerWrap">
          <見出し2 class="ffJosefin">Save the Date</見出し2>
          <div class="layoutWrap">
            <段落><画像 ></段落>
            <div>
              <段落 class="dateDetailSec">
                3022.8.8 <span class="word1">Thu</span><br>
                <span class="word2">Start</span> <span class="word3">18:30-</span>
              </段落>
         <!--accessSec-->
              <section class="accessSec">
                <見出し3 class="ffJosefin">Access</見出し3>
                <段落>
                  レンガ街ストリート1-2-3<br>
                  Ristorante Capita にて<br>
                  03-XXXX-XXXX<br>
                </段落>
              </section>
          <!--accessSec-->
            </div>
          </div>
        </div>
      </section>
<!--dateArea-->

main領域formエリア テキスト147p

<!--formArea--> 
      <section class="formSec" id="formArea">
        <div class="innerWrap">
          <見出し2 class="ffJosefin">RSVP</見出し2>
          <フォーム action="" method="">
            <段落 class="attendRadio">
              <label><input type="radio" name="attend" value="ご出席" checked="checked">ご出席</label>
              <label><input type="radio" name="attend" value="ご欠席">ご欠席</label>
            </段落>
            <段落>
              お名前<input type="text" name="user_name">
            </段落>
            <段落>
              メールアドレス<input type="email" name="user_mail">
            </段落>
            <段落>
              ご自身のタイプ
              <select name="user_type">
                <option value="草食動物">草食動物</option>
                <option value="肉食動物">肉食動物</option>
                <option value="人間さん">人間さん</option>
              </select>
            </段落>
            <段落 class="allergyCheck">
              アレルギーのある食べ物<br>
              <label><input type="checkbox" name="allergy" value="卵">卵</label>
              <label><input type="checkbox" name="allergy" value="乳">乳</label>
              <label><input type="checkbox" name="allergy" value="小麦">小麦</label>
              <label><input type="checkbox" name="allergy" value="大豆">大豆</label>
            </段落>
            <段落>
              メッセージ
              <textarea name="message"></textarea>
            </段落>
            <段落 class="submitBtn">
              <input type="submit" value="Send" class="ffJosefin">
            </段落>
          </フォーム>
        </div>
      </section>
<!--formArea-->
    </main>
<!--main -->

footer領域

<!--footer-->
    <footer class="ffJosefin">
      <段落><small>© Capyzou & Capyco</small></段落>
    </footer>
<!--footer-->
  • <small> は HTML の要素で、著作権表示や法的表記のような、注釈や小さく表示される文をマークアップします
  • HTMLマークアップはHTMLタグを使ってWebサイトを構築する作業のことをいいます。HTMLタグには全て「正しい使い方」や「意味」が存在し、それらを理解していないとSEO対策において低く評価されてしまう可能性があります。
  • SEOとは、検索エンジン最適化(Search Engine Optimization)の頭文字を取った略称です

webフォントの使い方

テキスト P156

※Google Fontsがupdateされたため、テキストの手順とは若干異なっています。 

  • Google fontsやGoogleフォントで検索
  • 日本語フォントを選ぶ際にはLanguageをjapaneseに設定
  • Google fontsページ上部の検索窓で使用したいフォントを検索
  • フォントを選択して個別ページを開き、【Getfont】をクリック
  • 【Get embed code】 をクリック
  • 上段をコピーしてhtmlファイルのhead内にペースト
  • 下段をコピーしてstyle.cssにペースト

注意!webフォント(特に日本語フォント)を多数使用するとページが重くなってしまうので、日本語フォントは1つだけに絞りましょう。

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Wedding Party Invitation</title>
  </head>
body {
  font-family: 'Sawarabi Mincho',serif;
  font-size: 18px;
  color: #121212;
}
.ffJosefin {
  font-family: 'Josefin Sans',sans-serif;
}

webフォントとは

ウェブで使用するためのフォント。通常はコンピュータにインストールされているフォントを使用しますが、Webフォントはインターネットを通じて読み込まれ、ブラウザ上で表示されます。

  1. スタイルの多様性: Webフォントを使うことで、さまざまなデザインやスタイルのフォントを簡単に取り入れることができます。
  2. 互換性: Webフォントは、異なるデバイスやブラウザでも同じように表示されるため、見た目を統一できます。
  3. SEO(検索エンジン最適化): 画像を使わずテキストデータとして利用できるため、画像化した場合と比較して、SEO(検索エンジン最適化)の観点から有利となる。

PCレイアウトのCSS

テキスト 159p~

@charset "UTF-8";
/* CSS Document */
/*========
common
=============*/
*{outline: auto #AEF3FF;}
html {
	scroll-behavior: smooth;
}
.innerWrap { /*border: 4px solid lightblue;*/
	margin: 0 auto;
	padding: 80px 20px 0;
    width: 100%;       /*テキストはwidth:1240px;になっていますが、width:100%;とmax-width:1240px;でレスポンシブ対応に変更しています*/
	max-width: 1240px;
}
header nav ul {
  display: flex;
  justify-content: space-around;
  width: 100%;       /*テキストはwidth:1240px;になっていますが、width:100%;とmax-width:1240px;でレスポンシブ対応に変更しています*/
 max-width: 1240px;
  margin: 0 auto;
  padding: 10px 20px;
}
form {
  width: 100%;       /*テキストはwidth:600px;になっていますが、width:100%;とmax-width:600px;でレスポンシブ対応に変更しています*/
 max-width: 600px;
  margin: 0 auto;
}

擬似要素

テキスト 174p、184p

HTMLの要素に、あたかも新しい要素が追加されたかのように、CSSでスタイルを適用できる機能です。 例えば、段落の最初の文字だけを大きくしたり、リストの項目の前にマークをつけたりすることができます。

HTMLの要素を追加せずに、CSSだけでデザインを細かく調整できるのが大きな特徴です。

  • :before – 要素の前にコンテンツを追加。
  • :after – 要素の後にコンテンツを追加。
  • :first-line – 要素の最初の行にスタイルを適用。
  • :first-letter – 要素の最初の文字にスタイルを適用。

CSSアニメーション

テキスト P186

CSSアニメーションは、ウェブページの要素に動きをつけるための技術です。これを使うと、ボタンが押されたときに色が変わったり、画像がふわっと表示されたりするような効果を簡単に作ることができます。

主なポイント

  • 動きを設定できる: どのように動くかを指定することができ、例えば「上に移動する」「色が変わる」などを設定できます。
  • 簡単に使える: CSSのコードを少し追加するだけで、アニメーションを実現できます

例えば、ボタンにマウスをのせると色が変わるアニメーションや、テキストがスライドして表示されるアニメーションなどがあります。

例:https://codepen.io/admin-the-sasster/pen/yLWXoqq

レスポンシブ対応のCSS

テキスト 192p

レスポンシブウェブとは

スマートフォン、タブレット、パソコンなど、様々なデバイスの画面サイズに合わせて自動的にレイアウトを調整する手法です。

近年、スマートフォン利用者が増加し、様々なデバイスでサイト閲覧が当たり前になったため、現在はレスポンシブウェブデザインやレスポンシブコーディングの技術は必須スキルと言えます。

PAGE TOP