HTMLテンプレートを使って、自分のポートフォリオサイトを作る

#デイトラWeb制作コース初級編DAY17〜19の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習24日目⏩<br><br>Web制作コース初級編DAY17,18💻<br><br>学習時間:7時間12分⏳<br><br>学習内容:ポートフォリオを作る✏<br><br>学び📚<br>・HTMLテンプレートの凄さを実感<br><br>・プロのコードはとても見やすい<br><br>・CSSファイルが大量に存在<br>　けど、そのほとんどは元ネタあり<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a> <a href="https://t.co/NKRj0OjVSZ">pic.twitter.com/NKRj0OjVSZ</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1359449301647319040?ref_src=twsrc%5Etfw">February 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習25日目⏩<br><br>Web制作コース初級編DAY19💻<br><br>学習時間:3時間34分⏳<br><br>学習内容:ポートフォリオを公開する✏<br><br>学び📚<br>・エックスサーバー＋Cyberduckでファイルをアップロードできた<br><br>・TwitterCardを設定すると見栄えがよくなる<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/g5uTeQh3Hz">pic.twitter.com/g5uTeQh3Hz</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1360361903005040642?ref_src=twsrc%5Etfw">February 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【制作物】
![twitter-card.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/bcec5a4c-3ee4-2b90-e2bf-a3df71ab2051.png)
参考サイト: [【初心者コーダー向け】現役Webエンジニアが教えるサーバー契約＋FTPでサイト公開までの全行程まとめ](https://showtaki.com/30days-trial-3/)

#　【学び】

＜画像ファイルは必ず圧縮する＞
画像ファイルはテキストよりも容量が大きいため、何もせず何枚も表示してしまうとサイト読み込みスピードが低下する
読み込みスピードが遅いサイトは離脱率も高くなるので、画像ファイルは必ず圧縮する！


＜最低限サイト公開前にチャックすべきポイント＞
　①　文字コードはUTF-8か　
　②　titleタグ入ってるか
　③　metaタグ設定したか（twitter cardsの設定も忘れずに！）
　④　hタグが階層構造になってるか（例：h1がサイト名、h2がセクションタイトル、h3が小見出し）
　⑤　imgタグにaltは入ってるか
　⑥　閉じタグは足りてるか
　⑦　水平スクロールしないか（画面横に不要な空白ができてないか）
　⑧　対応ブラウザで動作確認（今回はChromeでOK）

＜サーバー契約はエックスサーバー、FTPクライアントソフトはCyberduckがおすすめ＞
アドバイスや感想頂けると大変嬉しいです!　: [ポートフォリオ](https://furic-portfolio.com/#home)

＜Twitterカードを設定する＞
SNSでシェアしたときのクリック率が全く違うため、必ず設定する
方法：

```index.html
<meta name="twitter:card" content="カード種類" /> <!--「summary」か「summary_large_image」を入れる-->
<meta name="twitter:site" content="@ユーザー名" /> <!--Twitterアカウントのユーザー名を@に続けて入力-->
<meta property="og:url" content="記事のURL" /> 
<meta property="og:title" content="記事のタイトル" /> 
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--文字制限はないが超えた分は切り捨てられる-->
<meta property="og:image" content="画像のURL" /> <!--画像を一度アップロードしたあと、設定→WebURLを開くで取得する-->

```

###↓

記述例：

```index.html

  <!-- twitter card 設定 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@FuRiC_twi" />
  <meta property="og:url" content="https://furic-portfolio.com/#home" />
  <meta property="og:title" content="Furic's Portfolio" />
  <meta property="og:description" content="Webクリエイターのふりっくと申します。ハイクオリティで売上に貢献するLP、Webサイトをリーズナブルな価格でご提供します。" />
  <meta property="og:image" content="https://furic-portfolio.com/img/main-img/twitter-card.png" />

```

反映後：
![スクリーンショット 2021-02-13 8.17.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/db600660-b7f7-7156-f52f-56bf824cd179.png)

＊反映まで時間がかかることがある