border-radius

デザイン五輪書

スシ食いねェ!border-radiusプロパティで寿司を握る!?

読了までの目安時間:約 27分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

スシ食いねェ!border-radiusプロパティで寿司を握る!?

CSSで絵を書く!??

CSSはウェブデザイナーの武器!

Webページ上では、CSSを色々組み合わせる事で、様々なデザインを表現する事ができます。
そのCSSもバージョン3に進化し、表現できる幅も広がっています。
今では、単に文字に色を付けて目立たせたり、文字の表示位置を変更すると言った単純な表現以上の事ができます。

複雑な図形は難しいですが、単純なものでしたら、CSSを使って絵を書く事だってできるのです。
画像を描画するソフトに取って代わるまでにはまだまだ年月が必要ですが、徐々に、CSSの能力が追い付いて来ています。

Photoshopで言う「レイヤー」や「グラデーションオーバーレイ」、「ドロップシャドウ」や「シャドウ(内側)」、「変形」や「ぼかし」・・・などなど、Photoshopと同等の機能がCSSの新機能として追加されました。
何年後になるかは分かりませんが、IllustratorやPhotoshopに、書いた絵をCSSで書き出す・・・そのような機能が搭載される時代も来るかもしれません。

▲もくじへ戻る

スシ食いねェ!

とは言っても、普段、CSSを使いこなせていない方にとっては、あまりピンと来ない話かもしれません。
そこで、今回はCSSを使って絵を書いてみる事に挑戦してもらおうと思います。

今回の絵のテーマは寿司です。
作例を作った後は、夕飯に寿司でも買って帰りたくなるかもしれませんよ。

・・・そんな私も、久々に寿司が食べたくなりました。

▲もくじへ戻る

玉子を握る

図形の元は<div>タグ!

では、早速作業に入りたいと思います。
玉子の注文が入りましたので、CSSでちゃちゃ~っと握ってしまいましょう。

絵を構成する元となるのは、<div>タグでくくった四角形の範囲です。
これを、CSSで変形して行きます。

<div>タグで図形を作る際のポイントですが、背景側に近いものほど先に<div>タグを配置するようにします。
HTMLでは、ボックス同士が重なった場合、後に記述したものが前面側に表示される仕様になっているからです。

HTMLの記述順

Photoshopなど、デザインソフトで言うレイヤーは、レイヤーパネルで上に配置されたものが前面に表示されます。
HTMLの場合はそれとは逆の順番になりますので、間違わないようにしたいものです。

ちなみに、CSSの「z-index」プロパティを利用する事で、記述順に左右されず、ボックスの重ね順を変える事ができます。
ですが、今回の作例では「z-index」プロパティを使用するまでもないですので、記述順を意識しながら作業を行ってみましょう。

玉子寿司は玉子、シャリ、海苔の三つの部位で構成されています。

玉子寿司

重ね順を考えると、背面のシャリ、中間の玉子、前面の海苔の順番で<div>タグを記述します。
それぞれの<div>タグには「id」や「class」を書き加えて、CSSでデザインを調整できるようにします。
今回は同じ設定を使い回しますので、「class」を書き加えてみましょう。

<div class="syari"></div>
<div class="egg"></div>
<div class="egg_laver"></div>

▲もくじへ戻る

玉子寿司の各サイズと色を設定

では、CSSでそれぞれのパーツにデザインを加えて行きましょう。
まずは、各<div>タグのサイズを調整します。

.syari{
	width:131px;
	height:56px;
}
.egg{
	width:155px;
	height:56px;
}
.egg_laver{
	width:34px;
	height:84px;
}

「width」プロパティは横幅、「height」プロパティは高さを指定しています。

それぞれの<div>タグには色が設定されていませんので、現段階では、ただ白い四角形が並んでいるようにしか見えません。
ですので、それぞれの<div>タグに背景色を設定しておきましょう。

背景色の設定は「background」プロパティで行います。
色の指定は3桁、もしくは6桁の数字で行います。

