身近なモノをCSSで表現してみよう 「ボーダー柄のシャツ」編

身近なモノをCSSで表現してみよう 「ボーダー柄のシャツ」編
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

こんにちは。元島です。

CSSという言葉を聞いた事がありますか?

CSSとは、WEBページのデザイン/レイアウト/アニメーション等、WEBページの見た目の制御に関する仕様・技術の事です。

僕の普段の業務では、専門のWEBデザイナーがデザイン制作を行っている為、プログラマーの僕がCSSを扱う場面はほぼありません。

かといって、デザイン専門職がいるのだから、プログラマーの僕はCSSを知らなくても良いのか?
というとそうではないと思います。

何故かというとCSSには
・WEBページの体感速度を向上させる技法、
・ページ自体を高速化する技法
等の見た目だけでなく、WEBページの性能と動作に関わる技術も沢山含まれているからです。

という事で、勉強を兼ね身近なモノをCSSで表現していく事で、自分なりにCSSの知識を向上させようと思います。

今回は、シンプルなボーダー柄のシャツをCSSで表現します。
下記の画像を参考にしました。

[bitwabe]身近なモノをCSSで表現してみよう_20160310

こちら完成品です。
画像は使わず、CSSと2つのDIV要素で1つのシャツを作成しています。

[bitwabe]身近なモノをCSSで表現してみよう_20160310 (1)

HTMLとCSSはこちらになります。
HTML

CSS ※モダンブラウザのみ対応

引き続き、次回の記事で詳しい解説をしていこうと思います。
次回も、是非見て頂けたら嬉しいです!
お忙しいところ、ご覧頂きありがとうございました。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。