PlainなhtmlとCSSで見た目だけをつくる

https://github.com/DaikiOnodera/vanilla_html_css.git

PlainなhtmlとCSSで見た目だけをつくる

ページ読み込み高速化

script defer

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

deferを付けるとHTMLのparseと外部スクリプトのfetchを並列で行なってくれるので、ページの表示速度は速くなることが期待される

rel="preconnect"

google fontsをCDNで使う場合はpreconnectでhttps://fonts.googleapis.comとhttps://fonts.gstatic.comを指定すると、fontファイルを早く読み込んでくれるらしい
https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/

外部の素材

fontawesome

モバイルでよく見るハンバーガーメニューとかグルグルの待ち時間を表すアイコンとか一通りはfontawesomeを

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

として読み込むと

      <i class="fa fa-refresh fa-spin"></i>

として使えるようになる

normalize.css

firefox, chrome, Edgeなどブラウザによってh1の大きさやarticleタグのmarginなどが微妙に違うので、normalize.cssで著名なブラウザでは表示を統一することができる
https://github.com/necolas/normalize.css/

CSS

padding

.container {
  padding: 5% 10%;
  text-align: center;
}

paddingを入れるだけで高さや幅を指定しなくても、それっぽい大きさになる

flex

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style-type: none;
}

横に並べたい要素はdisplay: flexにして、wrapではみ出たら改行させる