How to make a website

文字の色・サイズ・スタイルなど

プロパティテキストの指定
color:色指定;文字色の指定をする
font-size:フォントのサイズ指定;文字サイズの指定をする
font-weight:文字の太さの指定文字の太さを指定する
font-style:narmal;標準体にする
font-style:italic;イタリック体にする
font-style:obliqu;斜体にする
font-family:フォントを指定;フォントを指定する
font-variant:small-caps;スモールキャピタルを指定する
font:イタリック体 スモールキャピタル 太さ サイズ 行の高さ フォント;
の順で指定
フォントの設定をひとまとめに行う

文字の装飾・変換。ルビの位置など

プロパティ文字の装飾
text-decoration: none;装飾を表示しない
text-decoration: underline;下線をひく
text-decoration: overline;上線をひく
text-decoration: line-through;取り消し線をひく
text-underline-position: above;テキストの上に線を表示する
text-underline-position: below;テキストの下に線を表示する
text-transform:capitalize;先頭の文字だけ大文字に変換する
text-transform:uppercase;全ての大文字にに変換する
text-transform:lowercvase;全ての大文字にに変換する
ruby-align:auto;
ルビ(ふりがな)の位置を指定する
zoom: 大きさ指定(1を通常サイズとする);文字を拡大する
text-overflow: スタイル指定;
clip(省略符号を表示しない),ellipsis(省略符号を表示する)
領域からはみ出た場合に「...」を表示する

間隔・表示位置...

プロパティ表示位置の指定
text-align: left;表示位置を左寄せに指定する
text-align: cernter;表示位置を中央に指定する
text-align: right;表示位置を右寄せに指定する
text-align: left;表示位置を両端揃えに指定する
line-height: 行の高さを指定; 1を文字の高さとする
行の高さを指定する
text-indent: 数値+単位(em 等)またはパーセント; 1行目の字下げを指定する
letter-spacing: 数値+単位(em 等); 文字の間隔を指定する
word-spacing: 数値+単位(em 等); 単語の間隔を指定する
vertical-align:super;
上付文字
vertical-align:sub;下付文字

改行の扱い

プロパティ改行の仕方を指定する
white-space:nomal;
標準的な折り返し
white-space:nowrap;
自動的な折り返しを禁止する
white-space:pre;
記述した通りの形で表示する
word-break:normal; 英語は単語の区切りで改行、日本語は行末で改行
word-break:break-all;単語の途中であっても改行させる
word-break:keep-all;単語の区切りで改行 (単語の途中では改行させない)
word-wrap: normal; 長い英単語の折り返しをさせない
word-wrap: break-word; 長い英単語の折り返しを指定する
line-break: normal;
厳密な禁則処理を行わない
line-break: strict;
厳密な禁則処理を行う

書字方向


プロパティ要素の前後に内容を追加する
direction:書字方向;
書字方向を指定する
unicode-bidi:Unicodeの指定;
Unicodeの指定する
normal 制御しない (初期値)
embed directionプロパティの指定内容を組み込む
directionプロパティの指定内容で上書きする bidi-override
writing-mode: tb-rl;縦書きを指定する

文字列の追加

プロパティ要素の前後に内容を追加する
content:"文字列"; 指定した文字列を追加する (文字列は引用符で囲む)
content: 画像URL; 指定したURIの画像等を追加する
content:attr(属性名);
指定した属性の値を表示する