HTML、CSSを使って黒板風の囲いを作る方法

ブログやサイトを作っていて、

「この部分はアンダーラインとかじゃなくてもっとしっかり目立たせたい」

ってことがありますよね。

 

そんな時に便利な黒板風の囲いをHTML、CSSを編集して作成してみたいと思います。

 

今回の黒板風囲い

文字を囲むHTMLと言えばどのブログサービスにも最初から導入されているのは「blockquote」です。

しかし、これは「引用」をしているという意味があり、Googleにもそういう風に認識されてしまいます。

 

自分の言葉で大事なポイントを書きたい場合は、これは使わない方がベターです。

 

今回の囲いには「blockquote」は使っていません。

黒板風囲いのHTMLとCSS

うんちくを披露したところで、さっそく作成方法を見ていきましょう。

完成図はこんな感じになります。↓

大事なポイント

自信がないなら絶対にコピペ

コピペは悪いことではない。

黒板風囲いのHTML

黒板風囲いのHTMLはこれです。

解説

今回使っているのは、「div要素」というものです。

<div></div>で囲んだ部分は改行され、色んな修飾をすることができるようになります。

さらに、<div class="kokubann">でdiv要素にクラス名をつけています。要するに名前を付けてるんです。divの後に半角スペースを空けて書きます。＝のあとのクラス名は「”　”」これで囲んでください。SHIFT+2で出てきます。

 

これで、クラス名kokubanにだけCSSを適用できるようになりました。

※もちろん、クラス名はkokubanじゃなくてもOK。juyouとかkokとかなんでもいいです。

黒板風囲いのCSS

さっきクラス名をつけたdiv要素に飾り付けをしていきます。

僕が使っているのはこれです。自分のCSS編集画面にコピペしましょう。

※クラス名を変更した人は.kokubanの部分をそれに変更してください。クラス名の前に.(半角ドット)を付け加えればOK。

これをCSSに挿入することで、<div class="kokuban"></div>で囲まれた部分が黒板のようになるということですね！

内容を１つ１つ解説すると長文になりそうなので、気になる人は調べてみてください。（投げやり）

 

HTML、CSSで黒板風の囲いを作ってみて

どうですか？

意味は分からなくても使いたいというだけならコピペですぐに使うことができます。

コピペのまま使ってみて何かしら変更したい部分が出てきた時に中身を調べてみるといいかもしれません。

色を変えたいとか

文字を大きくしたいとか

 

もし意味を説明してほしい問いコメントが1件でも着いたら解説の記事を書きたいと思います。

 

こんな感じ！

カッパ

ネットビジネス

Posted by カッパ