How To

HTML/CSSの有料テンプレート購入ガイド【VSCodeで読み込むまで解説】

 
テンプレートでCreate
Themeforestという海外のサイトでHTML/CSSのテンプレートを購入したい。
でも英語だからちょっと怖いな。ちゃんと買えるかな？
あと、買ったあとにはどうしたら…分からないことだらけだよ。

えっ、英語のサイトで買うの？…大丈夫かな…
というあなたも安心してください、わたしも漏れなく同じことを思いましたｗ

この記事を書いているわたしは現在、プログラミングを勉強しています。
そこで参加している#30DAYSトライアル。

— ショーヘー@バンコク🇹🇭 (@showheyohtaki) 2019年1月13

プログラミングを仕事にタイで生活しているショーへーさん（@showheyohtaki） の一言で始まった、
『プログラミング初心者が30日のトライアルを経て5万円稼げるスキルを身につける』という素晴らしい企画です。

その18日目の課題がこちら。
『テンプレートを購入して、自分のポートフォリオサイトを作成』です。
【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ

実際に海外のサイトで買い物するのは初めてのわたしが、英単語を調べながら手探りでやったことをまとめていきます。

英語に抵抗があるあなたも、わからない単語は調べつつ この記事を参考にテンプレートを購入してくださいね。

HTML/CSSの有料テンプレート購入ガイド｜海外のオシャレなデザイン詰め合わせ

これまでの課題をこなすうちに、HTML/CSSの基本的な知識は身についてきました。
ですがプログラマーとしては、まだまだ赤ちゃん…。

そこで便利なのがテンプレート（以下テンプレ）です。
簡単に言えば、フルーツ詰め合わせお買い得ボックスのようなもの。
たくさんのデザインのテンプレが入った箱を購入して、既に形になっているものを編集していくというステップです。

課題内容は、Themeforestというサイトからショーへーさんが厳選してくださったテンプレを購入するところから始まります。

わたしは Taso – Personal Portfolio Template を買いました(^o^)Taso

どんなデザインなのか見たい！デモサイトを見るには？

どんなデザインのテンプレなのかを確認するために、Live Preview というボタンをクリックしてみます。
するとこの様な画面に。

どんなデザインがあるのか

それぞれをクリックすると、デザインの詳細を確認することもできます。

気に入ったらAdd to Cartで購入しよう【クレジットカード払い】

気に入ったら、Purchace かAdd to Cart を押します。
日本語で言うところの 「カートに入れる」です。

お支払いはクレジットカード。VISAとMastercardが利用できます。
他にもPayPalとSkrill（←これは馴染みないですね）が使えるようですね。

初めての利用にはアカウント登録が必要

とそのまえに、会員登録が必要なようです。envato marketにアカウント登録しましょう。

「大丈夫？ウイルスサイトとかじゃない？怖い！」と思ったあなた、怪しいサイトではないので安心してください(^o^)

envato marketについては「海外素材の宝庫！Envato Marketの使い方を日本語で解説！」が参考になりましたのでぜひ。

実際の購入手順はこちらの通り↓

  1. アカウント登録は簡単です。
  2. 名前、名字の順でローマ字で入力。
  3. Emaliアドレスを入力。
  4. ユーザーネーム、パスワードを決める。
  5. ロボットじゃないよ にチェック
  6. Create account & continue をクリック
  7. 住所を記入
  8. Save and continue

日本サイトやアプリで会員登録をするのと同じですね。

ここまでできたら、あとはお支払いのクレジットカード情報を入力していくだけ。
最後に Make payment をクリックしたらテンプレの購入は完了！登録したアドレス宛にメールが届きます。

英語での住所の書き方

Address line1には
マンション名＆部屋番号,
何丁目-何番-何号 地域名,

Cityには市区町村

State/Province/Regionは都道府県です。

そして最後にZip/Postal Code、これは郵便番号ですね。

英語で住所を書く時は逆に書く、と覚えておくよ良いですよ。

購入したテンプレートファイルをVSCodeで起動する

では早速、テンプレートをエディタで起動しましょう。
※その前にZipファイルを解凍しておいてくださいね。

VSCodeを起動して、『ようこそ』となっているところに解凍したフォルダごとポイッと投げちゃいます。

あとはHTMLファイルを開いて、Live Serverでどんなデザインテンプレートなのか確認しましょう。
※Live Serverはエディタで編集した内容を自動的にブラウザで表示してくれる拡張機能でしたね。


 

ちなみに、エディタを起動せずにHTMLファイルをブラウザで確認するには
HTMLファイルをブラウザに直接ポイッと投げればOKです。

#30DAYSトライアル18日目まとめ｜海外の有料テンプレート購入とエディタで読み込み

ではまとめです。

  1. まずはTheme Forestで良いなと思うテンプレートを購入しましょう。
  2. 支払いが完了してファイルをダウンロードしたら、解凍を忘れずに。
  3. VSCodeを立ち上げてフォルダごと読み込んで
  4. あとは自由にHTML/CSSファイルをカスタマイズ

海外のデザインって、なぜかオシャレで惹かれますよね。
デザインテンプレートを利用すれば、まだ駆け出しのプログラマーのあなたもステキなサイトを作ることができちゃいます。

カッコいいサイトを作って、どんどんレベルアップしていきましょう！

#30DAYSトライアル