div図形についての考察

div図形で使えそうなものは、ちょっとした説明を表示するための「吹き出し」や柔らかい雰囲気のための角丸ボックス装飾程度ではないかと思う今日この頃…

勝手に命名している『div図形』とは、divやspanタグの四角いボックスとそのbefore・afterなどを三角・円・楕円などに変形したものを組み合わせ、四角以外の形を表現・装飾したものです。（検索したら、css図形、cssで図形を描く、cssで図形表現、のように呼び方はいろいろです）

利用してるCMS等のタグ・css・jsなどで制限の多い個人ブログ・スタッフブログについては、簡易的な装飾としてリボンタイトルや丸ボックスでボタンリンク、ひし形ボックスで番号表示など、ちょっとした装飾のためにdiv図形のテクニックが使われているのを見かけたりします。
ですが、デザイナーがちゃんとデザインし、お金もらってプロの仕事として制作・納品するWEBサイトでは、div図形の装飾だけではチープな印象になる場合もあるかもしれません。（あくまで個人の感想です）

CSSのみでいろんな形のアイコンを表現して紹介しているサイトもあったりしますが、それがHTML的に意味のないdivやspanを大量に使っているものだった場合は、アイコン画像を貼るのが良いかもしれません。
HTML5対応ブラウザの場合、イラストレータで描いたイラストや複雑な図形をSVGで表示させることも可能なので、そういう技術を使うとプロの仕事としてアピールできるかもしれない、と思ったりもします。（あくまで個人の感想です）

文字表示のアニメなどは、近年のwebテクニック系ブログ記事のよく見るタイトルネタ「実は意外と簡単な方法で●○ができるんです、続きはグ★シーで…」と同様の印象としてよく見かける「jQueryで簡単に●○できる」について、jQueryプラグインをそのまま使っているものがあったりしますが、お金もらって受注して作るサイトに面識のない人が作ったjsプラグインを入れ、どこの国の人やねん、という雰囲気のコピーライトが書いてあったりするのが微妙な気がします…今は商用利用フリーとか書いてあっても、権利を買い取ったりした某国の人がいきなり●○年から有料にしてますので金払うアル、なんていきなりメールを送ってくる可能性が本当にないのか不安で夜も眠れません…。（あくまで個人の感想です）

また、時々CSSのテクニックサイトで、ボックスに特殊な影をつける演出で、before や after で描いた影を z-index:-1; でボックスの背後に配置する例を見かけますが、ページ内にはいろんな要素が重ねられていることも多く、z-index:-1 のテクニックはよく調べておかないと「z-index 効かない」と検索することになりかねないかと思われます。
単純にどこでも使えると思って配置すると、親ボックスの下に配置されてしまい、見えなくなってしまうからです。
なので、cssのテクニック紹介記事として、「z-index:-1」を使うものは、木（パーツの作り方）だけを見てて森（webサイト全体の制作）を見てない印象があるため、記事にされる方は上手くいかない場合と対処法についての注釈があるといいかもしれません。
（※20181010追記）どこでも使える方法について判明しましたので、現在記事を用意しています。

昔はわざわざ四隅に角丸画像を配置し、さらにテーブルレイアウトしていた「角丸デザイン」が、border-radius のおかげで簡単に作れるようになっているので、角丸装飾はCSSでやるのが正しいと思われます。

また、マウスホバーでツールチップ（フキダシのようなもの）を表示し、ボタンメニューの簡単な説明文を表示する、というものについては、「jQueryで簡単に」よりもCSSのみでできるようになりましたので、そのためのCSS装飾としてフキダシ風のdiv図形は案外許されるのではないかと思ったりもします。（これも背景画像でうまくやった方が奇麗な場合も…）

サンプルについて

サンプル1、2で基本の図形、3以降でそれらを組み合わせた例を表示してみました。あくまでお遊び的なものとして。

また、divは一つだけで、before・afterにより最大3つの図形で装飾しています。（1要素のために複数のspan等をなるべく使わないという条件で作っています）

最後に、今回サンプル作ってる途中で思いついた、divは一つだけで、before・afterにより最大3つの図形を組み合わせる以外に、同じ形のもの（四角なら四角、円なら円）などを影（boxshadow）で表現することができる、と言う例をサンプル5～6で例示しています。

また、boxshadowの応用でドット絵アイコンを描くなどのお遊びネタを、サンプル7で例示しています。
boxshadowでアイコン作成については、(画像作る方が早いので) 実際のwebサイトでは使わないものだと思ったりしますので、暇つぶしのお遊びネタになります。
根気と集中力でCSS記述するのはしんどすぎるので、ドット塗りしてお絵かき後にソースを自動作成するようなjavascriptツールを作って、サンプル7などの画像を作ってみました。
（ツールは描いた絵を復活の呪文でバックアップする機能を付加したり、最初からドット塗りするのが面倒になったので、画像を読み込んで色データを取得して自動作成できるようにしたりで、案外高機能だったりしますが、普通はboxshadowでアイコン作ったりしないかと思いますので、非公開にしています）

原森の個人的な考察まとめ

制作納品仕事として、cssで図形を組み合わせて装飾するテクニックで使えるものは、ツールチップのフキダシと、そのままcssで実現する角丸ボックス、などではないかと思います。（個人的に）

制作会社がデザイン・制作・納品する企業向けサイトなどではcssで無理やりリボンや付箋などを描いて装飾するより、ちゃんと意図を持ってデザインした絵を使う方がプロっぽいと思います。
高いお金を払ってデザインしてもらったのに、どこかで拾ってきたcss図形をコピペしてたりすると、残念な気持ちになってしまうかもしれません。（デザインにマッチしていればＯＫですけど）

div図形(cssで図形描画)は、個人ブログやサイト内の特に意味を持たない部分ちょっとだけ使うお遊びネタ程度にしておくのがいいかと思われます。なので、必死で図形を組み合わせて何かを作り出そうとするよりは、絵を書いた方が早いと思います。
→ div や span でピクトグラムやアイコン作って紹介しているサイトもありますが、あくまでweb制作者がテクニックの競い合いを楽しむためだけのお遊びネタだと思います。

絵で書いて貼るだけで済むものを div や span タグ増殖させてまでやろうしたり、cssだけでできるものをjQueryプラグイン入れてまでやるのは本末転倒ではないか、などと思ったりします。（あくまで個人の感想です）

主なcssやテクニック

border-radius

ボックスの角を丸くするCSS。最新版FF以外はベンダープレフィックスが必要。(2014.11.23 現在)

transform:rotateZ(Rdeg)

Z軸方向に(R)deg回転させる。

transform:skewX(Rdeg)

X軸方向に角度(R)degで傾斜変形

transform:skewY(Rdeg)

Y軸方向に角度(R)degで傾斜変形

transform:skew(Rdeg,rdeg)

X軸方向に角度(R)deg、Y軸方向に角度(r)degで傾斜変形

rgba(0,0,0,0)

色指定でα値を0にしているので、透明になる。※transparent も透明指定だが、色指定する方が確実かと思われる。

ページトップへ