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

今回は、実際にアイキャッチを作成する方法を説明します。

ここに至った経緯については、導入編にて。
www.masaoblue.com

０．ルール・考え方

【注意】このやり方はブラウザや端末によっては上手く表示されない場合があるので、その辺りは自己責任でお願いします。

以下、推奨ブラウザはchromeです。

では今回のルールと、表現に必要な考え方について説明します。

どうでも良いからやり方が見たいという方はこの辺から読んでください。

今回のルール

前記事の通り、使える部品は以下の3つのみとします。

spanタグ1個
spanタグのbefore要素
同じくafter要素

このため表現の種類はかなり限られます。
※あくまで今回のルールの中の話です。

複雑な形はNG

HTMLで記述したものは、基本的には全て四角形。
そこからCSSで角を削ったり、部品を重ねたりして他の図形を表現します。

簡単に作れる形としては

四角形（角削り可）
円形（半円、楕円も可。扇・三日月などは組み合わせにより可）
三角形

くらいだと思っておきましょう。

1つのデザインで使える『形』は3つまで。

例えば、「料理」を表すのに『りんご』と『包丁』を思い浮かべたなら、それを上記で使える形に分解します。

分解例

りんご本体
りんごのヘタ
包丁の刃
包丁の持ち手

ここで、今回のルールでは部品が3つだけなので異なる形を4つ以上組み合わせた図形は表現できません。
そのため上記は実現不可となります。

１．イメージを考える

表現したい内容に関連する『物』を洗い出します。

「絵」だったら紙とペン、「料理」ならフライパン、包丁、まな板・・・と関連しそうな要素を出しつつ、出来る限りシンプルな形で表現できるよう考えましょう。

例）今回の私のイメージ

f:id:MasaoBlue:20160301144712j:plain

２．CSSで表現する

ここから作成に入ります。
長いので見たい所だけ見てください。

２－１．『感想』っぽい吹き出し

吹き出し型は色んな所で見かけますね。
もっと試してみたい方は、ジェネレータなどもあるのでご自由に。

1）完成イメージ（拡大）

2）必要な部品

四角い枠
「・・・」（3点リーダ）
吹き出し用の三角形

3）CSS

/* 四角い枠 */
#impression_span {
    top: -2px;
    left: 7px;
    display: inline-block;
    background: #5687c3;
    width: 17px;
    height: 13px;
    margin-right: 12px;
    border-radius: 2px;
    vertical-align: middle;
    position: relative;
}

/* 3点リーダ
 * box-shadowで3つに分裂させる */
#impression_span:before {
    position: relative;
    display: block;
    background: white;
    width: 3px;
    height: 2px;
    content: ' ';
    border-radius: 2px;
    box-shadow: -4px 0 0 0 white, 4px 0 0 0white;
    line-height: 3px;
    margin: 0px auto;
    top: 5px;
}

/* 吹き出し用三角形 */
#impression_span:after {
    bottom: -3px;
    right: 2px;
    display: inline-block;
    background: transparent;
    width: 1px;
    height: 1px;
    content: ' ';
    border-bottom: 5px solid transparent;
    border-right: 5px solid #5687c3;
    position: absolute;
}

/* マウスを乗せたら色を変える */
#impression_span:hover:before {
    background: #5687c3;
    box-shadow: -4px 0 0 0 #5687c3, 4px 0 0 0 #5687c3;
}

２－２．『料理』

例に上げた『野菜と包丁』は無理なので別の形へ。
茶碗に白米・・・よりは茶碗と箸の方が面白かったのでこっちになりました。

1）完成例（拡大）

2）必要な部品

茶碗（椀）
茶碗（足）
箸

3）CSS

/* 茶碗（椀） */
#cooking_span {
    top: -2px;
    left: 6px;
    display: inline-block;
    background: #5687c3;
    width: 18px;
    height: 9px;
    margin-right: 12px;
    border-radius: 2px 2px 10px 10px;
    vertical-align: middle;
    position: relative;
}

/* 茶碗（足） */
#cooking_span:before {
    top: 7px;
    display: block;
    background: #5687c3;
    width: 10px;
    height: 5px;
    content: ' ';
    position: relative;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
}

/* 箸
 * 透明な要素の上下にborderを表示 */
#cooking_span:after {
    top: -2px;
    right: 0;
    display: inline-block;
    background: transparent;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    height: 1px;
    width: 13px;
    -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
            transform: rotate(-40deg);
    position: absolute;
    content: ' ';
}

/* マウスを乗せたら色を変える */
#cooking_span:hover:after {
    border-color: #5687c3;
}

２－３．『絵しりとり』（イラスト）

絵は描くものなので「紙とペンかな？」とも思ったのですが、これだとどうしても文章っぽく見えてしまいます。
そのため今回は、よくアイコン等で見かけるデザインを作ってみることにしました。

