コピペでCSS!
 シンプルで無難な囲み枠編

にいどめ

コピペでCSS!は、「深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ!」という内容です。CSSを考えると頭が痛い!極力考えたくない!という方におススメです。

お好きな色やサイズに変更し、必要があればクラス名も変えてご使用ください。

コードはどこに書くの?という方、うまく反映されないなぁという方は、以下をどうぞ。

CSSをマイルドにお伝え!

どういうもののこと?
書き方やクラス名って?…etc

反映されない原因は何?

どんな時に発生しているのか、
経験した原因を6つご紹介

相変わらず浅く解説しておりますので、よければ参考にしてください。




使いすぎ厳禁!

目立たせたい時に役立つ囲み枠たち

当サイトが実際に使用している囲み枠(box線)です。
派手な囲み枠は控え、あくまでもテキストを補うデザインを意識して揃えています。

とは言っても1ページ内で使いすぎると逆に読み辛くなるので、構成に気を配りつつお役立てください。

使い方:

~.cssに記述するためのコードを掲載しているので、「投稿」への記述は下記を参考にしてください。

style.cssにコピペして…
.box-6 { 以下省略
「投稿」へ書くと…(HTML)
<div class=”box-6″>こんな感じで「投稿」へ入力してください</div>
以下のようにWebサイトで表示されます

こんな感じで「投稿」へ入力してください

▼ 線だけの囲み枠

当サイトAnything’s Possibleは…

▼ 塗りつぶし囲み枠

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を活用して、状態を見ながらカスタマイズしてみてください。

次回は少し変わったオシャレ囲み枠をご紹介!
もちろんシンプルで文章の邪魔をしないデザインばかりですので、良ければどうぞ。




ご覧いただきありがとうございました!