読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Webページのテキスト

情報を伝える文字

  • 文書構造で伝える
  • 文字情報の価値の優先順位をブラウザに伝えるHTML
  • 閲覧者に情報の内容をわかりやすく伝えるためのCSS
  • CSSを指定しない場合は、ブラウザの初期値(CSS)が適用されます


★HTMLの検証:The W3C Markup Validation Service

  • CSSを適用する前に、HTMLの検証をおこないエラーを無いようにする
文字サイズ
  • 文字の大きさで、情報の価値を伝える
  • font-sizeプロパティ
  • 単位は「px」「em」「%」「rem」と「キーワード(small, mediumなど)」
文字色
  • colorプロパティ
  • キーワード「red, white など」
  • 16進数「#ff0000, #ffffff など」
  • RGB値「rgb(255, 0, 0), rgb(255, 255, 255) など」
  • RGB値「rgb(100%, 0, 0), rgb(100%, 100%, 100%) など」
フォントの種類
  • font-familyプロパティ
  • 日本語フォントは大きく分けて「ゴシック体」と「明朝体
  • 欧文では「サンセリフ体(sans-serif)」と「セリフ体(serif)」
文字の太さ
  • font-weightプロパティ
  • boldまたはnormalが基本(数値では、400・700相当)
行の高さ
  • line-heightプロパティ
  • 行の高さを数値のみで表す
  • 「行の高さ」-「文字の大きさ」=「行間のサイズ」
  • 「行間のサイズ」の1/2を「文字の大きさ」の上下に付与した値が「行の高さ(line-height)」
文字の字間
  • letter-spacingプロパティ
  • 指定は「数値+単位」
  • 一般的には読み易すくするために「文字の字間を広く」設定します
水平方向の位置
  • text-alignプロパティ
  • 値は「left」「right」「center」「justify」
  • ボックスモデルがもつ幅内での行揃えを設定
文字に線をつける
  • text-decorationプロパティ
  • 値は「underline」「overline」「line-through」
テキストリンクの色を変更
  • 擬似クラス「a : 擬似クラス」


リンクの状態 擬似クラス
未訪問のリンク :link
訪問済みのリンク :visited
マウスカーソルが重なったとき :hover
リンクをクリックしたとき :active


未訪問のテキストリンクの色を変える

a:link {
  color: blue;
}


訪問済みのテキストリンクの色を変える

a:visited {
  color: darkgray;
}


テキストリンクにカーソルを合わせたときの色を変える

a:hover {
  color: orange;
}


テキストリンクをクリックしたときの色を変える

a:active {
  color: red;
}
文字の字下げ
  • text-indentプロパティ
p {
  text-indent: 1em;
}
  • 1行目の1文字を突き出す
p {
  padding-left: 1em;
  text-indent: -1em;
}
一部分だけスタイルを変更する
  • span要素(ここからここまでの範囲設定をする)