1. 冒頭
1.1. 講師紹介
1.1.1. クリエイティブディレクター・ななみん
1.1.2. セールスを飛躍させるための、デザイン(印刷物、web)・動画・広告運用を手掛けるクリエイティブエキスパート。 LINE運用代行からShopify構築までビジネスの成長をサポートするあらゆるクリエイティブニーズに応えます
1.2. 本日学べること
1.2.1. 💡 HTMLとCSSでできることが分かる
1.2.2. HTMLで動画埋め込み
1.2.3. 中見出しの装飾
1.2.4. 小見出しの装飾
1.2.5. ChatGPTを使ったカスタマイズ
2. L Messageの基本的な使い方
2.1. ログインページ
2.1.1. https://step.lme.jp/basic/overview
3. フォーム作成の使い方
3.1. フォーム作成の作成手順
3.1.1. 画面
3.1.1.1. Lステップでは、回答フォームと呼ばれています
3.1.2. 手順
3.1.2.1. 新規作成をクリック
3.1.2.1.1. フォーム作成画面
3.2. フォーム作成の編集手順
3.2.1. 編集できる箇所は3つ
3.2.2. 内容編集
3.2.2.1. 装飾パーツ
3.2.2.1.1. HTMLが使えるのは「テキスト」だけ
3.2.2.2. 質問事項
3.2.3. 詳細設定
3.2.3.1. ヘッダー画像の設定
3.2.3.2. カスタムCSSの設定
3.2.3.2.1. ここでcssを設定していく
3.2.4. 表示期限・カウントダウン
4. 実践ワークショップ
4.1. 完成ページはこちら
4.1.1. https://step.lme.jp/basic/form-answer/form-render/LW6u5d?mode=preview
4.2. HTMLで動画埋め込み
4.2.1. YouTube動画の埋め込み
4.2.1.1. YouTubeから動画リンクを取得
4.2.1.1.1. 共有をクリック
4.2.1.1.2. 埋め込むをクリック
4.2.1.1.3. ChatGPTを使って、コードを修正する
4.3. 中見出しの装飾
4.4. .btn-title { padding: 1rem 2rem; color: #fff; transform: skew(-15deg); background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%); width: 95%; }
4.5. 小見出しの装飾
4.5.1. .title { padding: 0.25em 0.5em;/*上下 左右の余白*/ color: #494949;/*文字色*/ background: transparent;/*背景透明に*/ border-left: solid 5px #7db4e6;/*左線*/ }
4.6. 背景色の変更
4.6.1. *{ margin: 0 auto; } main{ background-color: #f2fffd; /* 全体の背景色を変更 */ width: 100%; margin: 0 auto; /*height:100vh;*/ }
4.7. ChatGPTを使ったカスタマイズ方法
4.7.1. 見出しの装飾をしよう！
4.7.1.1. 変更するcss
4.7.1.1.1. a.btn-gradient { -webkit-transform: skew(-15deg); transform: skew(-15deg); color: #fff; border-radius: 0; background-image: -webkit-gradient(linear, left top, right top, from(#2af598), to(#009efd)); background-image: -webkit-linear-gradient(left, #2af598 0%, #009efd 100%); background-image: linear-gradient(90deg, #2af598 0%, #009efd 100%); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1); box-shadow: 0 5px 10px rgba(0, 0, 0, .1); } a.btn-gradient:hover { -webkit-transform: skew(0); transform: skew(0); color: #fff; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1); box-shadow: 0 2px 3px rgba(0, 0, 0, .1); }
4.7.1.2. グラデーション / 影 / 斜め
4.7.2. カスタマイズ指示
5. FAQ
5.1. 便利なTips
5.1.1. CTAボタン事例集12選
5.1.1.1. CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
5.1.1.2. uiverse
5.1.1.3. 【CSSコード付き】CTAボタンに効果的な簡単ホバーエフェクト
5.1.1.4. コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選
5.1.1.5. ボタンデザインはCSSで作ろう！使えるボタンデザイン27選！
5.1.1.6. Beautiful CSS buttons examples
5.1.1.7. Buttons Generator
5.1.1.8. cssbuttons.app
5.1.1.9. opy-paste-css
5.1.1.10. tailwindcss buttons
5.1.1.11. ui-snippets
5.1.1.12. cssanimo
5.1.2. ブートストラップ
5.1.2.1. アコーディオンパネル
5.1.3. 動きをイメージできないときは…
5.1.3.1. 動くwebデザインアイディア帳
5.1.3.2. 引き出しをとにかく増やす！
5.2. よくある問題とその解決方法
5.2.1. 他のサイトからcssをコピーしたら、必ずクラス名を変更しよう！
5.2.2. そうじゃないとCSSが反映されません！
6. セミナーのまとめ
6.1. まとめ
6.1.1. ChatGPTをうまく活用しよう！
6.1.2. 質問力があればコードが分からなくてもクリアできます
6.2. その他
6.2.1. 定期的にセミナーをやっているので、LINEかTwitterを見ておいてください！
6.2.2. L Messageのアップデート情報などを随時知る
6.2.2.1. エルメ公式ブログ
6.2.2.1.1. https://lme.jp/media/
6.2.3. Twitter
6.2.3.1. https://twitter.com/nanamincrear