› 日々の泡 ＨＰへの道のり2011年02月03日
ｃｓｓプロパティ：フォント
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ｃｓｓ：プロパティ一覧
フォント
| 項目 | プロパティ | 値 |
|---|---|---|
| フォントの指定(フォントの種類) | font-family | フォント名/一般名(serifなど) |
| フォントサイズ | font-size | 数値＋単位/ %/xx-small/ x-small/ small/ medium/ largex-large/ xx-large/ larger/ smaller |
| 文字の太さの指定（文字列の太さ) | font-weight | 100~900/ bold /bolder/ lighter/ normal |
| 行送りの調整（行間隔） | line-height | 数値＋単位/ noemal |
| 斜体の設定 | font-style | normal/ italic/ oblique |
| 文字属性の一括指定 | font | background-colorの値background-imageの値background-repeatの値background-positionの値 |
2011年02月01日
サーティファイ テキスト
ｃｓｓ：プロパティ一覧
テキスト
- 文字色の指定：color（#ffffff/ red()/ 色名 ）
- 水平方向位置：text-align（left/ center/ right/ justify）
- 文字装飾：text-decoration（nuderline/ line-through/ none）
- インデント：text-indent（数値＋単位/ % ）
- 垂直方向位置：vetical-alifn（baseline/ sub/ super(インライン））（baseline/ top/ bottom/ middle(セル)）
- 大文字・小文字：text-transform（capitalize/ uppercase/ lowercase/ none）
- 文字間隔：letter-spacing（数値＋単位/ normal）
- 空白の扱い：white-space（normal/ pre/ nowrap）
- 行送りの調整（行間隔）：line-height（数値＋単位/ %/ normal ）
2011年02月01日
アンケートなど。
＜p>名前＜input type="text" name="shimei " size="20" maxlength="10">
性別＜input type="radio" name="seibetu" value="man">男性
＜input type="radio" name="seibetu" value="woman">女性
＜input type="checkbox" name="pamphlet" value="syoshin">初心者
＜input type="checkbox" name="pamphlet" value="net">インターネット
＜input type="checkbox" name="pamphlet" value="hyou">表
＜/p>
とすると
名前
性別男性 女性
初心者
インターネット
表
となります。
今度もうちょっとキレイにまとめよう。
2011年01月28日
フォントについて（いろいろ編）。
いろいろとフォントのなにかしらを変えていきたいと
思いまーす！
大きめ文字普通の文字と＜big>大きめの文字だよー＜/big>
としたら
普通の文字と大きめの文字だよー
となるケド‥分かりずらいなー
普通の文字と大きめの文字だよー
小さめ文字普通の文字と＜small>小さめの文字だよー＜/small>
とすると
普通の文字と小さめの文字だよー
上付き文字と下付き文字人生＜sup>山＜/sup>あり＜sub>谷＜/sub>あり
とすると
人生山あり谷あり
太字＜b>太い＜/b>幹の木
とすると
太い幹の木
斜体文字＜i>ナナメ＜/i>に傾いている
とすると
ナナメに傾いている
強い強調（太字）より強い＜Strong>強調＜/strong>
とすると
より強い強調
強い強調（斜体）より強い＜em>強調＜/em>
とすると
より強い強調
下線ここに＜u>注目！＜/u>
とすると
ここに注目！
取り消し線＜s>間違えたー＜/s>
とすると
等幅いつもどおりの幅でおんなじくらいの幅で
とすると
いつもどおりの幅でおんなじくらいの幅で
※赤文字は分かりやすくするために設定しています。
2011年01月28日
フォントについて（色編）。
では今度は色をいじってみましょーう！
＜font color="#0000ff">青＜/font>
＜font color="#ff0000">赤＜/font>
＜font color="#ffff00">黄色＜/font>
＜font color="#99ff00">緑＜/font>
＜font color="">#ff3300>オレンジ＜/font>
としたら
青
赤
黄色
緑
オレンジ
となります！
◎ちょっと応用！
フォントサイズと色を変えてみましょー！
＜font size="5" color="#ff3300">サイズは５、色はオレンジ！＜/font>
とすれば
サイズは５、色はオレンジ！
となります！
＜font color="#0000ff">青＜/font>
＜font color="#ff0000">赤＜/font>
＜font color="#ffff00">黄色＜/font>
＜font color="#99ff00">緑＜/font>
＜font color="">#ff3300>オレンジ＜/font>
としたら
青
赤
黄色
緑
オレンジ
となります！
◎ちょっと応用！
フォントサイズと色を変えてみましょー！
＜font size="5" color="#ff3300">サイズは５、色はオレンジ！＜/font>
とすれば
サイズは５、色はオレンジ！
となります！
2011年01月28日
フォントについて（サイズ編）。
■ フォントタグのサイズの指定範囲は、｢1から7｣です。
＜font size="1">１＜/font size="1">
＜font size="2">２＜/font size="2">
＜font size="3">３＜/font size="3">
＜font size="4">４＜/font size="4">
＜font size="5">５＜/font size="5">
＜font size="6">６＜/font size="6">
＜font size="7">７＜/font size="7">
としたら
１２３４５６７
となります！
フォントタグの大きさ最小値は1、最大値は7です。
1～7の数字ではなく、-3～+3でも指定可能です。
＜font size="1">１＜/font size="1">
＜font size="2">２＜/font size="2">
＜font size="3">３＜/font size="3">
＜font size="4">４＜/font size="4">
＜font size="5">５＜/font size="5">
＜font size="6">６＜/font size="6">
＜font size="7">７＜/font size="7">
としたら
１２３４５６７
となります！
フォントタグの大きさ最小値は1、最大値は7です。
1～7の数字ではなく、-3～+3でも指定可能です。
2011年01月28日
見出しなどについて。
◆見出しはh1～h6のレベルがあります。
◆h1が一番大きなレベルで、数字が小さくなるにつれて
見出しのレベルが下がります。
ｅｘ
h1：ページ全体の大見出し
h2：章の見出し
h3：節の見出し
※基本的にh1要素は１ページに１度しか使いません！
練習
＜h1>見出し＜/h1>
＜h2>見出し＜/h2>
＜h3>見出し＜/h3>
＜h4>見出し＜/h4>
＜h5>見出し＜/h5>
＜h6>見出し＜/h6>
としたら
見出し
見出し
見出し
見出し
見出し
見出し
となるわけです！
2011年01月28日
ＨＴＭＬ基礎構造。
＜html>
＜head>
＜/head>
＜body>
内容
＜body>
＜/html>
■html要素 ～
HTML文書の最上位に位置する要素（ルート要素）です。この要素は、DOCTYPE宣言のすぐ後に配置します。
■head要素 ～
文書のヘッダを示す要素です。この要素の内容は、ブラウザの画面上には表示されません。主に、title要素、meta要素、link要素などをこの要素内に配置します。
■body要素 ～
文書の本体を示す要素です。この要素の内容が、ブラウザの画面上に表示されることになります。
こんなカンジ
参照：http://www.tagindex.com/html_tag/page/html.html
＜head>
＜/head>
＜body>
内容
＜body>
＜/html>
■html要素 ～
HTML文書の最上位に位置する要素（ルート要素）です。この要素は、DOCTYPE宣言のすぐ後に配置します。
■head要素 ～
文書のヘッダを示す要素です。この要素の内容は、ブラウザの画面上には表示されません。主に、title要素、meta要素、link要素などをこの要素内に配置します。
■body要素
文書の本体を示す要素です。この要素の内容が、ブラウザの画面上に表示されることになります。
こんなカンジ
参照：http://www.tagindex.com/html_tag/page/html.html
2011年01月28日
はじめます！
せっかく勉強しているんだから、
なぁなぁになってしまっては
いけないな、
と思って復習も兼ねて
ＨＰ作成に向けてのアレコレを
つづっていくことにしました！
目指せ！
卒業までに自分のＨＰをつくるぞ！
えいえいおー！
宜しくおねがいします。
なぁなぁになってしまっては
いけないな、
と思って復習も兼ねて
ＨＰ作成に向けてのアレコレを
つづっていくことにしました！
目指せ！
卒業までに自分のＨＰをつくるぞ！
えいえいおー！
宜しくおねがいします。
