HTML手打ちサイトCSS最小化計画

ウェブフォントを使う

このサイトの文字、なーんかヘンだなと思いませんでしたか?
フォントを変えたくて調べていたら、ウェブフォント(Google Fonts)の使い方を見つけたので試してみました。いい具合に力の抜けた感じになりました。
分割方法の冒頭でフォルダのアイコンを使っているのですが、あれもGoogle Fontsのアイコンです。

このサイトのフォントは、
Kaisei Opti(見出し)
Kiwi Maru(全体)
Noto Sans Mono, Kiwi Maru(preとcode)
です。

フォルダアイコンは「folder」という名前のアイコンです。

使い方は例によって、わかりやすく説明してくださっているサイトがありますのでご紹介します。そちらをご参考になさってみてください。

Google Fonts

ページにWebフォント(Google Fonts)を使用する方法
【アイコンフォント】Material Symbolsの基本と使用例

CSS position relative 要素を元の位置からずらす

ごく簡単に説明してみます。
文字フォントの場合
Google Fontsに移動して、使いたいフォントを+ボタンで選び、右ウインドウに表示されているコードをコピーして<head>内にペースト。これでフォントが読み込まれる。読み込んだフォントを具体的にどこに使うのかはCSSで設定する。(CSSに書かないとフォントが反映されない)

※サイト全体で使うので、head.phpファイルの<head>内に書きました

アイコンの場合
使いたいアイコンをクリックすると右ウインドウにコードが表示される。線の太さなどを変えたい場合は左上のFiltersをクリックすると調整できる。
調整が終わったら、右ウインドウの「Web」タブにあるコードの上の2つをコピーして<head>内にペースト。次に、アイコンを表示したいところに「Inserting the icon」にあるコードをペースト。

※1ページだけで使うので、メインコンテンツ用のファイルの<head>内に書きました

アイコンを設置したら位置が若干上にずれたので、上のサイトを参考にposition: relative;などを追加して調整しました。

こんな感じに書きました
<style>
.material-symbols-outlined {
    position: relative;
    top: 0.25em;
    left: ;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}
</style>