【Vol.3】スマホ版オンラインセミナーLPをコーディングしてみよう!

こんにちは! 吉田です!

 

今日は一昨日から始まった

オンラインセミナーLPの

コーディングのラスト、

第3弾です!

 

 

今回のポイントになるのは、

セミナーLPを開催する

日程や時間を記載した

「日程表」の作り方です!

 

 

次の月以降も

繰り返し使えるように

html、cssでしっかり

組んでいきます!

 

 

htmlのtableという

表組みを作るためのhtmlを

使っていくのですが、

tableは独自に用意されているタグが多く、

html初心者や苦手意識のある方が

挫折しやすいポイントです。

 

 

実務で使いそうな

基本的なtable組みは

今回の動画ですべて

お伝えしていきますので

ぜひ最後までご覧ください。

 

 

 

 

――――――――――――――――

 

前回のVol.2はこちら

↓↓↓↓↓

 

 

前回のVol.1はこちら

↓↓↓↓↓

 

 

元になっているデザイン実演動画はこちら

↓↓

https://salesdesign-school.jp/blog/kiji/lp-sp-design-woman-vol1/

 

 

 

今回、実際にコーディングしたものはこちら。

↓↓

https://salesdesign-school.jp/sample/lp-sp-coding-woman/

(SP版になりますので、お手持ちのスマホからご覧ください。)

 

――――――――――――――――

 

 

今回お伝えしている

tableのコーティングは

基礎中の基礎の部分ですが、

ほとんどのテーブルで使われている技術を

ご紹介させていただきました!

 

 

現場での利用例だと、

セミナーLPでは今回の「日程表」として、

通常のLPでは「価格比較表」などで

使われることが多いです。

 

 

(余談ですが、

旧式のホームページの

グローバルメニューの表示も

tableで組んであったりしますね)

 

 

実のところ、

tableは奥が深く

コーディングに慣れていない方を

悩ませるようなよくわからないものが

いくつも出てきます。

 

 

レスポンシブ対応もするとなると

結構大変な労力になりますが、

何事も基本を押さえるところから

始めていきましょう!

 

 

 

最近のレスポンシブ対応のtableは

今回ご紹介したものよりも

もっともっと自由度が高く、

表現できる見せ方の幅も増えているので

デザインを作るときの参考に

ぜひ一度検索してみてくださいね。

 

 

 

「レスポンシブ テーブル css」

といったキーワードで検索すると、

色々見つかると思います!

 

 

 

ではでは今日はこの辺で!

 

 

いつも見てくださり

ありがとうございます!

 

 

 

よしだ

 

 

セールスデザイン講座では、YouTubeで無料のデザイン動画・ コーディング動画をいくつも公開しています!

これからもどんどんアップしていきますので見ていただけたら嬉しいです!

↓↓

https://qr.paps.jp/AR63t

 

簡単なイラストレーター・フォトショップの使い方動画から、

その場でデザインやコーディングをしていく実演動画など、

お役立ち間違いなしの動画がたくさんあります。

ぜひ活用してみてください。

 

 

↓感想・質問はこちら↓

https://salesdesign-lab.jp/p/r/oIA6aeRR

率直な感想や質問など大歓迎です! 励みになります!

投稿者プロフィール

上野 健二
上野 健二セールスデザイン講座 代表講師
中小・個人事業企業の業績アップをデザインでサポートする売れるLP制作所・株式会社ガツンで代表取締役を務める。
年間100本以上ランディングページを制作に携わる現役のセールスデザイナー兼ディレクター。
詳しいプロフィールはこちら