Help us understand the problem. What is going on with this article?

HTMLとCSSでカレーライスを作った

カレーライスを作りました

※スマホではバグりますすみません

See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen.

どうやって作ったの

この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。
実業務ではきっと役には立ちませんので、
「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。

パーツを細かく作る

カレーのカレーによるカレーのためのAtomic Designの記事で言及した、
Atomic Designの考えを元にして作りました。

Atomsの用意

  • にんじん
  • じゃがいも
  • 牛肉
  • 切った具材

スクリーンショット 2019-12-15 0.18.11.png

スクリーンショット 2019-12-15 0.18.16.png

スクリーンショット 2019-12-15 0.18.25.png

スクリーンショット 2019-12-15 0.18.38.png

スクリーンショット 2019-12-12 18.40.16.png

スクリーンショット 2019-12-15 0.18.31.png

これらをどう作ったか後ほど解説します。
(厳密には米はMoleculesですが、まぁよしとしましょう。)

これらを全て組み合わせることで、カレーライスを完成させました。

では、次に実際によく使ったCSSプロパティを紹介します。

秘伝のカレー3つのスパイス(プロパティ)

今回カレーライスを作るにあたって以下を意識しました。

  • 丸みや、曲線の表現

逆に言うとこの2点しか抑えてなかった

box-shadow:立体感を持たせるスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

box-shadowは、要素に対して影をつけることができます。
これによってより立体的なになるように表現します。

じゃがいもの影のグラデーション、人参の棒線、切った具材の影、皿の凹凸等を再現しました。
じゃがいもを例にとってみます。

スクリーンショット 2019-12-15 10.58.57.png

じゃがいものdivを用意します。

  <div class="jaga"></div>

作成したdivに対して、box-shadowで土感を、
border-radiusでじゃがいも特有の丸み・曲線を表現します。

.jaga {
    width: 300px;
    height: 250px;
    background: #E8CD7F;
    border-radius: 40% 40% 44% 40% / 35% 65% 40% 70%;
    box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7), 
                inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3),
                10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
                inset 31px 0px 96px -21px #B07331;
}

border-radiusについてはこの後に解説します。

box-shadowは以下の値を設定できます。

box-shadow: {横にズラす値} {縦にズラす値} {ボカす値} {色};

また、insetを指定することで要素の内側に影をつけることができ、
さらにカンマ区切りにすることで上下左右それぞれに異なった影をつけることが可能です。
今回はじゃがいもの内側に影をつけてボカしたかったので、以下を指定しました。


box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7),
            inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3), 
            10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
            inset 31px 0px 96px -21px #B07331;

これで、じゃがいものベースが出来上がりました。
スクリーンショット 2019-12-15 11.10.49.png

中にじゃがいもの芽を記述して完了です。
(ここでは省略するので、詳細はcodepenをみてください)
https://codepen.io/thugumi-ishimaru/pen/abzvGaq

border-radius:より自然な形にするスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

border-radiusは要素の角を丸めるのに使います。
円形や、真四角のボタンを角丸にするために使用することが多いです。
今回はじゃがいもの曲線や、牛の体、切った具材の形等の変形・ご飯のモコモコ感を再現するのに使用しました。
ここでは、切った具材とご飯を例にあげます。

左上・右上・右下・左下の丸みの数値を個別で指定します。

  <div class="ninjin"></div>
  <div class="jaga"></div>
  <div class="niku"></div>
$ninjin: #FF5F00;
$ninjinShadow: #F44A1C;
$jaga: #F2BD38;
$jagaShadow: #CE8117;
$niku: #BE6B21;
$nikuShadow: #882B11;

.ninjin {
  width: 75px;
  height: 100px;
  background: $ninjin;
  border-radius:80% 26px 60px 23px; // 左上80%,左上26px,右下60px,左下23px
  box-shadow: inset -10px 10px 0 $ninjinShadow;
  transform: rotate(95deg);
}

.jaga {
  width: 115px;
  height: 100px;
  background: $jaga;
  border-radius: 80% 76px 70px 33px;// 左上80%,左上76px,右下70px,左下33px
  box-shadow: inset -11px -5px 0 $jagaShadow;
}

.niku {
  width: 97px;
  height: 57px;
  background: $niku;
  border-radius: 70px 26px 80px 23px;// 左上70px,左上26px,右下80px,左下23px
  box-shadow: inset -6px -5px 0 $nikuShadow;
}

