まさおまっさお

おいまさおがんばれまさお

そうだ、spanタグと擬似要素だけでアイキャッチしよう 導入編

これは、昨日までのブログメニュー。

 

f:id:MasaoBlue:20160301055427p:plain

 

なんだろう。

何かが足りない。

 

なんだと思う?

 

 

 

多分、きっと文字と画像のバランスなんだ。

 

まだこのブログにはタイトルロゴもない。

だから、文字の割合が多すぎるんだ。

 

だったら見て楽しいものを置いてみよう。

 

結果から

結果はこうなりました。

 

f:id:MasaoBlue:20160301055431p:plain

 

全て『1つのspanタグと、そのbefore after要素』で作成されています。

 

簡潔でイメージしやすく・・・したつもりです。

個人的には満足ですが、見やすくは無いかもしれません。

 

 

ここから先は、この実装を行った経緯が書いてあります。

実装が見たい方は作成編へどうぞ。

www.masaoblue.com

 

自分で作る理由

一応言っておきますが、CSSで凝った図形を作るのは、かなり非効率です。

通常はおとなしく画像にしておきましょう。

 

デメリットを挙げるならこんな感じ。

 

  • 古いブラウザ(主にIE8以前)等で上手く表示されない
  • ブラウザや端末ごとに微妙にズレる
  • 微妙な位置調整が難しく、CSS側の制限も多い

 

という訳で今回のやり方は参考程度に考えてください。

 

当然、私も最初は『アイキャッチ用のアイコンを探そう!』って思いました。

でも良さそうなサイトの規約ページに飛んだら

 

シルエットデザインの素材はイラストレータaiデータです。

シルエットデザイン

 

イラレかぁ・・・。

 

そう、adobe製イラストレーターが無いと編集もできなかったんです。

でもデザイナーではない私は、当然そんなもの持っていません。 

 

だから私はイラっとして、自分で作ることにしました。(イラレだけに)

※注)上記サイトが悪い訳ではありません!!!

 

何で作るか

私が使えて画像が扱えるツールといえばPowerPointペイント系のソフトぐらいですが、パワポは画像作成には向いてないし、ペイントとかは使い慣れていなくて楽しくなさそう。

 

だったらいっそ、業務で慣れてるHTMLとCSSで作っちゃおう

というのが今回の流れ。

 

最近のCSSは強力で、大体なんでもできちゃいます。

ドラえもんだって簡単に作れます。

難しいことではありません。

 

でも、そんな世の中だからこそシンプルが良い

世の中もフラットデザインが流行ってますしね。

 

という訳で、今回使うものは『1つのspanタグ + before要素 + after要素』という3つの道具に絞って考えることにしました。

 

実装については、長くなるので別記事へ。

www.masaoblue.com