Blog

CSS3でステップのリストをつくる

2013.05.01Cat:css3 デザイナー

レスポンシブのデザインでのコーディングをするとき、要素の形や表現の方法を、

デバイスの幅に応じて変化させたいときがよくあります。

形を変えたいとき、画像によって変えることが多かったのですが、

スマートフォンなどでは、あまり多くの画像を使ってしまうと、

読み込みに時間がかかるなどして、ストレスを感じさせてしまうサイトになってしまう可能性が大きくなります。

 

これを回避するために、CSS3を駆使して、できるだけ画像を使わずにデバイスごとの

形状の変化をさせようと思ったのですが、

今回ショッピングサイトでのステップを示すリストを作るときに、

三角形を含む形の作り方を身につける必要がでてきたので、

作ってみることにしました。

 

↓こちらが作ってみたもの

DEMO

 

方法

HTML

シンプルにリストで要素を準備します。

こちらをCSSによって形を作っていきます。

 

1.擬似要素::afterとborderを使って、三角形を作る

CSS

 

 

まずはCSSのborderの特徴を利用した方法です。

borderは、2px以上の太さで、縦横を色違いで設定した場合、縦横の境界の部分は斜めにできます。

縦横のborderの境界

 

borderを設定する要素の大きさが0の場合には、それぞれの線の境界が接するために、

色違いの部分が三角形の形になります。下の図でのborder-leftの部分にあたります。

borderで三角形の境界ができる

 

さらに三角形として見せる必要のない部分を透明色に設定すれば、三角形が出来上がります。

今回はrgbaをつかって透明色に設定しました。

三角形以外を透明色に

 

これを擬似要素の::afterで対象要素に設定し、position:absoluteなどを使って位置を調整すれば、

ステップリストの三角形の部分をつくることができます。

 

ただ、この方法で作った場合、box-shadowを設定した場合に、透明部分もboxとして認識されてしまうため、

影が不自然になってしまいます。

影が不自然に

 

 

その場合は、もうひとつの方法を使います。

2.擬似要素::afterを45度回転させて、三角形に見せる

先程の方法と同じくpositionで配置した擬似要素の::afterで三角部分をつくります。

回転前

まずは、::afterの要素を回転させ、ひし形を作ります。

回転させる

 

ただ、この状態では、三角部分の大きさが大きめになってしまうので、

::afterをかけている要素の高さを√2で割った高さに、widthとheightを設定します。

大きさを調整

 

後は、::afterの要素と対象の要素の色をそろえれば、三角の部分ができたように見えます。

完成

 

ただこのままだと、::afterの対象となっているようその中に文字がある場合に、

::afterで追加したひし形の見えていない部分が、文字を隠してしまいます。

そのため、中の文字を<span>などで囲み、

z-indexの値を::afterよりも高く設定して、隠れないようにする必要があります。

 

これで、box-shadowをかけても自然な形を作ることができました。

box-shadowをつけられる三角

こちらも、影の方向や大きさの設定によっては、

ひし形部分が浮き出てしまうので注意してください。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