文字(フォントサイズ、色)、記号 - HTML/CSS

更新:

文字、記号、特殊文字、環境依存文字(機種依存文字)。

文字(フォントサイズ、色)、記号

  1. フォント
    フォントの指定。
    <font size="7" color="#ff0000" face="Century,Verdana">ABCD</font>
    
    ABCD
    
    • size:文字サイズ。1~7まで。数字が大きいほど大きい文字。
    • color:文字の色。0~Fまでの16進で書くか、bgcolor="blue" など色名で書く。
    • face:文字の書体。カンマで区切って複数の書体を指定できる。
      閲覧者の環境に該当フォントがなければ無効。
      1番目から順に一致するものが適用される。
    • このタグはHTML5で廃止となった。

    CSSの場合。
    <span style="font-size:30pt;
    	color:#ff0000;
    	font-family:Century,Verdana;
    	">ABCD</span>
    
    ABCD
    
    • font-size:文字サイズ。任意の単位を指定する。
      px ピクセル・・・ドット数
      pt ポイント・・・(1 pt = 1/72 in)
      cm センチメートル
      mm ミリメートル
      in インチ・・・(1 in = 2.54 cm)
      pc パイカ・・・(1 pc = 12 pt)
      em 使用しているフォントの縦の長さ。「M」の縦の長さに相当。
      ex 使用しているフォントの縦の長さの1/2。「x」の縦の長さに相当。
      % 元の大きさの何%かを表す
      
      以下のような大きさで指定もできる。
      xx-small
      x-small
      small
      medium
      large
      x-large
      xx-large
      
    • color:文字の色。
    • font-family:文字の書体。
  2. 見出し文字
    <h1 align="center"></h1>
    
    

    ABCD

    • 見出しの文字。1~6まである。1が最大、6が最小。
    • 文字が太字になり、文字の下に段落が1段空く。
    • align:配置指定。right、center、left。

    CSSの場合。
    <h1 style="text-align:center;">ABCD</h1>
    
    

    ABCD

  3. 文字修飾
    文字を修飾する。
    <b>太字</b> 太字
    <i>斜体</i> 斜体
    <u>アンダーライン</u> アンダーライン
    <s>取り消し線</s> <strike>取り消し線</strike> 取り消し線
    
    上付き<sup>1</sup> 上付き1
    
    下付き<sub></sub> 下付き2
    
    <tt>等幅</tt> 等幅
    <cite>引用</cite> 引用
    <code>CODE調</code> CODE調
    <kbd>Keyboard入力文字</kbd> Keyboard入力文字
    <samp>サンプルSample</samp> サンプルSample
    <var>変数調</var> 変数調
    <dfn>定義調</dfn> 定義調
    <em>強調</em> 強調
    <strong>強調</strong> 強調
    <big>大きい文字</big> 大きい文字
    <small>小さい文字</small> 小さい文字
    
    CSSの場合。
    <span style="font-weight:bold;
    	font-style:italic;
    	text-decoration:underline;
    	text-transform:capitalize;
    	">japan</span>
    
    japan
    
    • font-weight:文字の太さ。100~900の数値で太さを指定することもできる。
      lighter:細字
      normal:標準
      bold:太字
      bolder:さらに太字
      
    • font-style:斜体
      normal:標準
      italic:斜体
      
    • text-decoration:線
      none:線なし
      underline:アンダーライン
      line-through:取り消し線
      
    • text-transform:アルファベットの大文字、小文字
      none:ノーマル
      lowercase:アルファベットを小文字に
      uppercase:アルファベットを大文字に
      capitalize:先頭文字のみ大文字(元が小文字の場合)
      
  4. テキスト表示
    テキストエディタなどで書いたように表示される。
    改行やスペース、タブなどが反映される。
    <pre></pre>
    
  5. 記号、特殊文字、環境依存文字(機種依存文字)
    主な特殊文字や記号。
    &lt; または &#60; <(不等号小なり)。タグとして認識されるのを回避するために利用。
    &gt; または &#62; >(不等号大なり)。同上
    &copy; または &#169; © (C)マーク。
    &trade; または &#153; ™ TMマーク。
    &reg; または &#174; ® (R)マーク。
    &sect; または &#167; § §マーク。
    &amp; または &#38; &(アンパサンド)
    &apos; または &#39; '(シングルクオート、アポストロフィー)
    &quot; または &#34; "(ダブルクオート、クォーテーション)
    &nbsp; 半角スペースを追加。追加した分だけスペースができる。
    &spades; ♠ スペード
    &clubs; ♣ クラブ
    &hearts; ♥ ハート
    &diams; ♦ ダイヤ
    &harr; ↔ 両方向矢印(小)
    &hArr; ⇔ 両方向矢印(大)
    &infin; ∞ 無限大
    &ne; ≠ ノットイコール
    
    環境依存文字(機種依存文字)。
    Unicodeには存在し、SJISには存在しない文字は、&# の後にUnicodeの値を書くと文字を表示できる。
    環境によっては表示できないが、どうしても使いたい場合に使用する。
    16進数の場合は &#x の後に数値、10進数の場合は &# の後に数値を書く。
    &#x260F; ☏(16進数の場合)
    &#9743; ☏(10進数の場合)
    
  6. ブリンク(文字点滅)
    文字の点滅効果。
    旧Netscape Navigatorや携帯電話など一部のブラウザのみ有効。
    <blink></blink>
    
  7. マーキー(文字スクロール)
    文字のスクロール効果(マーキー)。
    <marquee bgcolor="#ff0000" direction="right" behavior="scroll" loop="infinite"
    	width="100" height="10" scrollamount="10" scrolldelay="10">
    </marquee>
    
    • bgcolor:背景色。
    • direction:スクロール方向。right、left。
    • behavior:スクロールの仕方(動き方)。scroll、alternate、slide。
    • loop:スクロール回数。数字で指定。永遠に繰り返す場合は、infinite。
    • width、height:縦横サイズ。ピクセル数か%で指定。
    • scrollamount:文字の移動量。
    • scrolldelay:スクロール動作間隔。

このエントリーをはてなブックマークに追加