2021年6月7日 記事

【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

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

 

今なら無料でデザインが学べます


 

デザイン未経験でも
フリーランス・副業で
しっかり稼ぎたい方

 

デザイン未経験でも
amazonカタログや楽天LPを
自分で作りたい方

 

講座をご検討の方へ


 

デザイン独学方・未経験から
在宅WEBデザイナーとして
収入の柱を作りたい方はこちら

 

自社デザインをご自身で作る起業家、
スタッフをデザイナーに
育成したい経営者の方はこちら

スキルアップコンテンツのご紹介

スキルアップコンテンツ
のご紹介

初心者のための無料のデザインコンテンツ集

初心者のための
無料のデザインコンテンツ集

デザインのまとめをご紹介

デザインの作り方をピンポイントで解消

お申込みをご検討される方へ

お申込みをご検討される方へ

説明会や個別相談で直接お伺いいただけます。

説明会や個別相談で
直接お伺いいただけます。