読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

【HTML・CSS】オシャレなベルトっぽい部品を作った

chuckです。

HTMLとCSSでオシャレなベルト風アイテムを作ってみたいと思います。

 

ひとまずの完成図はこちら。

f:id:chuck0523:20151005214416p:plain

こちらをベースにして試行錯誤していこうかなと思います。

 

 

基本となるHTML・CSS

HTML

gist102a30d5f525b396e19c

 
CSS

gistbaaafe7ee4c818062a85

 

divを2重にしています。親のdivを赤色の背景に使い、子のdivを破線に使っています。

えーと、以上です笑

ポイントはborderにsolidではなくdashedを使ってるところくらいですかね…。

 

色変えてみる

このまま終わっては寂しいので、バリエーションを用意してみます。

f:id:chuck0523:20151005220255p:plain

3本用意してみました。

ちょっと細くしました。ベルトっぽさが増しました。

 

 擬似要素使う

保守性を高めるために、もう少しコードをいじります。

ベルトの破線部分はスタイル に関する箇所なので、HTMLでdivを用意するのはよろしくありません。なるべくCSSのみで簡潔させるべきです。

そこで擬似要素を使います。今回は擬似要素のafterを使って、子要素のdivに充てていたスタイルを適用させ直します。

それがこちら。

gistc70788e1a3b3ce896ee8

Sassの自動コンパイルのせいで読みにくいかもしれません…すみません…。

 

擬似要素にはcontent属性

ちなみに、擬似要素にはcontent属性が必須です。空文字(””)でもいいので指定しましょう。

また、今回のように擬似要素をスタイルのために使う場合、display: block; も事実上必須です。でないと、表示されません。

 

 スッキリしたHTML

スタイルを擬似要素に投げたので、HTMLがスッキリしました。

gist81fa89b5d245fa402368

本来の目的であるベルトのために、divが使われています。

 

よりCSS3っぽく

せっかくのなので、よりCSS3らしくします。回転させます。

そして背景画像を用意したものがこちら。

f:id:chuck0523:20151005225448p:plain

これ、ベルト邪魔ですね…。

 

まとめ

おしゃれなパーツを思いついたは良いものの、使いドコロに困りました。

 

最終的なコード

HTML

gist0ac760183a5dbfe2ec0a

 

CSS

gist1488ca5488cbc77587a4

 

slim

gist67a0c4b0de7b6cdb00f6

 

SCSS

gistd9db8c71ebfbb550c8a0