そうだ、spanタグと擬似要素だけでアイキャッチしよう 導入編
これは、昨日までのブログメニュー。
なんだろう。
何かが足りない。
なんだと思う？
多分、きっと文字と画像のバランスなんだ。
まだこのブログにはタイトルロゴもない。
だから、文字の割合が多すぎるんだ。
だったら見て楽しいものを置いてみよう。
結果から
結果はこうなりました。
全て『1つのspanタグと、そのbefore after要素』で作成されています。
簡潔でイメージしやすく・・・したつもりです。
個人的には満足ですが、見やすくは無いかもしれません。
ここから先は、この実装を行った経緯が書いてあります。
実装が見たい方は作成編へどうぞ。
自分で作る理由
一応言っておきますが、CSSで凝った図形を作るのは、かなり非効率です。
通常はおとなしく画像にしておきましょう。
デメリットを挙げるならこんな感じ。
- 古いブラウザ（主にIE8以前）等で上手く表示されない
- ブラウザや端末ごとに微妙にズレる
- 微妙な位置調整が難しく、CSS側の制限も多い
という訳で今回のやり方は参考程度に考えてください。
当然、私も最初は『アイキャッチ用のアイコンを探そう！』って思いました。
でも良さそうなサイトの規約ページに飛んだら
シルエットデザインの素材はイラストレータaiデータです。
イラレかぁ・・・。
そう、adobe製イラストレーターが無いと編集もできなかったんです。
でもデザイナーではない私は、当然そんなもの持っていません。
だから私はイラっとして、自分で作ることにしました。（イラレだけに）
※注）上記サイトが悪い訳ではありません！！！
何で作るか
私が使えて画像が扱えるツールといえばPowerPointかペイント系のソフトぐらいですが、パワポは画像作成には向いてないし、ペイントとかは使い慣れていなくて楽しくなさそう。
だったらいっそ、業務で慣れてるHTMLとCSSで作っちゃおう。
というのが今回の流れ。
最近のCSSは強力で、大体なんでもできちゃいます。
難しいことではありません。
でも、そんな世の中だからこそシンプルが良い。
世の中もフラットデザインが流行ってますしね。
という訳で、今回使うものは『1つのspanタグ + before要素 + after要素』という3つの道具に絞って考えることにしました。
実装については、長くなるので別記事へ。
