blender feedly hatena Illustrator jquery palette photoshop pocket mail border-color insert-comment file-download person creative-commons-attribution creative-commons-noderivs creative-commons-noncommercial-us creative-commons-public-domain creative-commons-sharealike creative-commons emoji-happy emoji-neutral emoji-sad magnifying-glass file-o clock-o tag bars desktop quill music folder-open embed2 mail4 google facebook facebook3 twitter twitter3 feed4 wordpress pinterest html5 css3
Web

コピペで簡単!CSSで作る装飾アイディア14個

,
,
モバイルファーストやらフラットデザインやらで、画像で装飾するよりも、チャチャッとCSSで装飾することが多くなりましたよね!というわけで、よく使いそうなもの(じゃないのも混じってますが)をいつでも簡単にコピペできるようにまとめてみました。

目次

CSSで飾りを作るポイント

CSSで飾りを作るのに欠かせないのは、疑似要素とposition、transformの扱い。逆にココさえ押さえておけば、自分なりに色々な飾りが作れると思います!

疑似要素:before & :after

CSS装飾にとっても便利な疑似要素:before & :after。それぞれにcontent:””;を指定することで、親要素に対して擬似的に要素を作り出します(そのままですね…)。これを使えば最高2つの要素が飾りとして機能するので、要素そのものの他に罫線や図形を加えて華やかにすることができるようになります。 疑似要素の生成

positionは親要素にrelative、疑似要素にabsolute

作り出した疑似要素は、親要素に対して絶対配置(absolute)を指定して位置を調整することが多いです。 このとき親要素にrelative指定をして、絶対配置の起点を親要素にすることを忘れないようにしましょう。うっかり指定しないと、疑似要素がトンチンカンな場所に飛んでいって「できない…」と悩む原因になります。 positionの設定

transformでバリエーションを

ただの四角でも、transform-rotateで菱形になったり、矢印を作れたりします。あとは他の要素との組み合わせ方で色々な演出ができるので、表現の幅が広がりますよ! transform

見出し系の装飾

それではさっそく、見出しの装飾から!

クラシック系二重線

テキストが中央合わせの、シングルページサイトなどに合いそうな飾りです。 疑似要素のbefore:、after:にそれぞれborder-topとborder-bottomを指定し、topとmargin-topで縦中央になるように調整しています。

demo

HEAD LINE

HTML

CSS


クラシック系飾り罫

こちらもテキスト中央合わせのモノに合います。あまり使わないけど…1個無駄なspanも使いますし…。 菱形のspanはtransform:rotate(45deg);で。疑似要素を使えば、もっと複雑な飾りも作れます。

demo 2

HEAD LINE

HTML

CSS


丸付き罫線

両端に丸をつけるだけで飾りっぽくなります。もちろん下付きも簡単にできます。

demo 3

HEAD LINE

HTML

CSS


マルチボーダー風

透明度のある疑似要素をずらして重ね、マルチボーダー風に。色を任意で変えれば、印象が変わります。

demo 4

Head Line

HTML

CSS


パワポ的装飾

使いどころは分かりませんが…こんな感じにもなりますよーということで。

demo 5

Head Line

HTML

CSS


リスト系装飾

list-styleの部分を、背景画像を使わずにCSSで表現します。

チェックマーク

list-styleの部分をチェックマークに。位置は、フォントサイズや行間などによって調整が必要です。

demo 6

  • List 1
  • List 2
  • List 3

HTML

CSS


プラスマーク

プラスマークは、疑似要素のcontentに文字を入れて手軽に。

demo 7

  • List 1
  • List 2
  • List 3

HTML

CSS


矢印リスト

疑似要素で三角を作って配置します。

demo 8

  • List 1
  • List 2
  • List 3

HTML

CSS


矢印付きリンク

リンクの後ろにつく矢印もCSSで!ユーザービリティーもあがります。

矢印1

シンプルなライン矢印。上と右だけにborderを指定して、transformで45°回転させて矢印の先端を作ります。

demo 9

HTML

CSS


矢印2

transform:skewX;を使って、スピード感がありそうな矢印を作ります。

demo 10

HTML

CSS


アイコン風

丸で囲われたアイコン風の矢印。

demo 11

HTML

CSS


そのほか

そのほかよく見かける飾りです。使いどころも多いと思います。

NEW!リボン

ブログなどでよくあるリボン風の表現。今回はcontentにNEWを入れて、クラス指定すれば勝手に表示される感じにしました。文書構造的にはspanとかで書いた方が良いのかな…

demo 12

sample01

HTML

CSS


紙が重なっている様な表現

ものすごく「やってる感」が出る、便利な装飾。:before・:afterで重なった紙を擬似的に表現します。

demo 13

sample01

HTML

CSS


ふきだし色々

ふきだしも、疑似要素を使えば簡単です。ツールチップや見出しなどにも応用できます。線付きのふきだしは、:beforeと:after要素をずらして線を表現します。

demo 14

HTML

CSS


まとめ

いかがだったでしょうか? CSSで装飾ができると、画像も必要ないのでデータが軽く&準備が楽になります。コードも案外サクッとできるものなので、色々なところで使ってみてください。
それではまた!