3桁の場合、1桁目が赤色、2桁目が緑色、3桁目が青色を表します。
6桁の場合、1桁目と2桁目が赤色、3桁目と4桁目が緑色、5桁目と6桁目が青色を表します。
3桁よりも6桁の方が、細やかな色合いを設定する事ができます。

使用する単位は「0~9」、そして、「a~f」までの16進数を使用します。
数字が多いほど、その色味が強くなります。
また、赤緑青の数値が同じ場合は無彩色(グレースケール)になります。

それを踏まえた上で、CSSの設定に背景色の設定を書き加えます。

.syari{
	width:131px;
	height:56px;
	background:#fff;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
}

背景色の設定

▲もくじへ戻る

玉子寿司の余白設定

シャリの部分が白色なので、記事の背景色を白に設定している方にはちょっと分かりづらいかもしれませんが、<div>タグは全て左寄せで表示されています。
全ての<div>タグに中央寄せの設定を行いましょう。

<div>タグのようなブロック要素ごと中央寄せで表示する場合、ブロック要素の横幅をCSSで指定して、その時に生じる左右の余白のサイズを自動に設定します。
すると、左右の余白が自動で同じ数値になる為、結果的に、ブロック要素が中央寄せで表示されるのです。

今回は、元から横幅を指定していますので、余白の設定のみを追加します。
左側の余白の設定は「margin-left」プロパティを、右側の余白の設定は「margin-right」プロパティを使用します。
自動を表す値は「auto」です。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
}

玉子寿司を中央寄せ

このように、ブロック要素の外側の余白を設定する「margin」プロパティですが、実は、負の値を設定する事もできるのです。
正の値を指定した場合、指定した数値分の余白が追加されるのですが、負の値を指定した場合、指定した数値分、ブロック要素がその方向へズレ込みます。
今回、このテクニックを利用する事で、玉子寿司の<div>タグの位置を調整します。

まず、玉子をシャリの上の位置に移動させましょう。
その際、シャリの高さ分だけ上方向に移動すると、玉子とシャリの位置がちょうど重なってしまいます。
加えて、玉子半分分の高さも追加すれば、見た目的に玉子寿司に見えます。

シャリの高さが56px、玉子の高さが56pxですので、56px+28pxで、84px分移動する事になります。
従って、玉子の上余白の指定を「-84px」にするのです。
上余白の設定は「margin-top」プロパティを使用します。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
}

margin-topの設定

同じ要領で、海苔も上方向に移動します。
玉子の高さ分上方向に移動させれば良いので、「margin-top」に「-56px」を指定します。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	margin-top:-56px;
}

お気付きかと思いますが、玉子寿司が上の行にはみ出してしまっています。

玉子寿司の位置のズレ

ですので、はみ出てしまった高さ分、玉子寿司全体を下方向へ移動させる必要があります。

この場合、元々の位置の基準となっているのはシャリの部分です。
シャリの上部分の余白を指定する事で、玉子寿司全体の位置を下げる事ができます。
シャリの「margin-top」の値を、玉子の高さの半分の値、「28px」に指定します。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
	margin-top:28px;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	margin-top:-56px;
}

玉子寿司の位置を修正

▲もくじへ戻る

シャリを丸める

今のままではシャリが角ばってしまっていますので、シャリに丸みを付けたいと思います。
こう言う時に使用するのが「border-radius」プロパティです。

「border-radius」プロパティは、本来、罫線の角に丸みを帯びさせる目的で使用するプロパティです。
ですが、CSSで罫線の指定をしていない場合、コンテンツそのものが丸みを帯びるのです。
このテクニックを利用し、シャリを丸めます。

「border-radius」プロパティで指定した数字分、コンテンツの角が丸くなります。
ちなみに、コンテンツの縦、もしくは横の長さの半分の長さを「border-radius」プロパティで指定した場合、角は円を描くように丸くなります。
これは、円の直径の長さとコンテンツの縦、もしくは、横の長さが一致する為です。

今回は、シャリの縦の長さの半分の数字を「border-radius」プロパティの値として設定します。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
	margin-top:28px;
	border-radius:28px;
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	margin-top:-56px;
}

