Embedded Files
ここではフォントの修飾について説明します。
webフォントを利用する
webフォントを利用する
フォントは概ねPCに備わっているのですが、中には備わっていないフォントを利用したということもありますね。その場合はwebに公開されているフォントを利用することができます。その方法について説明しましょう。
一般に例に取り上げられるのがgoogleが公開しているgoogle fontです。日本語(Japanese)をフィルタに設定すれば日本語だけのフォントがリストされます。
以下の図に従って、必要な情報をコピーしてheaderの部分に入力します。
（SPIRALナレッジサイトを参考にしました。）
コード例は次のとおりです。241028index_textbox_margin.cssは以前利用したものを再利用しています。新しく、下記のwebfont.css を追加しました。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テキスト枠の例</title>
<link rel="stylesheet" href="241028index_textbox_margin.css">
<link rel="stylesheet" href="webfont.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="text-box">
<p><span class="webfont">webフォントの利用例</span></p>
<p>余白はwebでの文章を読みやすくするポイントです。特に背景色がある枠には余白が必要です。</p>
</div>
</body>
</html>
CSS
.webfont {
font-family: 'Potta One', sans-serif; /* フォントファミリーの指定 */
font-size: 15pt;
font-style: normal;
}
フォントカラー
フォントカラー
フォントに色をつけましょう。すでに文字背景のところでカラー指定をしています。ですが、今回はフォント自体に色をつける方法について紹介します。コードは単に、”color: #0db;” のようにカラーコードを指定するだけです。他に”red"や”rgba(10, 130, 155, .5)"などの 256諧調のRGB値を指定することもできます。
カラーコードはhttps://htmlcolorcodes.com などのサイトを利用すると便利です。
文字の背景に画像を設置
文字の背景に画像を設置
テキストに背景画像をつける
テキストに背景画像をつける
backround-imageを利用すると画像を背景に文字を表示できます。
大きな画像がない場合は小さな画像をタイル状に並べることができます。次のような小さな画像(css_backimage.png )を利用して背景画像をつけましょう。
以前利用したgridのhtmlに組み込んでみます。
コードの実行画像は以下のようになります。
コードは以下のように記載しています。参考にしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="superimpose.css"> </head>
</head>
<body>
<h1>2段落 2columnです。</h1>
<p>これは、2columnをgridで実行した例に、<font color="red"><b>タイルも模様を配置してみました。</b></font></p>
<div class="background">
<img src="./css_backimage.png" alt="これは何か？">
<div class="container">
<div class="left">
<p>1</p>
<p>3</p>
<p>5</p>
<p>7</p>
<p>9</p>
このコード中では以下のように文字の色を赤(red)と指定しました。また、簡易的に<b> で太字にしています。
<font color="red"><b>タイルも模様を配置してみました。</b></font>
CSSのコードは以下のように記載しています。
背景画像の部分は、.backgroundで記載している部分です。
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2つの列に均等分割 */
}
.background {
background-image: url(css_backimage.png); /* 背景画像指定 */
background-repeat: repeat; /* 背景の繰り返し設定 */
}
背景画像を一面に
背景画像を一面に
背景画像を大きくしてみましょう。このためにはcss に「background-size: cover; 」を追加します。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="superimpose_cl1.css"> </head>
</head>
<body>
<h1>2段落 2columnです。</h1>
<p><font color="red"><b>タイルも模様を配置してみました。</b></font></p>
<div class="backgroundcover">
<h1><font color="yellow"> 今日の紅葉を見に行こう！</font></h1>
</div>
</body>
</html>
CSS
.background {
background-image: url(css_backimage.png); /* 背景画像指定 */
background-repeat: repeat; /* 背景の繰り返し設定 */
}
.backgroundcover {
background-image: url(css_colorleafs1.png); /* 背景画像指定 */
background-repeat: no-repeat; /* 背景の繰り返し設定 */
background-size: cover; /* 画像を大きくする */
width: 100%; /* 幅を600pxに設定 */
height: 200px; /* 高さを100pxに設定 */
}
Page updated
Google Sites
Report abuse