ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

フォントの設定

ページ全体のフォント設定

最後の仕上げとして、ホームページ全体の文字サイズや色、大きさ、行間の設定などを行いましょう。

気づいているかもしれませんが、完成見本の「さきちんカフェ」とこれまでに作ってきた「さきちんカフェ」では文字の色や種類などが異なっています。

[未完成のさきちんカフェ]
画像タイトル
[完成品のさきちんカフェ]
画像タイトル

完成した「さきちんカフェ」では「種類」「色」「大きさ」「行間」をCSSで指定しています。
今作っている「さきちんカフェ」にもスタイルを作って適用してあげましょう。

スタイルの作成

それではテキストエディタで「style.css」を開いて、スタイルを作成しましょう。

作成するスタイルは、以下のようになります。

[入力するコード]
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
color:#630;
line-height:25px;
font-size:0.95em;
}

step.1

まず、ホームページ全体に適用するので、セレクタ名は「body」とします。

step.2

次に「font-family」で文字の種類を指定します。
この場合は”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serifを指定しています。

step.3

colorで文字色を指定し、line-heightで行間を25pxに、font-sizeで文字の大きさを0.95emに指定します。

これを「style.css」に入力して、保存しましょう。

[CSSの記述例]
bodyスタイルの入力例

覚えておきたいポイント

CSSファイルだけでOK

bodyにスタイルを適用するので、「index.html」ファイルを編集する必要はありません。「style.css」を編集するだけでOKです。

ブラウザで確認する

入力が完了したら「index.html」ファイルをブラウザで確認してみましょう。
下画像のように表示されていれば成功です。

[ブラウザでの表示例]
スタイルの適用画像

文字の種類が変更され、大きや色、行間も変わりましたね!

これでトップページは完成です!
次のステップでは、トップページを流用して他のページを作ってみましょう!

覚えておきたいポイント

フォントで雰囲気が変わる

さきちんカフェでは丸く優しいイメージのフォントを指定していますが、明朝系やゴシック系のフォントを使うことにより、ホームページの雰囲気をガラリと変えることもできます。お好みのフォントがあれば、色々と試してみてください。

【STEP.5】他のページを作る前に
« 前のページへ フッターの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。