エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアル

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアルです。 

ついに自分のポートフォリオサイト作成に着手です!楽しいです!

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』

DAY18. 『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』ということで、本格的にポートフォリオサイトづくりです!

 

ポートフォリオサイトを作ってみた(途中)

ポートフォリオサイトを作ってみてます(途中)

私はEnvatoMarketで「Kerri – Responsive Bootstrap 4 One Page Portfolio Template」というテンプレートを購入しました。

» 参考:「Envato Market」の使い方説明。アカウントの作り方や購入方法など【日本語で解説】 - エンジニアステップ

www.engineer-step.com

 

私のメニュー構成

私のメニュー構成は以下の通り。とりあえず(仮)です。

  • Home
  • About
  • Services
  • Skills
  • Portfolio
  • Blog
  • Contact

 

変更した所(参考に)

変更した所は以下の通りです。

参考にどうぞ。

 

<html lang="ja">

→日本語を使うのでjaに変更した(japaneseのjaです)

 

「Client」が不要だったので「Skills」に変更した

→IDを#clientからskilsに変更する必要があります。

ただし一括置換でclientをskillsに変更すると、CSSのクラス名も変わってしまうのでご注意を。

 

画像を張り替えたり、テキスト変えたりした

→これはそのまま画像変えたり、テキスト変えたり…ってだけです。

良い文章の書き方はおいおい勉強するとして、とりあえず変えてみました。

 

「お問い合わせへのページ内リンクボタン」を追加

→課題で指定が合ったとおり、ボタンを追加しました。

既に良いボタンがあったのでそれを流用して間に合わせました。

 

ランディングページ完成品(仮)

ランディングページ完成品(仮)です。

とりあえず、ざっくりとHTMLをいじってみただけです。

「なんとなく作れるなー」という感触は得られたので今日はココまでです。

f:id:alpacajp:20190124225147p:plain

f:id:alpacajp:20190124225203p:plain

f:id:alpacajp:20190124225230p:plain

f:id:alpacajp:20190124225242p:plain

f:id:alpacajp:20190124225255p:plain

f:id:alpacajp:20190124225307p:plain

f:id:alpacajp:20190124225319p:plain

今日は一旦ここまでです。

  

【関連記事】

  1. DAY18.『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』 #30DAYSトライアル
  2. DAY19.『自分のポートフォリオサイトを作ろう②』 #30DAYSトライアル
  3. DAY20.『ポートフォリオを公開しよう』 #30DAYSトライアル

www.engineer-step.com