1）完成例（拡大）

2) 必要な部品

枠（背景）
太陽
山

3）CSS

/* 枠（背景） */
#illust_span {
    top: -1px;
    left: 7px;
    display: inline-block;
    background: #5687c3;
    width: 18px;
    height: 16px;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

/* 太陽 */
#illust_span:before {
    position: absolute;
    display: block;
    background: white;
    width: 6px;
    height: 6px;
    content: ' ';
    border-radius: 4px;
    line-height: 3px;
    margin: 0px auto;
    top: 1px;
    left: 1px;
}

/* 山
 * 1つ作ってbox-shadowで分裂 */
#illust_span:after {
    bottom: -6px;
    display: inline-block;
    background: white;
    width: 9px;
    height: 11px;
    content: ' ';
    position: absolute;
    box-shadow: 7px -4px 0 0 white;
    border-radius: 7px 7px 0 0 / 10px 10px 0 0;
}

/* マウスを乗せたら色を変える */
#illust_span:hover:before {
    background: #5687c3;
}
#illust_span:hover:after {
    background: #5687c3;
    box-shadow: 7px -4px 0 0 #5687c3;
}

２－４．『ジャンプ』

少年ジャンプの海賊のロゴマークは、複雑すぎて今回は無理です。
なので、「本がジャンプする」感じを表現することにしました。

1）完成例（拡大）

2) 必要な部品

本（本体）
本の曲線部分
飛んだ感じの効果線

3）CSS

/* 本 */
#jump_span {
    top: -1px;
    left: 7px;
    display: inline-block;
    background: #5687c3;
    width: 20px;
    height: 12px;
    margin-right: 12px;
    vertical-align: middle;
    position: relative;
}

/* 本の曲線部分
 * box-shadowで分裂 */
#jump_span:before {
    top: -3px;
    display: inline-block;
    background: #5687c3;
    width: 10px;
    height: 3px;
    content: ' ';
    position: absolute;
    box-shadow: 10px 0 0 0 #5687c3, 0 12px 0 0 black, 10px 12px 0 0 black;
    border-radius: 5px 5px 0 0 / 3px 3px 0 0;
    left: 0;
}

/* 飛んだ感じの効果線 */
#jump_span:after {
    top: 115%;
    left: 9px;
    bottom: 10px;
    display: block;
    background: white;
    width: 2px;
    height: 6px;
    content: ' ';
    position: absolute;
    box-shadow: 5px 0 0 0 white, -5px 0 0 0 white;
    margin: 0 auto;
}

/* マウスを乗せたら色を変える */
#jump_span:hover:after {
    background: #5687c3;
    box-shadow: 5px 0 0 0 #5687c3, -5px 0 0 0 #5687c3;
}

２－５．『そのほか』

「その他」って形にしたら何になるんだろう・・・と考えて数時間、良い案が思い浮かばなかったので他と被らない適当なデザインに決めました。

1）完成例（拡大）

2) 必要な部品

四角い枠
左下に被せる四角
右上に被せる四角

3）CSS

/* 四角い枠 */
#other_span {
    left: 8px;
    vertical-align: middle;
    position: relative;
    width: 18px; 
    height: 18px;
    background-color: #5687c3;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    border-radius: 2px;
}

/* 左下、右下に被せる四角 */
#other_span:before, #other_span:after {
    content: ' ';
    width: 50%;
    height: 50%;
    background: white;
    position: absolute;
}
#other_span:before {
    bottom: 0;
    left: 0;
}
#other_span:after {
    top: 0;
    right: 0;
}

/* マウスを乗せたら色を変える */
#other_span:hover:before,
#other_span:hover:after {
    background: #5687c3;
}

最後に

うん。

やっぱ好きです。CSS。

見た目が楽しい感じになると、なんかデキる人っぽくなった気分。

そしてパズル感があってとても楽しい。

見た目を簡単に変化させられるって素晴らしいですね。

こんな所まで読んで頂き、ありがとうございました。

まさおまっさお

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

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

０．ルール・考え方

今回のルール

複雑な形はNG

1つのデザインで使える『形』は3つまで。

分解例

１．イメージを考える

例）今回の私のイメージ

２．CSSで表現する

２－１．『感想』っぽい吹き出し

1）完成イメージ（拡大）

2）必要な部品

3）CSS

２－２．『料理』

1）完成例（拡大）

2）必要な部品

3）CSS

２－３．『絵しりとり』（イラスト）

1）完成例（拡大）

2) 必要な部品

3）CSS

２－４．『ジャンプ』

1）完成例（拡大）

2) 必要な部品

3）CSS

２－５．『そのほか』

1）完成例（拡大）

2) 必要な部品

3）CSS

最後に