CSSガイド EX

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


【IT業界の転職】

 

コンテンツメニュー

 ◆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-size: サイズ

    数字の単位、%、smaller、larger
    xx-small、x-small、medium、large、x-large、xx-large

 

font-sizeプロパティは、フォントのサイズを指定します。
%を指定した場合には、指定した要素の親であるフォントサイズに対する割合になります。
smaller、largerは、親の要素であるフォントサイズに対して1段階小さい文字と1段階大きい文字になります。
mediumは、標準文字サイズとなり、xx-small~xx-largeで段階的にサイズを指定することができます。

 

【index2_11_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>フォントサイズ - CSSガイドEX</title>
<style type="text/css">
<!--
body{ background: #ffffff; }
p.em{
  color:#000000;
  background:#ffffff;
  font-style:normal;
}
.pt9{ font-size:9pt; }
.pt12{ font-size:12pt; }
.pt16{ font-size:16pt; }
.smaller{ font-size:smaller; }
.larger{ font-size:larger; }
.l{ font-size:large; }
.xl{ font-size:x-large; }
.xxl{ font-size:xx-large; }
.s{ font-size:small; }
.xs{ font-size:x-small; }
.xxs{ font-size:xx-small; }
.p080{ font-size:80%; }
.p100{ font-size:100%; }
.p120{ font-size:120%; }

-->
</style>
</head>
<body>
<p class="em">この文字サイズが、標準です。</p>
<ul>
<li class="pt9">9ptの文字サイズ</li>
<li class="pt12">12ptの文字サイズ</li>
<li class="pt16">16ptの文字サイズ</li>
</ul>
<ul>
<li class="smaller">smallerの文字サイズ</li>
<li class="larger">largerの文字サイズ</li>
</ul>
<ul>
<li class="s">smallの文字サイズ</li>
<li class="xs">x-smallの文字サイズ</li>
<li class="xxs">xx-smallの文字サイズ</li>
</ul>
<ul>
<li class="l">largeの文字サイズ</li>
<li class="xl">x-largeの文字サイズ</li>
<li class="xxl">xx-largeの文字サイズ</li>
</ul>
<ul>
<li class="p080">80%の文字サイズ</li>
<li class="p100">100%の文字サイズ</li>
<li class="p120">120%の文字サイズ</li>
</ul>
</body>
</html>

 

表示は、こちらのサンプルから確認できます。

 

 

 


 

忍者AdMax

 

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

▲UP

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