cssで初めてキャラクターを制作したので、その時に行ったことについて紹介します。
制作物
See the Pen face-anpanman by miwa_shuntaro (@miwashutaro0611) on CodePen.
全体のコード
<!-- 顔 --><divclass="face"><!-- 眉毛 --><divclass="eyebrowsWrapper"><divclass="eyebrows eyebrows--left"></div><divclass="eyebrows eyebrows--right"></div></div><!-- 目 --><divclass="eyeWrapper"><divclass="eye eye--left"></div><divclass="eye eye--right"></div></div><!-- 鼻・頬 --><divclass="noseWrapper"><divclass="nose nose--left"></div><divclass="nose nose--center"></div><divclass="nose nose--right"></div></div><!-- 口 --><divclass="mouse"></div></div>// reset*{margin:0;padding:0;box-sizing:border-box;&::before,&::after{box-sizing:border-box;}}// 要素自体を中央にbody{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;min-height:300px;}// 顔.face{position:relative;width:300px;height:300px;border:3pxsolid#000;border-radius:50%;background:#fe935d;}// 眉毛.eyebrowsWrapper{display:flex;justify-content:space-between;width:190px;height:50px;margin:50pxauto0;}.eyebrows{width:70px;height:50px;border-radius:50px50px00;border-top:3pxsolid#000;border-right:3pxsolid#000;border-left:3pxsolid#000;&--left{left:0;}&--right{right:0;}}// 目.eyeWrapper{display:flex;justify-content:space-between;width:160px;height:54px;margin:-25pxauto0;background:#ff0;}.eye{width:40px;height:50px;background:#000;border-radius:50%;}// 鼻.noseWrapper{display:flex;justify-content:center;}.nose{position:relative;width:80px;height:80px;border-radius:50%;&::before{content:'';display:block;width:60%;height:100%;}&::after{content:'';position:absolute;top:calc(50%-6px);left:calc(50%-6px);display:block;width:12px;height:12px;background:#fff;}&--left{margin-top:5px;margin-right:-5px;background:#fe523c;&::before{margin-left:auto;border-radius:080px80px0;border-top:3pxsolid#000;border-right:3pxsolid#000;border-bottom:3pxsolid#000;}}&--center{z-index:1;background:#fc2812;border:3pxsolid#000;&::before{content:none;}}&--right{margin-top:5px;margin-left:-5px;background:#fe523c;&::before{border-radius:80px0080px;border-top:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}}}// 口.mouse{position:relative;width:140px;height:40px;margin:-5pxauto0;overflow:hidden;&::before{content:'';position:absolute;top:-30px;left:0;display:block;width:100%;height:70px;border-radius:0070px70px;border-right:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}}制作過程
顔
html
<divclass="face"></div>scss
丸を作成
.face{width:300px;height:300px;border:3pxsolid#000;border-radius:50%;background:#fe935d;}結果
眉毛
html
<!-- faceの中に入れる --><divclass="eyebrowsWrapper"><dicclass="eyebrows eyebrows--left"></div><dicclass="eyebrows eyebrows--right"></div></div>scss
.eyebrowsWrapper{display:flex;justify-content:space-between;width:190px;height:50px;margin:50pxauto0;}.eyebrows{width:70px;height:50px;border-radius:50px50px00;border-top:3pxsolid#000;border-right:3pxsolid#000;border-left:3pxsolid#000;}結果
説明
1. 眉毛の大枠作成
.eyebrowsWrapperで眉毛の配置する場所を作成。(画像の黄色い場所)
2. 眉毛の枠を作成
.eyebrowsで眉毛を作成。
.eyebrows{width:70px;height:50px;background:#00f;}
3. 上の部分のみ、角をとる
.eyebrows{width:70px;height:50px;background:#00f;border-radius:50px50px00;// これを追記}
border-radiusについて、
border-radius: 左上 右上 右下 左下;
のように記載することで、個別に記載を行うことができるため、今回は「左上」と「右上」に50pxの記載を行うことで、上記のような角丸を作成することができる。
詳しくは https://developer.mozilla.org/ja/docs/Web/CSS/border-radiusを参照してください。
4. backgroundからborderに変更
今回は、「top, right, left」の3箇所に線を引くため、
.eyebrows{border-top:3pxsolid#000;border-right:3pxsolid#000;border-left:3pxsolid#000;}を追加。
目
html
<!-- 目 --><divclass="eyeWrapper"><divclass="eye eye--left"></div><divclass="eye eye--right"></div></div>scss
.eyeWrapper{display:flex;justify-content:space-between;width:160px;height:54px;margin:-25pxauto0;background:#ff0;}.eye{width:40px;height:50px;background:#000;border-radius:50%;}結果
説明
1. 大枠の作成
.eyeWrapperで目の配置する場所を作成。(画像の黄色い場所)
.eyeで目を作成。
2. 枠を作成
.eye{width:40px;height:50px;background:#000;}
3. 楕円を作成
.eye{width:40px;height:50px;background:#000;border-radius:50%;// これを追記}
楕円についても、正円の時と同じように、border-radius: 50%;で適応されます。
鼻
html
<!-- 鼻・頬 --><divclass="noseWrapper"><divclass="nose nose--left"></div><divclass="nose nose--center"></div><divclass="nose nose--right"></div></div>scss
.nose{position:relative;width:80px;height:80px;border-radius:50%;&::before{content:'';display:block;width:60%;height:100%;}&::after{content:'';position:absolute;top:calc(50%-6px);left:calc(50%-6px);display:block;width:12px;height:12px;background:#fff;}&--left{margin-top:5px;margin-right:-5px;background:#fe523c;&::before{margin-left:auto;border-radius:070px70px0;border-top:3pxsolid#000;border-right:3pxsolid#000;border-bottom:3pxsolid#000;}}&--center{z-index:1;background:#fc2812;border:3pxsolid#000;&::before{content:none;}}&--right{margin-top:5px;margin-left:-5px;background:#fe523c;&::before{border-radius:70px0070px;border-top:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}}}結果
説明
1. 大枠の作成
.noseWrapperで鼻・頬の配置する場所を作成。(画像の黄色い場所)
2. 鼻の枠を作成
.noseで鼻・頬を作成
// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成).nose{position:relative;width:80px;height:80px;border-radius:50%;}// 左頬のスタイル.nose--left{background:#fe523c;}// 鼻のスタイル.nose--center{background:#fc2812;}// 右頬のスタイル.nose--right{background:#fe523c;}
3-1. 頬の位置を調整
このままだと違和感があるので、鼻と頬が微妙に重なるように変更する
// 左頬のスタイル.nose--left{margin-top:5px;margin-right:-5px;}// 右頬のスタイル.nose--right{margin-top:5px;margin-left:-5px;}
3-2. 頬の位置を調整(鼻の重なりを調整)
現時点だと「左頬 → 鼻 → 右頬」の順番で要素が重なっているため、鼻のz-indexの値を追加することで、「左頬 → 右頬 → 鼻」の順番に重なりを変更します。
// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成).nose{position:relative;}// 鼻のスタイル.nose--center{z-index:1;}
4. 中央に白い四角を配置
cssで要素を中央に寄せる方法として、今回は固定の値のため、calc(50% - 要素のサイズ / 2)を使用して、合わせます。
// 鼻・頬の中央にある四角.nose::after{content:'';position:absolute;top:calc(50%-6px);left:calc(50%-6px);display:block;width:12px;height:12px;background:#fff;}
5-1. 鼻に輪郭を配置
鼻については、全体に配置をするため、通常のborderを使用。
// 鼻のスタイル.nose--center{border:3pxsolid#000;}5-2. 頬に輪郭を配置
// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成).nose::before{content:'';display:block;width:60%;height:100%;}// 左頬のスタイル.nose--left::before{margin-left:auto;border-radius:080px80px0;border-top:3pxsolid#000;border-right:3pxsolid#000;border-bottom:3pxsolid#000;}// 鼻のスタイル.nose--center::before{content:none;// display: none;でもよいが、擬似要素だとcontent: none;で要素を表示させないこともできる。}// 右頬のスタイル.nose--right::before{border-radius:80px0080px;border-top:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}
補足
「4-2. 頬に輪郭を配置」の部分について、別の方法として、要素自体にborderを引く方法もあるが、その場合、以下のような状態(左頬の部分)になってしまうため、今回はbefore要素を使用し、半円で対応。
口
html
<divclass="mouse"></div>scss
// 口.mouse{position:relative;width:140px;height:40px;margin:-5pxauto0;overflow:hidden;&::before{content:'';position:absolute;top:-30px;left:0;display:block;width:100%;height:70px;border-radius:0070px70px;border-right:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}}結果
説明
1. 口の表示させる部分の配置
.mouse{position:relative;width:140px;height:40px;margin:-5pxauto0;background:#00f;}
2. 曲線が適応されるように記載
.mouseを
.mouse{position:relative;width:140px;height:40px;margin:0auto;border-radius:0040px40px;// ここにborder-radiusを追加border-right:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}のように対応を行った場合、以下の画像のような状態になってしまうため、before要を作成して対応を行う。
3. before要素で曲線の部分を作成する
.mouse::before{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:70px;border-radius:0070px70px;border-right:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}
4. 位置の調整
高さを70pxで設定したため、
「既存の高さ(40px) - 設定した高さ(70px) = -30px」なので、topの値を-30pxに変更。
.mouse::before{content:'';position:absolute;top:-30px;// ここの値を変更left:0;display:block;width:100%;height:70px;border-radius:0070px70px;border-right:3pxsolid#000;border-bottom:3pxsolid#000;border-left:3pxsolid#000;}
5-1. はみ出している場所の非表示
はみ出している部分については、親要素にoverflow: hiddenを追加。
.mouse{position:relative;width:140px;height:40px;margin:0auto;overflow:hidden;// これを追加}
5-2. 余白調整
最後に頬と口の間に隙間があるため、最後に余白の調整を行う
.mouse{position:relative;width:140px;height:40px;margin:-5pxauto0;// margin-top: -5px;に変更overflow:hidden;}
最後に
初めてcssでキャラクターを記載して見ましたが、意外と楽しかったので、また機会があればQiitaにまとめますので、よろしくお願いします！
See the Pen face-anpanman by miwa_shuntaro (@miwashutaro0611) on CodePen.
