cssで初めてキャラクターを制作したので、その時に行ったことについて紹介します。
制作物
全体のコード
<!-- 顔 -->
<div class="face">
<!-- 眉毛 -->
<div class="eyebrowsWrapper">
<div class="eyebrows eyebrows--left"></div>
<div class="eyebrows eyebrows--right"></div>
</div>
<!-- 目 -->
<div class="eyeWrapper">
<div class="eye eye--left"></div>
<div class="eye eye--right"></div>
</div>
<!-- 鼻・頬 -->
<div class="noseWrapper">
<div class="nose nose--left"></div>
<div class="nose nose--center"></div>
<div class="nose nose--right"></div>
</div>
<!-- 口 -->
<div class="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: 3px solid #000;
border-radius: 50%;
background: #fe935d;
}
// 眉毛
.eyebrowsWrapper {
display: flex;
justify-content: space-between;
width: 190px;
height: 50px;
margin: 50px auto 0;
}
.eyebrows {
width: 70px;
height: 50px;
border-radius: 50px 50px 0 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #000;
&--left {
left: 0;
}
&--right {
right: 0;
}
}
// 目
.eyeWrapper {
display: flex;
justify-content: space-between;
width: 160px;
height: 54px;
margin: -25px auto 0;
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: 0 80px 80px 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}
}
&--center {
z-index: 1;
background: #fc2812;
border: 3px solid #000;
&::before {
content: none;
}
}
&--right {
margin-top: 5px;
margin-left: -5px;
background: #fe523c;
&::before {
border-radius: 80px 0 0 80px;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
}
}
// 口
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: -5px auto 0;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -30px;
left: 0;
display: block;
width: 100%;
height: 70px;
border-radius: 0 0 70px 70px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
}
制作過程
顔
html
<div class="face"></div>
scss
丸を作成
.face {
width: 300px;
height: 300px;
border: 3px solid #000;
border-radius: 50%;
background: #fe935d;
}
結果
眉毛
html
<!-- faceの中に入れる -->
<div class="eyebrowsWrapper">
<dic class="eyebrows eyebrows--left"></div>
<dic class="eyebrows eyebrows--right"></div>
</div>
scss
.eyebrowsWrapper {
display: flex;
justify-content: space-between;
width: 190px;
height: 50px;
margin: 50px auto 0;
}
.eyebrows {
width: 70px;
height: 50px;
border-radius: 50px 50px 0 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #000;
}
結果
説明
1. 眉毛の大枠作成
.eyebrowsWrapper
で眉毛の配置する場所を作成。(画像の黄色い場所)
2. 眉毛の枠を作成
.eyebrows
で眉毛を作成。
.eyebrows {
width: 70px;
height: 50px;
background: #00f;
}
3. 上の部分のみ、角をとる
.eyebrows {
width: 70px;
height: 50px;
background: #00f;
border-radius: 50px 50px 0 0; // これを追記
}
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: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #000;
}
を追加。
目
html
<!-- 目 -->
<div class="eyeWrapper">
<div class="eye eye--left"></div>
<div class="eye eye--right"></div>
</div>
scss
.eyeWrapper {
display: flex;
justify-content: space-between;
width: 160px;
height: 54px;
margin: -25px auto 0;
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
<!-- 鼻・頬 -->
<div class="noseWrapper">
<div class="nose nose--left"></div>
<div class="nose nose--center"></div>
<div class="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: 0 70px 70px 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}
}
&--center {
z-index: 1;
background: #fc2812;
border: 3px solid #000;
&::before {
content: none;
}
}
&--right {
margin-top: 5px;
margin-left: -5px;
background: #fe523c;
&::before {
border-radius: 70px 0 0 70px;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #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: 3px solid #000;
}
5-2. 頬に輪郭を配置
// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成)
.nose::before {
content: '';
display: block;
width: 60%;
height: 100%;
}
// 左頬のスタイル
.nose--left::before {
margin-left: auto;
border-radius: 0 80px 80px 0;
border-top: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}
// 鼻のスタイル
.nose--center::before {
content: none; // display: none;でもよいが、擬似要素だとcontent: none;で要素を表示させないこともできる。
}
// 右頬のスタイル
.nose--right::before {
border-radius: 80px 0 0 80px;
border-top: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
補足
「4-2. 頬に輪郭を配置」の部分について、別の方法として、要素自体にborder
を引く方法もあるが、その場合、以下のような状態(左頬の部分)になってしまうため、今回はbefore
要素を使用し、半円で対応。
口
html
<div class="mouse"></div>
scss
// 口
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: -5px auto 0;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -30px;
left: 0;
display: block;
width: 100%;
height: 70px;
border-radius: 0 0 70px 70px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
}
結果
説明
1. 口の表示させる部分の配置
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: -5px auto 0;
background: #00f;
}
2. 曲線が適応されるように記載
.mouse
を
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: 0 auto;
border-radius: 0 0 40px 40px; // ここにborder-radiusを追加
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
のように対応を行った場合、以下の画像のような状態になってしまうため、before
要を作成して対応を行う。
3. before
要素で曲線の部分を作成する
.mouse::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 70px;
border-radius: 0 0 70px 70px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #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: 0 0 70px 70px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
border-left: 3px solid #000;
}
5-1. はみ出している場所の非表示
はみ出している部分については、親要素にoverflow: hidden
を追加。
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: 0 auto;
overflow: hidden; // これを追加
}
5-2. 余白調整
最後に頬と口の間に隙間があるため、最後に余白の調整を行う
.mouse {
position: relative;
width: 140px;
height: 40px;
margin: -5px auto 0; // margin-top: -5px;に変更
overflow: hidden;
}
最後に
初めてcssでキャラクターを記載して見ましたが、意外と楽しかったので、また機会があればQiitaにまとめますので、よろしくお願いします!