シャリを丸める

ようやく、玉子寿司っぽく見えて来ました。

▲もくじへ戻る

玉子寿司に影を付ける

次は、シャリの下の部分に影を落とす設定をします。
この際に使用するのが「box-shadow」プロパティです。

box-shadow:影の横方向の距離 影の縦方向の距離 影のぼかし具合 影の色;

box-shadowの設定

影の色の部分に関してですが、前述した3桁や6桁の色番号を指定する方法でも構いません。
ただ、今回は影ですので、色が透明の方が自然です。
そこで、透明色の設定のできる色の指定方法を利用しましょう。

透明色を設定する場合、「RGBA」や「HSLA」と言う色の指定方法を利用します。
今回は、一般的な「RGBA」を利用します。

color:rgba(Rの値,Gの値,Bの値,Aの値);

Rがレッド(赤)、Gがグリーン(緑)、Bがブルー(青)、Aがアルファ値(透明)です。
アルファ値とは、PhotoshopやGIMPのアルファチャンネルでも利用される、透明具合を表す数値の事です。

RGBカラーの指定は「0~255」までの数字を使います。
数字が多いほどその色味は増し、全ての値が255の場合は真っ白になります。
RGBカラーそれぞれの値が同じ場合、色は無彩色(グレースケール)になります。

アルファ値は「0~1」までの数字を使います。
「0」の場合は透明、「1」の場合は不透明になります。

アルファ値の指定の際、基本的に小数点を利用しますが、小数点の前の「0」は省略する事が可能です。
例えば、「0.8」の場合は「.8」と記述する事も可能です。

これらを踏まえた上で、シャリに影を落としてみましょう。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
	margin-top:28px;
	border-radius:28px;
	box-shadow: 10px 10px 20px rgba(0,0,0,.5);
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	margin-top:-56px;
}

シャリに影を落とす

▲もくじへ戻る

玉子寿司に立体感を付ける

今度は、玉子寿司に立体感を付けたいと思います。

物体に立体感を付ける際のポイントとなるのが、光沢と影です。
ただ、現時点でボックスに光沢を付けるプロパティは存在しませんので、影のみを指定する事にします。
ボックスに影を落とす際に使用するのが「box-shadow」プロパティです。

・・・でも、待って下さい。
「box-shadow」プロパティは、ボックスの外側に影を落とす為のプロパティでしたよね?
ですので、そのまま使用する事はできません。

実は、「box-shadow」プロパティの最後に「inset」と言う値を書き加える事で、影がボックスの内側に表示されるようになるのです。
Photoshopのレイヤースタイルで言う「シャドウ(内側)」と同じ状態になります。

box-shadow:影の横方向の距離 影の縦方向の距離 影のぼかし具合 影の色 inset;

inset

ただ、この際に問題になるのがシャリの部分です。
同じセレクタに同じプロパティを指定すると、後に指定したプロパティで元のプロパティが上書きされてしまいます。
つまり、そのまま書き加えると、先ほど設定したシャリの下の部分の影が消えてしまうのです。

そこで、シャリの部分に関しては、元ある影の設定に書き加える形で、立体感を付ける為の影の設定も記述します。
その際、「,」を使って設定を書き加えます。

.syari{
	box-shadow:シャリの下の影の設定 , シャリに立体感を付ける影の設定;
}

海苔の部分に関しては、背景色に黒色を使用していますから、影を付けても意味がありません。
ですので、海苔の部分には「box-shadow」プロパティの設定を行いません。

これらを踏まえると、以下のようなCSSになります。

.syari{
	width:131px;
	height:56px;
	background:#fff;
	margin-left:auto;
	margin-right:auto;
	margin-top:28px;
	border-radius:28px;
	box-shadow: 10px 10px 20px rgba(0,0,0,.5) inset , 10px 10px 20px rgba(0,0,0,.5);
}
.egg{
	width:155px;
	height:56px;
	background:#fcf24c;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
	box-shadow: 10px 10px 20px rgba(0,0,0,.5) inset;
}
.egg_laver{
	width:34px;
	height:84px;
	background:#000;
	margin-left:auto;
	margin-right:auto;
	margin-top:-56px;
}

