WEBエンジニア
css 分類

WEBサイトでフォントとテキスト

投稿者情報

  • 運営局 投稿
  • 投稿日

コンテンツ情報

本文内容

style.css ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。
最初に、フォントとテキストの見ばえを少し良くしてみましょう。

まず最初に、どこかの安全に保存した Google フォントの出力を見つけてください。
<link> 要素を index.html の上部 (<head> タグと </head> タグの間) のどこかに追加します。これは次のようになります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。

次に style.css ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。
代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の font-family 行に置き換えます。(この font-family は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します。
(<html> はページ全体の親要素です。その中のすべての要素は同じ font-size と font-family を継承します)

html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}

: 「px」の意味を説明するコメントを追加しました。/* と */ の間にある CSS ドキュメント内のものは CSS コメントです。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。

 

4. HTML ボディ (<h1><li><p>) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します。

h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

 

関連資料

新着投稿


  • 投稿がありません。

新着書込み


  • 書込みがありません。
アラート 0