コピペでCSS！は、「深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ！」という内容です。CSSを考えると頭が痛い！極力考えたくない！という方におススメです。
お好きな色やサイズに変更し、必要があればクラス名も変えてご使用ください。
コードはどこに書くの？という方、うまく反映されないなぁという方は、以下をどうぞ。
 |
どういうもののこと？ |
|---|---|
 |
どんな時に発生しているのか、 |
相変わらず浅く解説しておりますので、よければ参考にしてください。
使いすぎ厳禁！
目立たせたい時に役立つ囲み枠たち
当サイトが実際に使用している囲み枠（box線）です。
派手な囲み枠は控え、あくまでもテキストを補うデザインを意識して揃えています。
とは言っても1ページ内で使いすぎると逆に読み辛くなるので、構成に気を配りつつお役立てください。
～.cssに記述するためのコードを掲載しているので、「投稿」への記述は下記を参考にしてください。
style.cssにコピペして…
.box-6 { 以下省略
「投稿」へ書くと…（HTML）
<div class=”box-6″>こんな感じで「投稿」へ入力してください</div>
以下のようにWebサイトで表示されます
▼ 線だけの囲み枠
▼ 塗りつぶし囲み枠
▼ 角丸・塗りつぶし囲み枠
▼ 左右丸・塗りつぶし囲み枠
▼ 歪んだ線の囲み枠
▼ 二重線の囲み枠
▼ 吹き出し囲み枠
↑長いコードを見ると「ややこしそう…」と思いますが、まずは全てコピペ。
その後のアレンジは、Developer Toolsで様子を見ながら取り掛かると分かりやすいですよ！
▼ タイトル付きの囲み枠 ※
根はネガティブです
※ タイトル付きの囲み枠は、通常のように囲うだけでなく、タイトルのコードも記述する必要があります。
ひとまず全てをstyle.cssにコピペして…
.box-8 { ～以下省略
「投稿」（HTML）には以下のように記述します。
<div class=”box-8″><span class=”box-title”>実は…</span><p>根はネガティブです</p></div>
以上です。
ここでワンポイント！
囲み枠を横幅いっぱいに広げたくない時は、コピペするコードにdisplay:inline-block;を追加。
逆に横幅いっぱいに広げたい時は記述なしでOKです。
囲み枠の外周に余白を作りたい時は、コピペするコードにmargin:1%;を追加。
1%の部分が余白の幅になるので、お好きな数字に変更してください。
囲み枠線は色や太さを変えるだけで、目立ち具合が大幅に変わります。
ぜひDeveloper Toolsを活用して、状態を見ながらカスタマイズしてみてください。
次回は少し変わったオシャレ囲み枠をご紹介！
もちろんシンプルで文章の邪魔をしないデザインばかりですので、良ければどうぞ。
コピペで
下線
コピペで
囲み枠2
ご覧いただきありがとうございました！
