コピペでCSS!
シンプルで実用的な囲み枠編

にいどめ

コピペでCSS!は、
深い意味まで考えず、CSSコードを自分仕様にアレンジして使おうぜ!という内容です。

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

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

CSSをマイルドにお伝え!

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

反映されない原因は何?

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

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




差が出る!

見やすくなる囲み枠たち

当サイトが実際に使用している囲み枠(box線)です。

派手なデザインは控え、あくまでもテキストを補う程度のシンプルで実用的なものを掲載しています。

ところかまわず使うと読み辛くなるので、構成に気を配ってお役立てください。

使い方:

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

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

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

▼ Bigカギカッコ

当サイトAnything’s Possibleは…

▼ Bigカッコ

不定期で気ままに…

※こちらはテキストにもデザインを適用させています。
投稿文入力時(HTML)はテキストにもclass指定してください。

使い方:
ひとまず全てをstyle.cssにコピペして…
.redkakko { ~以下省略
「投稿」(HTML)には以下のように記述します。
<div class=”redkakko“><p class=”subtex”>不定期で気ままに…</p></div>

▼ 付箋風(ドッグイヤー風)

まったりと情報を発信しています!

※こちらは付箋を中央寄せしたデザインとなります。

以上です。
ここでワンポイント!

囲み枠を横幅いっぱいに広げたい時は、コピペするコード内にあるdisplay:inline-block;を削除してください。

囲み枠の外周の余白を変更したい時は、コピペするコードのmargin:○% ○%;にある数値を変更します。
この部分が上下・左右の余白幅になるので、お好きな数値でバランスをみてください。

色や太さが違うだけで大きく変わる囲み枠。
いろいろ試して、よりサイトに似合う線種を見つけてくださいね!

次回は空白も作れるヘビロテ間違いナシの段落や改行をご紹介します。




コピペで
段落

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