うら紙のメモ HTML

[Web][SVG] WebページにSVGの埋め込み方によって、SVGに指定した "fill: currentColor" が有効にならない場合がある。

最近では、FontAwesome のようなWebアイコンフォントをページに組み込むことも多い。
イメージデータはSVGで作られていて、"fill: currentColor;" が指定されていて、ページのスタイルにあった色でアイコンが表示される。

例えば、白背景の場合は黒っぽいアイコンで表示して、黒背景の場合は白っぽいアイコンで表示される。

ただし、SVGの指定の仕方によって"f ill:currentColor;" が有効にならない場合があった。

結論は、
<svg>要素を直接ページに追加する：　OK
<img>要素にファイルパスをしてして読み込む : NG

imgタグで埋め込んだSVGにはCSSが有効にならないようですね。。。

CSSを有効にするライブラリもあるみたいです。
https://pgmemo.tokyo/data/archives/1025.html

Pagetop

[HTML]タグにbgcolorなどの指定は非推奨

<body>タグにbgcolor、text、link、alink、vlinkの属性を指定することで、
背景色や文字色やリンク色の指定をすることができますが、
HTML 4.01では非推奨だったんですね。

属性	効果
bgcolor	文書の背景色
text	文字の基本色
link	未訪問のリンク文字の色
vlink	訪問済みのリンク文字の色
alink	選択中のリンク文字の色

CSSのbackground-color、colorを使用すれば事足りるので、
基本的にはCSSを使用しろということのようですね。

気を付けて使用しないとサポートしないブラウザが増えた時に
痛い目にあいそうですな。

ちなみに、webkitなどではまだサポートはされていそうです。

Pagetop

[HTML] target属性で別ウインドウでページ遷移

HTMLでページ遷移する場合のタグは<A>で、
以下のように指定する。

<A href=""http://memo755.blog.fc2.com/">サンプル１</A>

こう指定すると、
サンプル１
みたいに、リンク表示されて、クリックすると
同一のウインドウでページ遷移が行われる。

だけど、別のウインドウで表示したい場合など
よくあります。

そんなときは、<A>タグにtarget属性を指定してあげる。

<A href=""http://memo755.blog.fc2.com/" target="_blank">サンプル２</A>

これで、新規にウインドウを開いてページ遷移が行われます。
サンプル２

target属性は、新しいウインドウで表示する以外には、Frameタグを使った場合に
役に立ちます。

_self
　⇒現在のフレーム、ウインドウに表示する

_parent
　⇒親（ひとつ上）のフレームに表示する

_top
　⇒フレーム分割を全て解除して全画面で表示する

フレーム名、ウインドウ名
　⇒指定したフレーム、ウインドウに表示する

Pagetop

[HTML] エスケープ文字

Pagetop