フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

vueのいろいろ

HTML5のリリースで「装飾はCSS」という方針から、<s><center>というタグが消え去っていった…
それを、cssで復活させてみようというものである。

まず、廃止された装飾用のタグを調べる

<s><u><i><center><big><tt><small>
こんなところでしょうか。まだまだ、装飾用のタグがあればコメントでお知らせください。

cssに直そう!

<s>

cssにはtext-decorationがあるので、、、

s{
    text-decoration:overline; /*このこ結構使える*/
}

<u>

sの応用

u{
    text-decoration:underline;
}

<i>

font-styleこれ使おう。

i{
    font-style:oblique; 
}

<center>

cssにはぴったりの属性は無いんですが、、、
組み合わせて使いますかね。

center{
    text-align:center; /*インラインしか使えない*/
    margin:auto; /*荒業*/
}

<big>

これはキホンのキホン。

big{
    font-size:1.5em; /*ここはご自由に*/
}

<small>

bigと99%同じ

small{
    font-size:0.5em; /*ここはご自由に*/
}

<tt>

等幅にするには、、、

tt{
    font-family:monospace;
}

ただし!!!!
monospaceだと、クライアントによってフォントが変わる。
その上、そのフォントが、等幅じゃなかったり、、、

ちなみに、私のは、MS Pゴシックになってました。普通のと変わらんやん

なので、、、

font-family:"Consolas";

とか個別にやってもいいかも

こぴぺ用

復活.css
s{
    text-decoration:overline;
}
u{
    text-decoration:underline;
}
i{
    font-style:oblique; 
}
center{
    text-align:center;
    margin:auto;
}
big{
    font-size:1.5em;
}
small{
    font-size:0.5em;
}
tt{
    font-family:monospace; /*ここの設定は個別にやる必要アリ*/
}

まあ、こんな感じですかね。

最後まで読んでいただきありがとうございました。

[紹介元] CSSタグが付けられた新着投稿 – Qiita vueのいろいろ

コメント

記事に戻る

コメントを残す