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

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

こんにちは。元島です。

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 ※モダンブラウザのみ対応

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

あなたにおすすめ

ロイヤリティフリーの無料ストックフォト(写真)1+8選... ロイヤリティフリー(ライセンスフリー)の無料写真を集めているサイトも順調に増えてます。全員が発信者となる現在では、こうしたサイトの重要度・便利度は増すばかりですね。 基本的にパブリッックドメイン(商用利用可能・無料・用途の制限なし)で...
リニューアルのケーススタディ、PSDファイルから自動コーディング、ロゴ検索ツール、グラフ用フォント(... こんにちは。 今週の【UX・デザイン】の情報共有です。 UI ・UX アプリのリニューアルのケーススタディ 2年間まったく更新されなかった健康保険アプリのリニューアルの話です。 他社はどのようにしてリニューアルを行...
UI・UXのベストプラクティス、フラットデザインについての実験結果、ATLASSIANの新CI、無料... こんにちは! 今週の【UX・デザイン】の情報共有です。 UI ・UX UI・UXのベストプラクティスまとめ 心理学とマーケティングを双方のスペシャリストであるNick Kolendaさんのサイトです。 彼のサイト内...
「Design Better」ポッドキャスト、CSSでのレスポンシブな端末、無料フォント、日本科学未... お疲れ様です。 今週の【UX・デザイン】の情報共有です。 UI ・UX 「Design Better」のポッドキャスト 他社や海外において、どのようなUI/UXの戦略が実践されているのか、そしてどのような手法がベストプラ...