Tweet

Pocket

デジハリの課題として【CSSZenGarden】にチャレンジしました！

＜　CSSZenGardenのルール　＞

◉HTMLファイルは触らないこと
◉CSSのみでデザインすること

今回のこの課題が出た時期がグループワークとぶつかったこともあり、「授業最終日（12/24）までにやってみて」との寛大なお言葉を先生よりいただいておりました。
非常に苦手とするコーディング・・・。全力で逃げたいところでしたが。
せっかくの機会だからと、自分なりにチマチマと頑張ってみました！！

↑画像をクリックするとページが表示されます

CSSソースでおかしいとかデザインがちょっととか、「もっとこうすりゃいーのに」とかお気づきの点が多々あると思いますが、初めてのチャレンジということで大目に見ていただけると助かります・・・。
むしろ、お気づきの点をご指摘いただけるとありがたいですが！！

＜　デザインについて　＞
机の上をイメージしました。「月の写真」以外は自分で全部描いてます！
○コーヒーとえんぴつ
これはチュートリアルサイトを参考にベーシックの課題用に当時作成したものです。特に使うこともなく勿体なかったので今回使用してみました。
○写真（雲と空中に浮く木）
10月1日に行われたクラブイベント「Energy Informatic 1st」に出品させていただいた作品です。これもチュートリアルサイトを参考にしつつ、自分なりに手を加えました。

＜　チャレンジしてみて思ったこと　＞
元のHTMLを見て「何コレ！？どういう構造か意味ワカラン．．．」と言うのが一番初めの感想。
そして、CSSZenGardenで紹介されている作品の全ての元がコレって本当なのか！？と本気で疑いました。サイトで紹介されている作品のソースを見まくり、本当に元のHTMLを触らずにCSSのみでデザインを作っているんだと確認。
CSSの可能性を感じてワクワクするやら、構造が理解できない自分がいかにコーディングが苦手かを思い知りました…。
凹んでいても仕方ないので、とりあえずやってみよう、と取り組んでみる。
色々試す→（思い通りにならず）失敗→授業の復習メール確認＋ネットで調べる→やり方わかる！
を延々と繰り返し、どうにかこうにか形にできました。

まだまだ対応できてないブラウザ（IE６が対応できてません・・・）があったりと完璧な形ではありませんが、自力で人様のソースをコーディングした、というのは非常に達成感を感じました！
最後には構造もわかり、時間はかかったけども自分の苦手も確認できたし、何よりものすごく面白かった♪

今後もweb業界でやっていきたいと思うなら絶対避けられないコーディング。
デザインももちろんですが、コッチもキチンと勉強せねばと思いました。
CSSZenGarden、構造を見れば見るほど変…間違った、面白い構造だと思います。
また別のデザインでチャレンジしたいです！！