【HTML】【css】本当にコピペでOK！私の過去の記事の見出しの作り方を紹介します

はい、また新しい方面に手を出してます。

中途半端ですがぜひお付き合いください。

最近ブログでHTMLでわかりやすい見出しを作るようになりました。

その時にネットで調べて、「コピペでOK」という記事を何度となく見てきたのですが、ほとんどコピペでOKだった試しがありません。

なぜかというと、cssをHTMLに埋め込むには何通りか方法があって、そのための要素を外して記載しているからです。

私なんかは初心者過ぎてそもそもcssを埋め込むって何？？となってしまい苦労しました。

というわけで、私の書いているものだけでも、リアルにコピペできる見出しを紹介します。

・文字の左の線＋塗りつぶしの枠

【ゲーム】Airsとは？で使った見出しです。

例えばこんな感じ。

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span></span></span></div>

これがこうなります。↓

あいうえお

上のソースをそのままコピペして、メモ帳でhtml拡張子で保存してみましたが、とりあえず２０１８年現在のHTML5ではきちんと表示されるようです。

ちなみに色やら幅やら文字サイズやらは適当というか私の好みなので弄ってみてください。

例えば<span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;"></span>を取り除いて、

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;">あいうえお</span></span></div>

とすると、下のようになります。

あいうえお

文字が大きくなって余裕がなくなりますね。


あとは、実用的ではないですがこんなのはどうでしょう。

<div id="title2" large="" quot="" sans-serif="" style="background-color: #e0eeee; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 5em; color: orange; padding-top: 0.3em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span></span></span></div>

border-left-widthが何を表しているのか、一目でわかりますね。↓

あいうえお

・左＆下に線を引く

【ゲーム】【ＲＰＧ】ヒュプノノーツ１　攻略　前半他でつかいました。


<div id="title2" large="" quot="" sans-serif="" style="border-bottom-color: rgb(250, 200, 200); border-bottom-style: solid; border-bottom-width: 0.2em; border-left-color: rgb(254, 200, 155); border-left-style: solid; border-left-width: 0.5em; color: orange; padding-left: 0.2em; padding-top: 0.4em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 30px;"><span style="color: #666666; font-family: &quot;verdana&quot; , sans-serif; font-size: 26px;">あいうえお</span>
</span></span></div>

こんな感じ↓

あいうえお

シンプルで気に入ってます。


・下に点線を引く

上の見出しの中で、さらに小見出しとして使っています。

<div id="title2" large="" quot="" sans-serif="" style="border-bottom-color: rgb(250, 200, 200); border-bottom-style: dotted; border-bottom-width: 0.2em; padding-top: 0.4em;" verdana="">
<span style="font-family: &quot;verdana&quot; , sans-serif;"> <span style="font-size: 26px;"><span style="color: #666666; font-family: &quot;verdana&quot; , sans-serif; font-size: 20px;">あいうえお</span>
</span></span></div>

こうなります↓

あいうえお

超さりげないですね。

たくさん使っても変に主張しすぎないので便利です。


・最後に

実際のブログ作成では文字サイズはmediumとかlargeとかx-largeとか使っているのですが、今回はpxに統一しました。

そこは統一したのに、逆に色の書き方は統一していません笑

rgb(x,y,z)みたいな書き方は最近初めて知ったので残してみました。