この結果がこちらです。
にんじん、じゃがいも、肉それぞれいろんな丸みを持ったものができました。
上記で紹介したbox-shadowを使って影をつけて完了です!

スクリーンショット 2019-12-15 0.18.38.png

また、丸みのあるdiv同士を重ねることでご飯のもこもこ感を表現します。

まず、ご飯の中央部分とその周りを取り巻くもこもこ用のdivを作ります。

<div class="rice">
  <div class="rice_around">
    <div class="rice_aroundItem rice_aroundItem-1"></div>
    <div class="rice_aroundItem rice_aroundItem-2"></div>
    <div class="rice_aroundItem rice_aroundItem-3"></div>
    <div class="rice_aroundItem rice_aroundItem-4"></div>
    <div class="rice_aroundItem rice_aroundItem-5"></div>
  </div>
</div>

スクリーンショット 2019-12-15 19.28.07.png

このままではカッピカピの白米です。
インド人もびっくりです。

歯が割れちゃいけないので.rice_aroundItemに対して、border-radius:50%をつけ、丸みを出しご飯を柔らかくします。

スクリーンショット 2019-12-15 19.28.35.png

あとは、高さ・位置をpositionを駆使して調節・中の盛られている米粒たちを
表現すれば完成です。

スクリーンショット 2019-12-15 19.35.31.png

mask-image:角がある味(鋭角)をまろやかにするスパイス

mask-imageは要素のマスクレイヤーとして使用する画像の設定を行います。
上記の、「丸みのあるdiv同士を繋げたけど、鋭角が気になる。。。」といったところの解決方法として使用しました。

今回はカレールーの下記枠部分の曲線を表現するのに使いました。
スクリーンショット 2019-12-15 19.41.47.png

参考にした記事は以下です。
HTML + CSSでリアルな目玉焼きを作る

mask-imageradial-gradientを使用して、曲線部分を作成しました。

では具体的な作り方です。

まず上記のご飯と同様に丸みのあるdivを用意します。

<div class="roux">  
  <div class="roux_item roux_item-1"></div>
  <div class="roux_item roux_item-2"></div>
  <div class="roux_item roux_item-3"></div>
  <div class="roux_item roux_item-4"></div>
</div>

スクリーンショット 2019-12-15 19.45.41.png

原始人の肉みたいなのができました。
このままでは、角があり、カクカクしててカレールーには見えません。
トロッと感を出すために、ここでmask-imageradial-gradientの登場です。

まず、鋭角を隠すために.roux_hideを作成します。
作成した.roux_hideに対して、mask-imageradial-gradientを設定します。

/*色々省略*/


.roux {
    &_hide {
        background: $roux;
        position: absolute;
        z-index: 2;
        &-1 {
        width: 70px;
        height: 60px;
        -webkit-mask-image: radial-gradient(circle at 50% -170%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        top: -43px;
        left: 108px;
        transform: rotate(-1deg);
        }
        &-2 {
        width: 70px;
        height: 50px;
        right: -32px;
        top: 92px;
        transform: rotate(85deg);
        -webkit-mask-image: radial-gradient(circle at 50% -180%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        }
        &-3 {
        width: 60px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -130%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-173deg);
        top: 95%;
        right: 32%;
        }
        &-4 {
        width: 40px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -160%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-93deg);
        top: 150px;
        left: -39px;
        }
    }
}

その結果がこちらです。

スクリーンショット 2019-12-15 19.51.36.png

mask-imageで作成した要素(.roux_hide)のくり抜きを設定し、radial-gradientで円の中心位置、サイズ、色を指定し透明にくり抜くようにしています。

盛り付け:お母さん「ご飯よーーーーーーー!!!!!」

色々と端折りましたが、ついに盛り付けです。

実家のカレーはルーを真上からかけます。

1つ1つのパーツをAtomsから作成したので、codepenで作成したもの1つ1つをコピペでペッと貼るだけです。
その後、位置・サイズ調整等を行い、カレーライスの!!!完成です!!!!!!

スクリーンショット 2019-12-14 20.06.55.png

さいごに

HTMLとCSSだけでカレーライスを作りました。
CSSでお絵かきする時に以下3つを覚えてってください!

  • box-shadow:影をつけるよ
  • border-radius:丸みを出してふんわりさせるよ
  • mask-image(IEは対応してません😈):滑らかな曲線にするよ

Twitterやってます!よかったらフォローしてみてください!

ありがとうございましたー!
カレーアドベントカレンダー引き続きよろしくお願いします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした