松本卓也

こんにちは、松本卓也です。
今回の制作課題は、チョコレートLPサイトです。

課題のなかみ

制作会社からの依頼

下記の通り、コーディングを依頼させていただきたく存じます。
よろしくお願いいたします。


【業務】静的コーディング1p(レスポンシブ)

【予算】5〜10万円


【metaタグ設定】

titleCHOCOLATE|贅沢な一口の幸せをお手元に
description豊かな風味と独自のアートが融合したチョコレートの世界へご招待。ここでしか味わえない至福の味覚体験をお楽しみください
urlhttps://my-logic.jp/
twitter:cardsummary
theme-color#4C2F12
OGP画像デザインカンプ内参照
Faviconデザインカンプ内参照

【デザインカンプ】

作成の前に(実施済みの方はOK)

SASSのインストール設定だけ実施しておいてください。

2分で終わると思います。

初期設定
SASSの設定方法
SASSの設定方法

加えて、時短テクとしてスニペットの設定もしておくと作成スピードが上がります。

こちらも2分で終わると思います。

+α 時短テクとして
【無料配布】スニペット設定をして時短テクニックを覚えよう
【無料配布】スニペット設定をして時短テクニックを覚えよう

では、作っていきましょう

次の手順で作成します。

  1. 下準備
  2. ヘッダー、フッター作成
  3. メインコンテンツ作成

まずは下準備

  • コーディングスタンダードをダウンロード
  • デザインカンプをダウンロード
  • 画像の書き出し
  • 画像の軽量化(WebP化)
  • metaタグ
  • Favicon
  • カラー、フォント、サイズ

ヘッダー、フッター作成

構造


メインコンテンツ作成

構造


動画内で作成したファイル【回答】

ポートフォリオに掲載しよう

XにPOSTで実績掲載しよう!
Xからの読者コメントをお待ちしています。
ブログ更新の励みになります!
記事URLをコピーしました