2011年6月22日水曜日

RunRunRun

今日から毎日走ることに決めた嫁と俺。

往復で3キロぐらいを今日は走った。
体力つけるぞー!

CSS 基礎

CSS3を勉強する前にCSSの基礎。

書式とさまざまなセレクタ

◆基本書式

属性(プロパティ)

h1 { color : #ff0000;}
↑        ↑
セレクタ    値



◆セレクタ指定方法

-- 要素セレクタ --
   h1 {・・・}                h1要素

-- 子孫セレクタ --
    div img {・・・}          div要素の下の階層のimg要素

-- 属性セレクタ --
     p[id] {・・・}             id属性が指定されているp要素
     p[id="test"] {・・・}   id属性が"test"であるp要素
     p.class_test {・・・}    class属性が"class_test"であるp要素

-- idセレクタ --
     #id_test {・・・}         id属性がid_testである要素

-- クラスセレクタ --
     .class_test {・・・}      class属性がclass_testである要素

そのほか疑似クラスを使用する方法がある。

hover疑似クラス  div:hover {・・・}    div要素にマウスカーソルが置かれているときのプロパティ


などなど。

2011年6月21日火曜日

Rosetta Stone 来たー!!

今日、なけなしのボーナスをはたいて買ったRosettaStoneが来た!

買ったのはレベル1~5の英語のやつでいまだとボーナスキャンペーンで25%OFF。

RosettaStone ボーナスキャンペーン


以下パッケージ内容





今日からRosetta人になれるよう、こつこつやっていこ。
7がつからはノー残だし^^;

2011年6月20日月曜日

PHPで写真共有サイト構築 -3 ファイルリスト表示

今回はアップロードされたファイル一覧を表示する。

一覧表示するまえの画面からは写真アップされたDir(photoDir)が
渡される。

ディレクトリ構成としては、

photoDir/images

              /thumbs
以下ポイント。
  1. サムネイル画像ディレクトリ内のファイルを検索して取得
  2. ソート処理でファイル名をソート
  3. サムネイル画像クリック時にimages画像を表示できるようにリンクをつける
  4. cssのclear='left'で5枚ごとにサムネイルを改行

まず、1.のサムネイル画像ディレクトリのファイル検索方法。
PHPでディレクトリが存在するかどうかと読み込み可能かのチェックを行う。

それでOKならdir関数を使ってディレクトリクラスを取得する。

if (is_dir($thumbDir) and ($thumbDir != "/")) {
    if(is_readable($thumbDir)){// — ファイルが読み込み可能かどうか
      $ch_dir = dir($thumbDir); //ディレクトリクラス

つぎに2.のソート処理を行う。
あらかじめupload時に写真作成日時でファイル名を作成しているので、ソートすることで
時系列に一覧を表示できる。

ソート処理はarray関数で配列を作成し、そこにarray_push関数でファイル名を詰め込んだ後、
sort関数を呼び出せばOK。

// ソート処理
      $array_file = array();
      while (false !== ($file_name = $ch_dir -> read())){
        //ファイル名配列に順に入れていく
        array_push($array_file, $file_name);
      }
      sort($array_file);
      $ch_dir -> close();


後は4.ソートされたファイル名をもとにサムネイルを並べるとともに、
そこにリンクをはる。

またその際に、5.cssのclear='left'でサムネイル画像の回り込みを解除することで
改行するようにする。今回は5つ画像を表示すればが改行する。

//ディレクトリ内の画像を一覧表示
      foreach ($array_file as $key => $val) {
        $file_name = $val;
        $thumb_path = $thumbDir .$file_name;
        $image_path = $imageDir .$file_name;
        if (@getimagesize($thumb_path)){ //画像かどうか?
          echo "
"; echo ""; echo ""; echo ""; echo "
"; $cnt++; } if ($cnt>=5) { echo "
"; $cnt = 0; } }

これで一覧表示は完了!!

2011年6月19日日曜日

サプライズ

朝起きると嫁から父の日プレゼント。


毎回脅かされますなー。

幼稚園 下の子 授業参観

今日は幼稚園の授業参観。
先週は上の子の学校訪問があっての立て続け。

まわりのお父さんに聞いても同じ時期にあるみたいで、今はそういうシーズンらしい。


授業が始まるまでの粘土遊び。

お祈り。姿勢よし!


授業はお外での体操授業。


みんな先生の話をよく言い聞いて非常にお利口でした。


ちーなーみーに、最後は父の日ということでストラップもらいました。
さっそく装着!

がんばって授業を一生懸命受けている子に感動ー。