カスタムプロパティの定義
@charset "UTF-8";
:root {
--primary-color: #45CCC4;
--red: #EB4E45;
--blue: #0158A8;
--bg-color: #ECFCFB;
--text-color: #333;
--breakpoint-sm: 576px;
}
画像の大きさの最適化
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
※親要素より横幅が大きい場合のみ縮小され、
高さも自動で縮小され、歪みません
※画像の上下に余白（line-height分の余白）ができない
カード
Webサイト制作
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト
Webサイト制作
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト
Webサイト制作
テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト
テーブル
▼ スマホ幅で改行しない→スクロール
| 名前 | 田中 |
|---|---|
| 住所 | 〒xxx-xxxx テキストテキストテキストテキストテキストテキスト |
| 得意分野 | テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 名前 | 住所 | 所属 | 得意分野 |
|---|---|---|---|
| 渡辺 | 〒xxx-xxxx テキストテキストテキストテキストテキストテキスト | システム開発部 | テキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 渡辺 | 〒xxx-xxxx テキストテキストテキストテキストテキストテキスト | システム開発部 | テキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 渡辺 | 〒xxx-xxxx テキストテキストテキストテキストテキストテキスト | システム開発部 | テキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| name | header | header | header |
|---|---|---|---|
| name1 | テキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキスト |
| name2 | テキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキスト |
| name3 | text | text | text |
▼ min-width: 1000px;→スクロール、ScrollHint使用
| planA | planB | planC | planD | planE | |
|---|---|---|---|---|---|
| aboutA | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト |
| aboutA | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト |
| aboutA | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト |
| aboutA | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト | テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト |
フロー
プランBの場合はここから
-
-
step1
ヒアリングシートによるヒアリング
- ターゲット顧客（ペルソナ設定）、商品の特徴、競合に対する強みや弱み、 など詳細をお聞きして、訴求ポイントを決定します。
-
step1
-
-
step2
文章作成
- 1週間ほどお待ちいただきます。中間確認も可能です。
-
step2
-
-
step3
文章のご確認、修正
- 修正は納得のいくまで何度でも可能です。
-
step3
プランAの場合はここから（プランAもヒアリングはあります）
-
-
step4
商品画像など素材のご提供
- 商品画像や人物画像、背景画像などの素材は可能な限り、お客様でご用意ください。 ない場合は無料素材をこちらで探します。
-
step4
-
-
step5
デザインの方向性を決定
- お客様の好みとペルソナを考慮したデザインの方向性を決めていきます。
-
step5
-
-
step6
デザイン作成
- 10日ほどお待ちいただきます。中間確認も可能です。
-
step6
-
-
step7
デザインのご確認、修正
- 修正は納得のいくまで何度でも可能です。
-
step7
-
-
step8
コーディング
- WordPress上にコーディングするため、この頃までにサーバーやドメインを決めていただきます。
-
step8
-
-
step9
納品、最終ご確認
- プラグインで導入するお問い合わせフォームや分析ツールの簡単なオンラインマニュアルをご用意します。じっくり最終確認をしてください。
-
step9
タブ
料金表
-
スターター
5,000円/月
テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
-
スターター
5,000円/月
テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
-
スターター
5,000円/月
テキストテキストテキストテキストテキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
- テキストテキストテキストテキスト
- テキストテキスト
FAQ
- Q テキストテキストテキストテキスト
-
A
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- Q テキストテキストテキストテキスト
-
A
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- Q テキストテキストテキストテキスト
-
A
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- Q テキストテキストテキストテキスト
-
A
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- Q テキストテキストテキストテキスト
-
A
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
アコーディオン
-
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
-
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext