HTML&CSS勉強備忘録⑧-フォントの種類、大きさの設定
こんにちは！今日はフォントのサイズ、種類の変更について書いていこうと思います。
・font-family
このプロパティを用いるとフォントの種類を指定することができます。
font-family:フォント名; の形で使うことができる
EX
font-family:Helvetica Neue;
・font-size
font-sizeプロパティで文字の大きさを指定することできます。
font-size:●px;の形を用いる。
EX
font-size:16px;
参考
・background:linear-gradient
このプロパティでグラデーションを適用することできる。
background:linear-gradient：（色を適用する角度,開始の色,終わりの色）；
EX
background:linear-gradient(90deg,#99CCFF,#00CCFF);
実際に動かしてみました。
・HTML
<!doctype html>
<html>
<!-- ヘッダー開始 -->
<head class="header">
<meta charset="UTF-8">
<title>YUTAKUの障害特性理解</title>
<link rel="stylesheet" href="css/style.css">
</head>
<!-- ヘッダー終了 -->
<body>
<h1>YUTAKUの障害特性理解サイト</h1>
<h2>～社会復帰を目指して～</h2>
<head class="header">
<nav class="nav">
<ul>
<li><a href="index2.html">ホーム</a></li>
<li><a href="profile.html">プロフィール</a></li>
<li><a href="ADHD.html">ADHDとうつ病とは</a></li>
<li><a href="problem.html">困りごと</a></li>
<li><a href="request.html">配慮をお願いしたいこと</a></li>
</ul>
</nav>
</header>
<div class="text">
<h3>このサイトを開設した目的</h3>
<p>私は社会人になってから、うつ病、ADHD傾向と診断されました。現在は障がい者枠での就労も考えています。このサイトを作成する過程を通して、自分の障害を理解することを目的としています。</p>
<p>また、同じような悩みを持つ方のきっかけやヒントになることができれば幸いです。Noteでも発信をしているのでそちらもご覧下さい。<a href="https://note.com/yutaku">https://note.com/yutaku</a></p>
</div>
<img src="Image/YUTAKU.jpeg">
</body>
</html>
・CSS
@charset"UTF-8";
html{
background:linear-gradient(90deg,#99CCFF,#00CCFF);
}
.nav{
font-family:Helvetica Neue;
font-size:16px;
}
.text{
font-family:Helvetica Neue;
font-size:16px;
}
前回、背景の色の指定に失敗したのでやけくそで背景をグラデーションにしてみました。
次は余白、行間の調整について投稿しようと思います。よろしくお願いします。
この記事が気に入ったらサポートをしてみませんか？