CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【在宅ワーク】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 2 - フォントの指定

font-family: フォント名, フォント名, フォント名,・・・

    ・serif(明朝系)
    ・sans-serif(ゴシック系)
    ・cursive(草書体、筆記体系)
    ・fantasy(装飾的な書体)
    ・monospace(等幅フォント)

 

font-familyプロパティは、フォントを指定します。
フォント名を複数使用したい時には、「 , 」で区切り指定することができます。
その場合、左から順に設定されたフォントが、ユーザーの環境に合わせて適用されます。
フォント名の中にスペースがある場合には、その前後に「 " 」か「 ' 」で囲うようにします。

以下のサンプル表示は、文字サイズ20ptです。
お使いの環境によっては、ファミリーフォントや書体を指定してもデフォルトで表示される場合があります。

 

◆font-family(ファミリーフォントから選ぶ)

【 デフォルト表示 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; ">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; ">
あいうえお
</span>

 

【 明朝体系 / serif 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:serif">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:serif">
あいうえお
</span>

 

【 ゴシック系 / sans-serif 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:sans-serif">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:sans-serif">
あいうえお
</span>

 

【筆記体系 / cursive 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:cursive">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:cursive">
あいうえお
</span>

 

【装飾系 / fantasy 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:fantasy">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:fantasy">
あいうえお
</span>

 

【等幅系 /monospace 】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:monospace">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:monospace">
あいうえお
</span>

 

◆書体(書体から選ぶ)

【MS 明朝】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:MS 明朝">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:MS 明朝">
あいうえお
</span>

 

【MS P明朝】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:MS P明朝">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:MS P明朝">
あいうえお
</span>

 

【MS ゴシック】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:MS ゴシック">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:MS ゴシック">
あいうえお
</span>

 

【MS Pゴシック】

ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえお

<span style="font-size:20px; font-family:MS Pゴシック">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
<span style="font-size:20px; font-family:MS Pゴシック">
あいうえお
</span>

 

【Arial】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Arial">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Century】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Century">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Century Gothic】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Century Gothic">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Comic Sans MS】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Comic Sans MS">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Courier】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Courier">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Courier New】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Courier New">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Impact】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Impact">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Times New Roman】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Times New Roman">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

【Verdana】

ABCDEFGHIJKLMNOPQRSTUVWXYZ

<span style="font-size:20px; font-family:Verdana">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.