付録：最終的なHTMLとCSSのコード
最終的なHTML文書とCSSのコードです。Phosphor IconsのCSS読み込みをHTML文書からCSSファイルでの@importに変更しています。
ディレクトリ構成
.
├── css
│ └── style.css
├── images
│ └── icon.png
└── index.html
HTML文書
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="robots" content="noindex,nofollow,noarchive">
<title>My Profile</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>My Profile</h1>
<figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>
<p>
プロフィール・リンク一覧のサンプルページです。<br>
ここにプロフィール紹介文を入れてください。
</p>
<p>
ハンズオン記事は<a href="https://parts-tips.com/ho_ref/handson-bio">こちら</a>です。
</p>
</header>
<main class="main">
<h2>Link</h2>
<ul>
<li><a href="">
<h3><i class="ph-fill ph-house" aria-hidden="true"></i>サイト名など</h3>
<p>説明文が入ります</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
<li><a href="">
<h3><i class="ph-fill ph-x-logo" aria-hidden="true"></i>X(Twitter)</h3>
<p>説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。説明文が入ります。多少長くなっても大丈夫です。</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
<li><a href="">
<h3><i class="ph-fill ph-cube" aria-hidden="true"></i>サイト名など</h3>
<p>説明文が入ります</p>
<i class="ph-fill ph-arrow-circle-right" title="サイトへ移動する"></i>
</a></li>
</ul>
</main>
<footer class="footer">
<p><small>© <a href="./">My Profile</a></small></p>
</footer>
</div>
</body>
</html>
CSSファイル
@charset "utf-8";
/* font@google */
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');
/* Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');
/* ============================ */
/* reset
/* ============================ */
body, p, h1, h2, h3, ul, li, figure, small {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
/* ============================ */
/* base
/* ============================ */
:root {
--baseColor: #143d60;
--subColor: #eb5b00;
--whiteColor: #fefefe;
--bgColor: #fdfbee;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--baseColor);
font-size: 1rem;
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
line-height: 1.8;
background-color: var(--bgColor);
}
h1,
h2 {
margin-bottom: 10px;
color: var(--subColor);
font-weight: 400;
font-style: normal;
font-family: 'Fascinate Inline', system-ui;
text-align: center;
}
/* ============================ */
/* link
/* ============================ */
a {
transition: all 0.3s;
}
a:link,
a:visited {
color: var(--baseColor);
text-decoration-line: underline;
text-decoration-color: var(--subColor);
/* text-decoration: underline var(--subColor); /* Safari以外は一括指定でも可 */
}
a:hover,
a:active {
color: var(--subColor);
text-decoration: none;
}
/* ============================ */
/* .wrapper
/* ============================ */
.wrapper {
margin: 40px auto;
width: 90%;
max-width: 550px;
/* width: min(90%, 550px); /* ←まとめてこのように書くこともできます */
}
/* ============================ */
/* .header
/* ============================ */
.header {
margin-bottom: 40px;
}
h1 {
font-size: 2.5em;
}
.prof_icon {
margin: 0 auto 20px;
width: fit-content;
border-radius: 50%;
overflow: hidden;
}
/* ============================ */
/* .main
/* ============================ */
.main {
margin-bottom: 40px;
}
h2 {
font-size: 2.25em;
}
.main ul li {
margin-bottom: 15px;
list-style: none;
}
.main ul li a {
padding: 15px 50px 15px 15px;
text-decoration: none;
background-color: var(--whiteColor);
border: 1px solid var(--baseColor);
border-radius: 5px;
position: relative;
display: block;
}
.main ul li a:hover {
color: var(--subColor);
border-color: var(--subColor);
}
.main ul li a > .ph-fill {
margin-block: auto;
font-size: 18px;
width: 18px;
height: 18px;
position: absolute;
inset-block: 0;
right: 15px;
}
.main ul li h3 {
font-size: 1.15em;
}
.main ul li h3 .ph-fill {
margin-right: 5px;
}
@media screen and (max-width: 549px) {
/* スマホでの表示 */
.main ul li h3 {
font-size: 1em;
}
.main ul li p {
font-size: 0.9em;
}
}
/* ============================ */
/* .footer
/* ============================ */
.footer {
text-align: center;
}
.footer small {
font-size: 0.85em;
}