■ ヒントだよ！HTML & CSS ■

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例

    CSS基本     その1     その2     その3     その4     その5     その6

■ CSS その2

• {font-familyフォント-ファミリ-:ファミリー名,一般フォント名;}、フォントを指定する。

• {font-styleフォント-スタイル:スタイル、フォントのスタイルを設定する。
  ※スタイル：
  • nomal=標準フォント。
  • italic=イタリック体。 タグ<i>～</i>でいいのでは？
  • oblique=斜体字(角度指定できる)、oblique 30deg。
  • 例を表示する

• @font-faceアットマークフォント-フェイス{font-familyフォント-ファミリー:ファミリー名;   src:フォントのURL/名前 フォントの形式;  記述子;}、
  独自フォントの利用を指定する。
• {font-variant-capsフォント-バリアント-キャフス:使用方法;}、スモールキャピタルの使用を指定する。
  タグ><small>～</smal>でいいのでは？ → font-variant-capsの使用例を表示する。
• {font-variant-numericフォント-バリアント-ニューメリック:数字の幅 分数の表記;}、省略。
• {font-variant-alternatesフォント-バリアント-オルタネーツ:使用方法;}、省略。
• {font-variant-ligaturesフォント-バリアント-リガーチャーズ:全般 一般的な合字 任意の合字 古典的な合字 前後関係に依存する字体;}、省略。
• {font-variant-east-asianフォント-バリアント-イースト-アジアン:字体の種類 字体の幅;}、省略。
• {font-variantフォント-バリアント:caps numeric alternates ligatures east-asian;}、
  フォントの形状をまとめて指定する。 → font-variantの使用例を表示する

• {font-sizeフォント-サイズ:サイズ;}、フォントサイズを指定する。
  →例を表示する

• {font-size-adjustフォント-サイズ-アジアスト:サイズ;}、省略。
• {font-weightフォント-ウェイト:太さ;}、フォントの太さを指定する。
  タグ<b>～</b>でいいのでは？ →例を表示する
• {ling-heightライン-ハイト:高さ;}、行の高さを指定する。

• {fontフォント:-style -variant -weight -size -line-height -family;}、
  フォントの行の高さをまとめて指定する。
• {font-stretchフォント-ストレッチ:幅;}、フォントを幅を指定する。
• {font-kerningフォント-カーニング:表示方法;}、省略。
• {font-feature-settingsフォント-フューチャ-セッテイング:機能 有効・無効;}、省略。

• {font-transformフォント-トランスフォーム:表示方法;}、省略。

• {text-alignテキスト-アライン:揃え位置;}、文書の揃え位置を指定する。
  ※揃え位置
  • start 行の開始位置に揃える。
  • end 行の終了位置に揃える。
  • left 左揃え
  • center 中央揃い
  • right 右揃え
  • justify 最終行のぞき均等に割り付ける
  • match-parnet 親要素の値を継承する
  • justify-all 最終行も含め均等に割り付ける

• {text-justifyテキスト-ジャスティファイ:形式;}、文章の均等割り付けの形式を指定する。。
• {text-aign-lastテキスト-アライン-ラスト:揃え位置;}、省略。
• {text-overflowテキスト-オーバーフォロ:表示方法;}、省略。

• {vertical-alignヴァーティカル-アライン:揃え位置;}、行内やセル内の縦方向の揃え位置を指定する。
  ※揃え位置
  • baseline = 親要素のベールラインの位置。
  • sub = 親要素の上付き文字位置。
  • super = 親要素の下付き位置。
  • top = 親要素や先頭セルの上端に揃う。
  • middle = 半角英字の「x」の中央高さに要素が揃う。
  • bottom = 親要素や先頭セルの下端に揃う。
  • text-top = 親要素のフォントと要素の上端が揃う。
  • text-bottom = 親要素のファントと要素の下端が揃う。
  • 数値+単位 = ベールラインからの移動距離。ベースラインが0で正の値なら上、負の値なら下。
  • %値 = %値は要素の行の割合になる。

• {text-indentテキスト-インデント:字下げ位置;}、省略。
• {letter-spacingレター-スペーシング:間隔;}、文字の間隔を指定する。
  ※間隔 = nomal(なし)、数値+単位。
• {word-spacingワード-スペーシング:間隔;}、単語の間隔を指定する。
  ※間隔 = nomal(なし)、数値+単位。
• {tab-sizeタブ-サイズ:幅;}、タブ叔父の表示幅を指定する。
  ※幅 = nomal(なし)、数値+単位。
• {white-spaceホワイト-スペース:表示方法;}、スペース、タブ、改行の表示方法を指定する。
  表示方法 = 省略。
• {word-breakワード-ブレイク:改行方法;}、文章の改行方法を指定する。
• {line-breakライン-ブレイク:処理方法;}、改行の禁則処理を指定する。
• {overflow-wrapオーバーフローラップ:改行方法;}、省略。
• {hyphensハイフンス:改行方法;}、ハイフネーションの方法を指定する。。
• {directionディレクション:方向;}、文字の表示する方向を指定する。
• {writing-modeライティング-モード:書字方向;}、縦書き、または横書きを指定する。
• {text-combine-uprightテキスト-コンバイン-アップライト:表示不法;}、縦中横を指定する。
• {text-orientationテキスト-オリエンテーション:書字方向;}、縦が記事の文字の向きを指定する。

• {text-decoration-lineテキスト-デコレーション-ライン:位置;}、傍線の位置を指定する。
  →傍線の例を表示する。
• {text-decoration-colorテキスト-デコレーション-カラー:色;}、傍線の色を指定する。
• {text-decoration-styleテキスト-デコレーション-スタイル:スタイル;}、傍線のスタイルを指定する。
  →傍線の例を表示する。
• {text-decoration-thicknessテキスト-デコレーション-シックネス:太さ;}、傍線の太さを指定する。
• {text-decorationテキスト-デコレーション:-line -style -color -thickness;}、傍線をまとめて指定する。

• {text－underline-positionテキスト-アンダーライン-ポジション:位置;}、下線の位置をしていする。
  <u&t;～</u>で良いのではないか？

• {text-emphasis-styleテキスト-ファシス-スタイル:スタイル形;}、傍点のスタイルを指定する。
  →傍点の例を表示する。
• {text-emphasis-colorテキスト-エンファンス-カラー:色;}、傍点の色を指定する。
• {text-emphasisテキスト-エンファシス:-stye -color;}、傍点をまとめて指定する。
• {text-emphasis-positionテキスト-エンファンス-ポジション:位置;}、傍点の位置を指定する。
  →例:傍点の位置を指定を見る。

• {text-shadowテキスト-シャドウ:オフセット ぼかし半径 色;}、文字の影を指定する。
  ※オフセット = none / 数値+単位。
  ※ぼかし半径 = 数値+単位。
  ※色 = 16進数など。
  ※指定の例 = text-shadow : 水平方向 垂直方向 ぼかし半径 色 ;
  → text-shadow : 2px 2px 2px #ff3399 ;

• {list-style-imageリスト-スタイル-イメージ:画像;}、リストマーカーの画像を指定する。
• {list-style-positionリスト-スタイル-ポジション:位置;}、リストマーカの位置を指定する。。
• {list-style-typeリスト-スタイル-タイプ:スタイル;}、リストマーカのスタイルを指定する。
  →リストマーカのスタイル指定の例を表示する。
• {list-styleリスト-スタイル:-type -position -image;}、リストマーカーをまとめて指定する。

• {colorカラー:値;}、文字の色を指定する。
  →色指定を参照のこと。

    CSS基本     その1     その2     その3     その4     その5     その6

    topへ     序     HTML     CSS     表計算利用     ファイル     色指定     ソフト/機材     参考書など     単位     記号の例