CSS CSSで遊んでみる

どうも、irisawaです。
今日のCSSは、CSSZenGardenから提供されているサンプルHTMLを使っての実習等を行いました。
以下、内容となります。

今日はまず、覚えると凄く便利なLinuxのコマンドを2つ紹介したいと思います。
1つ目は、wgetコマンドです。このコマンドは、URLを指定する事でローカルにそのファイルを保存する事が出来る大変便利なコマンドです。URLさえ知っていれば、わざわざブラウザを立ち上げないで済むのが良いですね。実際の使用例は、以下の通りです。ここでは、hogehoge.co.jpのindex.phpというファイルを保存しようとしています。

wget http://www.hogehoge.co.jp/index.php

2つ目が、openコマンドです。
これは、指定されたファイルを適当なアプリケーションで開く事の出来るコマンドです。openコマンドにはーaというオプションがあり、このオプションを使う事で指定されたアプリケーションで開く事が出来る様になります。
使用例は以下の通りです。index.phpをemacsで開こうとしています。

open -a emacs index.php

では、今日の内容に入っていきましょう。
最初に、前回紹介したサイトCSSZenGardenの中から自分達が気に入ったCSSサンプルを選んでいきました。

選んだ、CSSが以下になります。

http://www.csszengarden.com/?cssfile=031/031.css
http://www.csszengarden.com/?cssfile=200/200.css
http://www.csszengarden.com/?cssfile=030/030.css
http://www.csszengarden.com/?cssfile=099/099.css
http://www.csszengarden.com/?cssfile=064/064.css
http://www.csszengarden.com/?cssfile=098/098.css
http://www.csszengarden.com/?cssfile=014/014.css
http://www.csszengarden.com/?cssfile=016/016.css
http://www.csszengarden.com/?cssfile=040/040.css
http://www.csszengarden.com/?cssfile=052/052.css
http://www.csszengarden.com/?cssfile=150/150.css
http://www.csszengarden.com/?cssfile=167/167.css
http://www.csszengarden.com/?cssfile=125/125.css
http://www.csszengarden.com/?cssfile=115/115.css
http://www.csszengarden.com/?cssfile=105/105.css
http://www.csszengarden.com/?cssfile=101/101.css

新卒5人のセンスが爆発してますね。それぞれ個性的で、見ていてとても面白いです。
しかしこのサイトには、教材として不十分なものもある為、「A List apart」というサイトを教材として使用し、色々デザインを変えて遊んでみました。

今日の授業の宿題として、「A List apartのCSSを調査して、こんな事をしてみた/この宣言はこういう機能をもっているという事を1人3つ探し出す」というものが出されました。なかなか難しそうですが、せっかくの機会なので他の新卒が見つけられない様な事や宣言を、探していこうと思います。

—-
(2008/07/17 17:02 hirafuji追記)
動画をご覧下さい〜!

1 件のコメント so far »

  1. by スタートアップ研修記 » CSS background、セレクタについて, on 07.22.08 @ 5:56 PM

     

    [...] 今日のCSSは前回のCSS講習で出された「A List [...]

Comment RSS · TrackBack URI

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree