プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

タイポグラフィ

概要

基本書体のサイズや行間の定義


ヘッダー

h1タグ～h6タグのフォントの大きさ

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０１</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>H1タグの文字列</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>H2タグの文字列</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h3>H3タグの文字列</h3>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>H4タグの文字列</h4>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h5>H5タグの文字列</h5>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h6>H6タグの文字列</h6>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

基本文言

フォントのサイズなど

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０２</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>タイポグラフィの書体</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>pタグ</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p>
          pタグはフォントサイズが14pxで行間（line-height）が20pxです。
        </p>
        <p>
          pタグはフォントサイズが14pxで行間（line-height）が20pxです。
        </p>
        <p>
          pタグはフォントサイズが14pxで行間（line-height）が20pxです。
        </p>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>p class="lead"</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p class="lead">
          class="lead"でフォントサイズが21pxで行間（line-height）が30pxです。
        </p>
        <p class="lead">
          class="lead"でフォントサイズが21pxで行間（line-height）が30pxです。
        </p>
        <p class="lead">
          class="lead"でフォントサイズが21pxで行間（line-height）が30pxです。
        </p>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

強調文字列

文字列の強調、縮小、イタリック体などの書式変更

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０３</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>強調文字他</h1>
      </div>
    </div>
   <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>pタグの中にsmallタグを付加</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p>
          <small>smallタグで挟んだ場合はフォントサイズが85%になります。</small>
        </p>
        <p>
          <small>smallタグで挟んだ場合はフォントサイズが85%になります。</small>
        </p>
        <p>
          <small>smallタグで挟んだ場合はフォントサイズが85%になります。</small>
        </p>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>太字</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p>
          <strong>strongタグの場合は太字になります（強調表示）</strong>
        </p>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>イタリック体</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p>
          <em>emタグの場合はイタリック体になります</em>
        </p>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>表示位置</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p class="text-left">
          class="text-left"は左寄せ
        </p>
        <p class="text-center">
          class="text-center"は中央寄せ
        </p>
        <p class="text-right">
          class="text-right"は右寄せ
        </p>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>表示文字列意味</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p class="muted">
          class="muted"は停止？みたいな意味と思われる
        </p>
        <p class="text-warning">
          class="text-warning"は警告
        </p>
        <p class="text-error">
          class="text-error"はエラー
        </p>
        <p class="text-info">
          class="text-info"は情報
        </p>
        <p class="text-success">
          class="text-success"は成功結果
        </p>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

省略文字

一部の文字列を省略、頭文字の略語

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０４</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>省略文字</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <p>
          右の文字は略語です。<abbr title="パーソナルコンピュータ">パソコン</abbr>
        </p>
        <p>
          右の文字は頭文字を設定<abbr title="HyperText Markup Language">HTML</abbr>
        </p>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

住所

住所や電話番号、メールアドレスなど

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０５</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>住所</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <address>
          <strong>ほげほげ</strong><br>
          福岡県　田中市　松本町１－２－３<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
 
        <address>
          <strong>テスト　一郎</strong><br>
          <a href="mailto:#">testichirou@example.com</a>
        </address>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 
 

引用

引用文字列

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０６</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>引用</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <blockquote>
          <p>これは引用文字のテスト１です。</p>
        </blockquote>
        <blockquote>
          <p>これは引用文字のテスト２です。</p>
          <small>補足の文字かな？ <cite title="まうすを乗せたよ">ここにマウスを乗せると？</cite></small>
        </blockquote>
        <blockquote class="pull-right">
          <p>これは引用文字のテスト３です。右寄せになるよ</p>
          <small>補足の文字かな？ <cite title="まうすを乗せたよ">ここにマウスを乗せると？</cite></small>
        </blockquote>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

リスト

リスト内容

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>タイポグラフィ０７</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>リスト</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>マーク付きリスト</h2>
        <ul>
          <li>マーク用リスト１</li>
          <li>マーク用リスト２</li>
          <li>マーク用リスト３</li>
        </ul>
      </div>
      <div class="span12">
        <h2>マーク付きリスト</h2>
        <ol>
          <li>番号用リスト１</li>
          <li>番号用リスト２</li>
          <li>番号用リスト３</li>
        </ol>
      </div>
      <div class="span12">
        <h2>スタイルなしリスト（ul class="unstyled"）</h2>
        <ul class="unstyled">
          <li>スタイルなしリスト１</li>
          <li>スタイルなしリスト２</li>
          <li>スタイルなしリスト３</li>
        </ol>
      </div>
      <div class="span12">
        <h2>インライン（ul class="inline"）</h2>
        <ul class="inline">
          <li>リスト１</li>
          <li>リスト２</li>
          <li>リスト３</li>
        </ul>
      </div>
      <div class="span12">
        <h2>詳細文言</h2>
        <dl>
          <dt>見出しかな？</dt>
          <dd>みだしの内容じゃね</dd>
 
          <dt>テスト</dt>
          <dd>今日はなんか面倒？</dd>
 
          <dt>技術が多いな</dt>
          <dd>時間は有効に使おう</dd>
        </dl>
      </div>
      <div class="span12">
        <h2>詳細文言（class="dl-horizontal"で横並び）</h2>
        <dl class="dl-horizontal">
          <dt>見出しかな？</dt>
          <dd>みだしの内容じゃね</dd>
 
          <dt>テスト</dt>
          <dd>今日はなんか面倒？</dd>
 
          <dt>技術が多いな</dt>
          <dd>時間は有効に使おう</dd>
        </dl>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 


「タイポグラフィ」をウィキ内検索
最終更新：2013年06月05日 21:14