CodeZine(コードジン)

特集ページ一覧

デザインサンプルで学ぶCSSによるスタイリング~「フォーム(お問い合わせフォーム)」編

CSSで作るWeb用パーツ(7)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/10/03 14:00
目次

封筒のスタイリング

 それでは、CSSでエアメール封筒風のスタイリングをしていきましょう。

repeating-radial-gradient()関数を使って斜線を作る

 エアメール風の封筒を縁取る赤、青、白の斜線は、CSS3のrepeating-linear-gradient()関数を使って実装しています。

 ここでの構文は次のようになっています。第1引数に斜線の角度を指定し、その後は斜線を作る色とその色の始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定でき、色の指定が終わった所で、再び最初に指定した色から繰り返されます。

リスト5 repeating-linear-gradient()関数の構文
repeating-linear-gradient(斜線の角度, 色1, 色1 終点, 色2 始点,色2 終点, 色3 始点, 色3 終点, 色4 始点,色4終点);

 実際のコードは次のとおりです。-45度方向(-45deg)に軸を伸ばし、赤(#cc0000)で始まり30pxで終わり、30pxから透明(transparent)になり50pxで終わり、50pxから青(#0000cc)になり80pxで終わり、80pxから透明になり100pxで終わるグラデーションの繰り返しという指定になります。

リスト6 repeating-linear-gradient()関数で斜線を作る/CSS(sample.html)
#sample {
  margin:50px auto;
  width:600px;
  padding:10px;
  background-image:repeating-linear-gradient(-45deg, #cc0000, #cc0000 30px, transparent 30px, transparent 50px,#0000cc 50px, #0000cc 80px,transparent 80px, transparent 100px),url(bg.png);
}

複数の背景を指定

 CSS3では要素に複数の背景を適用できます。複数の背景は、各レイヤーをカンマで区切って指定します。最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

 サンプルでは、斜線の指定の後、カンマで区切って、url(bg.png)を指定しています。

リスト7 repeating-linear-gradient()関数で斜線を作る/CSS(sample.html)
#sample {
  ~中略~
  background-image:repeating-linear-gradient(-45deg, #cc0000, #cc0000 30px, transparent 30px, transparent 50px,#0000cc 50px, #0000cc 80px,transparent 80px, transparent 100px),url(bg.png);
}

 続いて、CSS3のborder-radiusプロパティで8pxの角丸を指定、box-shadowで水平方向に0、垂直方向に1px、6pxのぼかしでグレー(#333)のドロップシャドウを指定します。

リスト8 角丸とドロップシャドウ/CSS(sample.html)
#sample {
  ~中略~
  border-radius:8px;
  box-shadow:0 1px 6px #333;
}

 ここまでで、次のようになります。

図5 背景に斜線を引く(sample.html)
図5 背景に斜線を引く(sample.html)

背景を仕上げる

 #sampleのdivボックスには、斜線背景を指定しました。この上に、さらに背景画像(bg.png)を重ねます。#sampleの中のform要素に背景画像を指定します。

リスト9 formに背景を指定/CSS(sample.html)
form {
  background:url(bg.png);
  padding: 30px;
}

 #sampleのdivボックスには、10pxのpaddingを指定しているため、10px幅の斜線が表示されます。斜線の幅を大きくしたい場合には、#sampleのpadding幅を大きくします。

 ここまでで、次のようになります。

図6 背景を仕上げる(sample.html)
図6 背景を仕上げる(sample.html)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5