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

こんにちは！　吉田です！

今日は一昨日から始まった
オンラインセミナーLPの
コーディングのラスト、
第３弾です！

今回のポイントになるのは、
セミナーLPを開催する
日程や時間を記載した
「日程表」の作り方です！

次の月以降も
繰り返し使えるように
html、cssでしっかり
組んでいきます！

htmlのtableという
表組みを作るためのhtmlを
使っていくのですが、
tableは独自に用意されているタグが多く、
html初心者や苦手意識のある方が
挫折しやすいポイントです。

実務で使いそうな
基本的なtable組みは
今回の動画ですべて
お伝えしていきますので
ぜひ最後までご覧ください。

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

前回のVol.2はこちら
↓↓↓↓↓
https://youtu.be/2td8CWO5RI8

前回のVol.1はこちら
↓↓↓↓↓
https://youtu.be/GuMXYmFdMIE

元になっているデザイン実演動画はこちら
↓↓
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

簡単なイラストレーター・フォトショップの使い方動画から、
その場でデザインやコーディングをしていく実演動画など、
お役立ち間違いなしの動画がたくさんあります。
ぜひ活用してみてください。