さぁ!検索しよう!

CSSのみで描かれたアンパンマンです。

DEMO

HTML

<div class="face">
    <div class="eyebrows"> <span class="eyebrow_left"></span>
        <span class="eyebrow_right"></span>

    </div>
    <div class="eyes"> <span class="eye_left"></span>
        <span class="eye_right"></span>

    </div>
    <div class="noses"> <span class="nose_left"><span class="ray"></span></span> <span class="nose_center"><span class="ray"></span></span> <span class="nose_right"><span class="ray"></span></span>
    </div>
    <div class="mouths"> <span class="mouth_bottom"></span>
        <span class="mouth_top"></span>
        <span class="tongue"></span>

    </div>
</div>

親要素である顔の<div class="face"></div>が囲っている子要素には、眉の<div class="eyebrows"></div>を始め、目の<div class="eyes"></div>や鼻の<div class="noses"></div>、口の<div class="mouths"></div>が存在しています。

CSS

body {
    background:#44DEDE;
}
.face {
    position: relative;
    width: 500px;
    height: 450px;
    margin: 50px auto;
    border-radius: 47%;
    background-color: #F09567;
}

.eyebrows {
    position: absolute;
    top: 0;
    left: 145px;
    width: 210px;
    height: 75px;
}

.eyebrow_left,
.eyebrow_right {
    position: absolute;
    top: 20px;
    width: 90px;
    height: 110px;
    border-top: 2px solid #333;
    border-radius: 50%;
}

.eyebrow_left {
    left: 0;
}

.eyebrow_right {
    right: 0;
}

.eyes {
    position: absolute;
    top: 75px;
    left: 150px;
    width: 200px;
    height: 75px;
}

.eye_left,
.eye_right {
    position: absolute;
    top: 0;
    width: 45px;
    height: 75px;
    border-radius: 50%;
    background-color: #333;
}

.eye_left {
    left: 17.5px;
}

.eye_right {
    right: 17.5px;
}

.noses {
    position: absolute;
    z-index: 3;
    top: 150px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 420px;
    height: 150px;
    background-color: #F09567;
}

.nose_left,
.nose_right {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 135px;
    height: 100%;
    border-radius: 50%;
    background-color: #F7771B;
}

.nose_left {
    left: 50%;
    transform: translateX(-210px);
}

.nose_right {
    right: 50%;
    transform: translateX(210px);
}

.nose_left .ray,
.nose_right .ray {
    position: absolute;
    top: 60px;
    width: 30px;
    height: 30px;
    background-color: #FFF;
}

.nose_left .ray {
    left: 42.5px;
}

.nose_right .ray {
    right: 42.5px;
}

.nose_center {
    z-index: 2;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 130px;
    border-radius: 50%;
    background-color: #DA3C0C;
}

.nose_center .ray {
    position: absolute;
    top: 50px;
    left: 60px;
    width: 30px;
    height: 30px;
    background-color: #FFF;
}

.mouths {
    position: absolute;
    z-index: 0;
    top: 300px;
    left: 120px;
    width: 260px;
    height: 150px;
}

.mouth_bottom {
    position: absolute;
    z-index: 1;
    top: -100px;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #AF5C5D;
    border-radius: 50%;
}

.mouth_top {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 260px;
    height: 150px;
}
  • 各パーツを均等に配置するために眉+目(.eyebrows,.eyes)、鼻(.noses)、口(.mouths)の各高さが150pxとなるようにしています。

post_07_image

  • .faceには各パーツを絶対配置するためにposition:relative;を指定しています。

  • 眉は.eyebrowsを基準に左眉、右眉.eyebrow_left, .eyebrow_rightをそれぞれ絶対配置しています。
    右目、左目も同様に.eyesを基準に絶対配置しています。

  • 鼻(.nose)と頬(.cheek_left,.cheek_right)は、.nosesを基準に絶対配置しています。

  • 口は.mouthsを基準に、輪郭の上部分(.mouth_top)と下部分(.mouth_bottom)を分けて配置しています。

舌出しver

また、前述のコードの一部を変更すると、舌出しver.にすることも可能です。

HTML

<span class="mouth_top"></span>の下に下記を追加します。

<span class="tongue"></span>

CSS

  1. .mouths {}に下記を追加します。
    border-top:50px solid #000;
    
  2. .mouths {}から下記を削除します。
    border-top: 2px solid #000;
    
  3. 下記を新たに追加します。
    .tongue {
        position: absolute;
        z-index: 9;
        top: -50px;
        left: 130px;
        width: 130px;
        height: 100%;
        border-left: 2px solid #000;
    }
    

以上で、CSSのみで描くアンパンマンの作り方を終わります。