玉子寿司に立体感を付ける

ヘイ、玉子お待ちィ~!

▲もくじへ戻る

マグロを握る

玉子寿司の復習

マグロ寿司も、基本的には玉子寿司と手順が同じです。
途中までは、復習のつもりで作業を行ってみましょう。

まず、マグロ寿司を構成する領域となる<div>タグと、その<div>タグのサイズをCSSで設定します。
マグロ寿司のシャリの部分に関しては、玉子寿司の時に設定したシャリのCSSをそのまま流用しますので、特別な設定は必要ありません。
よって、シャリ部分の「class」指定は、玉子寿司のシャリと同じものを設定して下さい。

<div class="syari"></div>
<div class="tuna"></div>
.tuna{
	width: 182px;
	height: 56px;
}

マグロ寿司

マグロの部分に色を付け、中央寄せにします。
中央寄せは、左右の余白を自動に設定する事で、結果的に中央寄せにします。

加えて、マグロを上方向に移動させます。
移動距離は、シャリの高さと、マグロの高さの半分を合計した数値に設定します。
ですので、56pxと28pxの合計で、84px移動します。

結果、マグロ部分のCSSは以下のようになります。

.tuna{
	width: 182px;
	height: 56px;
	background: #e60012;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
}

マグロのCSS設定

マグロ部分に立体感を出す為、影を設定します。

.tuna{
	width: 182px;
	height: 56px;
	background: #e60012;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
	box-shadow: 10px 10px 20px rgba(0,0,0,.5) inset;
}

マグロに影を

ここまでザーッと作業を行って来ましたが、大丈夫でしたでしょうか?
もし分からない部分があった場合は、玉子寿司の部分の説明を、もう一度確認してみて下さい。

▲もくじへ戻る

マグロの角に丸みを与える

最後に、マグロの角に丸みを与えたいと思います。
使うプロパティは、勿論、「border-radius」プロパティです。

ただ、今回は少し、潰れた形の角にしたいと思います。
その際は「border-radius」プロパティで指定する値の書き方を変える必要があります。

シャリの部分で「border-radius」を指定する際、値を28pxに指定しました。

.syari{
	border-radius:28px;
}

実はこの部分、こう言う記述方法もあるのです。

.syari{
	border-radius:28px / 28px;
}

それぞれの28pxが何を表すのかと言うと、横方向に曲げる距離と、縦方向に曲げる距離を表しています。

角丸の詳細

border-radius:横方向に曲げる距離 / 縦方向に曲げる距離;

横方向に曲げる距離の方を長くすると平べったく、縦方向に曲げる距離の方を長くすると縦長な角になります。
ちょっと説明だけでは分かりづらいかと思いますので、実際にマグロの角の部分を平べったく潰してみましょう。

.tuna{
	width: 182px;
	height: 56px;
	background: #e60012;
	margin-left:auto;
	margin-right:auto;
	margin-top:-84px;
	box-shadow: 10px 10px 20px rgba(0,0,0,.5) inset;
	border-radius: 25px / 10px;
}

マグロ寿司の角を調整

注意点ですが、「border-radius」プロパティの角の値を指定する際、「/」の部分が抜けると全く別の意味になってしまいますので、注意して下さい。

border-radius:左上と右下の角 左下と右上の角;

角丸の設定

ちなみに、数字を4つ指定すると、こう言う意味になります。

border-radius:左上の角 右上の角 右下の角 左下の角;

時計回りの順番です。

四隅の角丸の調整

四隅、それぞれの曲げ具合を変えたい場合に重宝します。

これで、マグロ寿司は完成しました。

ヘイ、マグロお待ちィ~!

▲もくじへ戻る

完成

完成例

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :    

ホームページ作成 Webデザイン   コメント:0

この記事に関連する記事一覧

TOPへ戻る