経緯
今っぽいfont-familyについて調査していた所、Google Fontsの日本語フォント（Noto Serif JP）に辿りつきました。実際に手持ちのコンテンツにいくつか反映してみた所、それまでと比べていとも簡単にオシャレ感がましましになり、その効果と魅力に少し感動しておりました。
その後「このWebフォントの力なら大体のサイトがそれっぽくなるんじゃね？」という衝動に駆られみんな大好き阿部寛さんのホームページに当て込んでみようという流れになりました。ちなみに私が大好きなWebページはこちら
開始
frame
阿部寛さんのホームページは左側（メニュー）frameと右側（メイン）のframeのセットで構成されておりました。
<html>
<frameset>
<frame src="menu.htm">...</frame>
<frame src="top.htm">...</frame>
</frameset>
</html>
ちなみに、framesetはHTML5では破棄され、代わりに<iframe>を使ったり<div>で何とかまかなう。という手法が当たり前になっているようです。
frame（左）
まずは左側から開始です。
準備したスニペット
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
background-image: linear-gradient(-30deg,#00b6f8 0,#0068f0 100%);
color: #fff;
}
a {
color: #fff;
Text-decoration: none;
font-size: 14px
}
font {
font-size: 0;
}
</style>
- font-family適用〜
- 背景を青っぽく〜
- アンカーは白に〜
-
<font>タグに隠れてた記号は消しちゃう〜
frame（左）の作業開始
もちろんChromeの検証を開いてスニペットを埋め込みます。左側のiframeをポチポチと展開していき<head>を見つけたら、右クリックで「Edit as HTML」を選択し、準備したスタイル用スニペットをぺろっと貼り付けます。
frame（左）の結果
これが
こうなった。
フラットやな〜。
frame（右）
続いてエリアとしては広い右側。
準備したスニペット
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
background-image: none;
background-color: #fff;
}
h1 {
font-size: 4em;
font-weight: 100;
margin-bottom: 60px;
}
a {
color: #333;
}
hr {
border: width: 0;
}
</style>
- font-family適用〜
- 背景画像を消す〜
- h1のタイトルはでっかく〜
- hrの線消しちゃえ〜
frame（右）の作業開始
これまた検証から埋め込んじゃえ。
ペリっと。
frame（右）の結果
これが
こうなった。
全体
Ctrl + r でページ更新（さよなら適用したスタイル達！）
オシャレになった！！のか。。。笑
お詫び
font-family 以外も少し準備しちゃってますが「ちょっとどうせやるなら」という思いから、ご了承ください。
「Webフォントを読み込むとフォント読み込み作業が発生するから爆速レスポンスじゃなくなっちまうだろう！」
のようなご意見が飛んで来るかと思いますが、はいおっしゃる通りです。
総括
今の阿部寛さんのホームページのが良い。