So-net無料ブログ作成
検索選択

助十郎の期間スケジュール表示の修正 Part 5 〜重複判定修正編 [Zaurus]

まず、今回解析する部分('skfixedperioddata.rb' - SkFixedPeriodData#addSchedule内)のソースを載せておきます。

  # 重複レベルの設定
  # 重複は重複なし、重複上段、重複下段で表し、
  # info.level は0, 3, 6 が段内で重複なしになる
  info.start.upto(info.fin) { |day|
   if (@overlap[day] == nil) then              # 重複なし
    @overlap[day] = Array.new
    @overlap[day].push(info)
   elsif ((info.level == 0) 
       && (info.level <= @overlap[day].last.level)) then # 重複あり(チェック未)
    # 既存レベル更新
    level = @overlap[day].size            # 該当日の重複レベル
    if (((level % 2) == 1) 
        && ((@overlap[day].last.level % 3) == 0)) then # 重複なしデータあり
     @overlap[day].last.level += 1
    end
    
    # レベル決定
    if (((level % 2) == 1) 
         && ((@overlap[day].last.level % 3) == 2)) then # 重複データが下側
     info.level = @overlap[day].last.level - 1
    else
     info.level = @overlap[day].last.level + 1
    end
    
    @overlap[day].push(info)
   else                            # 重複あり(チェック済)
    @overlap[day].push(info)
   end
  }


ちなみに、気にしている箇所の現象は、こんな感じです。

sukejuro_bug2.png
右端に注目!


わかりますでしょうか? この「東京国際ブックフェア」は「歯医者」の日にはまだ終了していません。Part 4の記事の5番目のスケジュールにあたります。この「歯医者」の日の前日から2つのスケジュールが開始されているんですが、その線(ピンクと緑)が「東京国際ブックフェア」とかぶってしまっています。本来なら「東京国際ブックフェア」とピンクの線がペアになり、緑の線はもう一段下になるべきです。ちなみに、この「東京国際ブックフェア」のある位置は3段目です。

この期間、1段目は既にスケジュールがないため、「東京国際ブックフェア」とピンクの線が1段目、緑の線が単独で3段目に来るのが理想的だと思います。これも考慮に入れつつ、解析して行きます。

まずはこのループ。注目しているスケジュール「info」の期間内の他のスケジュールの状況を見つつ「info.level」を決定している様です。重複をチェックするために使用されているのが「@overlap[]」変数。これは、各日付に存在するスケジュールが格納されているハッシュの様ですね。

「重複なし」の処理は問題無さげです。「重複あり(チェック未)」って、何がチェック未なのかわかりませんが、ここの処理、「@overlap[]」のサイズと最後の要素しか見てないし、その要素以外は更新してませんね。これが原因な気がします。

このif文、最初に「info.level == 0」を評価しています。「チェック未」の意味はまだ重複が検出されていないスケジュールと言う意味ですね。コメント変えとこ・・。それはさておき、「@overlap[]」の最後の要素しか見ていないと言うことで、おそらく、「東京国際ブックフェア」の要素は重なっているピンクと緑のスケジュールの重複をチェックする際は「@overlap[]」の最後の要素ではないんですかね? と思ったけど、そんなパターンあり得るんかな?

これ、「info.level == 0」の時しか重複のチェックをしてないですね・・。ピンクと緑のスケジュールの位置が決まった後に「東京国際ブックフェア」の位置を決めようとしてるけど、その初日で「info.level == 6」と決まったので、次の日からのピンク(info.level == 7)と緑(info.level == 8)のスケジュールとの重複を見てないと言うパターンの様な気がします。だから、ちゃんと処理してたら、ピンクと緑はそのままで、「東京国際ブックフェア」が4段目(info.level == 9)になるべきと言う感じですかね。誤りは「info.level == 0」の時しかチェックしていないと言う点ですね。

さて、どうすれば、誤判定をなくせるかな〜と、考えようかと思いましたが、このループを見てたら、何となく誤判定の解消だけでなく、理想の配置にも持って行けそうな気がします。実現するには、

「期間中、空いている最小のレベルを選択」→「同段内のスケジュールの位置調整」の2段階で処理する必要がありますね。

  # 重複レベルの設定
  # 重複は重複なし、重複上段、重複下段で表し、
  # info.level は0, 3, 6 が段内で重複なしになる
  counter = Array.new(1)   # 空きレベルサーチ用
  info.start.upto(info.fin) { |day|
   if (@overlap[day] == nil) then
    @overlap[day] = Array.new
   else
    @overlap[day].each { |data|
     counter[data.level] = 1
     if ((data.level % 3) != 0) then
      counter[data.level - (data.level % 3)] = 1
     end
    }
   end
   @overlap[day].push(info)
  }
  
  info.level = counter.index(nil)
  if (info.level == nil) then
   info.level = counter.size
  end
  
  if ((info.level % 3) == 1) then
   # 期間内に (level % 3) == 0 のスケジュールがあれば、2の位置に移動させる
   searchLevel = info.level - 1
   info.start.upto(info.fin) { |day|
    @overlap[day].each { |data|
     if (data.level == searchLevel) then
      data.level += 2
     end
    }
   }
  end


ベタに期間をなめて空き領域を探す方法をとってみました。重複レベルを探索した後に、各段の level0 のスケジュールを移動させてるのは大丈夫か?と思いましたが、0のスケジュールは元々重複が無いので大丈夫ですね。重なりが多い時にちょっとループが多くなりそうですが・・・。ま、一応直りました。


sukejuro_fix1.png
2段までに収まりました


さ〜、これでリリースしようかなぁ・・・、と思ったら、また変な現象が出てます。これは今回の修正のせいではなく、元々潜んでた現象の様ですね・・・。


と言う事で、つづく。

助十郎の期間スケジュール表示の修正 Part 4 〜重複判定解析編 [Zaurus]

前回の記事でタイトル表示については何となく直ったので、次は重複の誤判定について、解析して行きます。

状況整理の記事で整理したスケジュールの状況を再度掲載します。

1234567891011121314151617
1
2
3
4
5
6
7


このうち、1、2のスケジュールが1段目、3、4のスケジュールが2段目、5、6、7のスケジュールが3段目に表示されています。5、6が重複スケジュールとして、3段目に表示されるべきだと思われるのに、5が重複なしのスケジュールとして3段目に表示され、さらに6、7のスケジュールが重複スケジュールとして同じく3段目に重ねて表示されているので、おかしな表示になっています。

ちょっと、状況を見ただけでは、なんで、こうなっているのかは良くわかりませんね。ソースを見て行くことにします。また、「skmonth.rb」です。

期間スケジュールの位置を決めている変数は例えば「SkMonth#drawPeriodLine」を見てみると、「info.level」と言う変数の様です。これは記憶では重複するスケジュールがあるたびにプラス1して、0〜2だと1段目に表示、3〜5だと2段目に表示・・・・、と言う風な処理をしようとしてたと思います。これのカウントアップの状況を見ればいいですかね。

と思って、ちょっと見てみたんですが、かなりデータ構造もアルゴリズムもごちゃごちゃしてますね・・・。仕方が無いので、整理しながら追ってみます。

「SkMonth#drawPeriodLine」に渡されている「info」は、「SkMonth#drawPeriodSchedule」内の「periodData.data(これはArray)」の各要素となっていますね。で、この「periodData」は「SkMonth#drawSchedule」内で「SkFixedPeriodData」型のインスタンスとして生成されています。

さて、「SkFixedPeriodData」クラスですが、「skfixedperioddata.rb」で定義されています。名前が妥当かどうかちょっと微妙な気もしますが、期間スケジュールの調整用のクラスの様です。

期間スケジュールデータは、「SkMonth#drawSchedule」内で、「SkMonth#drawPeriodLine」が呼び出される前に、「periodData.addSchedule」メソッドに渡されています。この「periodData.addSchedule」メソッドの中で「FixedPeriodInfo」型のインスタンスが生成されていますが、このインスタンスが最初に出てきた「SkMonth#drawPeriodLine」メソッドの「info.level」と言う変数の実体の様です。この「info.level」は、このメソッド内で他のスケジュールとの重複をチェックして決定されています。

「FixedPeriodInfo」は、「sktools.rb」に下記の通りに定義されています。

FixedPeriodInfo = Struct.new(:event, :level, :start, :fin)


この「SkFixedPeriodData#addSchedule」で行われている重複のチェック処理にバグがあるんでしょうね。ついでに、Part 2のところで言ってた理想の表示についても、ここの処理を修正することで、実現できそうな気がします。何となく、ワクワクしてきましたねっ! と言うか、予想が外れてたらかなり萎えるんですけどね・・。その前に、ソースを提示しないと、ここで何を書いているんか全くわからないですね。まあ、次回提示します。


と言うことで、つづく。

助十郎の期間スケジュール表示の修正 Part 3 〜タイトル表示位置は直った編 [Zaurus]

さて、再び「skmonth.rb」を見て行きます。

とりあえず前回の記事であげた問題の一つ目「タイトルの位置が変」と言うのを見て行きます。タイトル表示位置のうち、横方向の位置は特に問題なさそうです。縦方向の位置の部分の計算が間違えている様なので、そこに焦点を当ててみて行きます。

この一連の記事の最初の記事で見ていた「SkMonth#getTitlePos」の中を見ていると、「重複なし」の場合はこの関数で縦方向の位置を決めていますが、「重複あり」の場合はさらに「SkMonth#makeTitlePosCandidates」を呼び出して、そこで位置を決めているみたいです。ちなみにその結果を「candidates」変数に反映させている様ですが、下記の様な反映のさせ方をしています。・・・なんか意味があるんでしょうか? 後で見とこうと思います。

candidates += makeTitlePosCandidates(info, overlap, startFrame, finFrame, titleWidth)


さて、縦位置を決めるところを見ていると、「SkMonth#getTitlePos」と「SkMonth#makeTitlePosCandidates」で差分がありました・・。

「SkMonth#getTitlePos」の方は・・、

pos.y = startFrame.y + @frameHeight * n + (1 + info.level / 3) * FONT_SIZE_DAY + FRAME_TOP_MARGIN


一方、「SkMonth#makeTitlePosCandidates」の方は・・・、

pos.y = startFrame.y + @frameHeight * week + FONT_SIZE_DAY + FRAME_TOP_MARGIN


後者の方、FONT_SIZE_DAYに(1 + info.level / 3)をかけていませんね。これで、段数の反映ができていないだけの様な気がします。3カ所ありますが、全てに差分修正を反映して、実行してみると・・・。

直りました。う〜ん、ちゃんとソースを見てませんが、現象が直ったので、結果オーライとして、これはこれで完了にしときます。だめなデバグのパターンですね・・。

ちなみに、最新ソースの方を修正して試したんですが、表示結果を見てみると、なんか期間スケジュールの色が変わっている上に、ツールボタンが追加されている・・・。全然覚えてませんが、これ、どうしようかな・・・。

それはさておき、次は問題の2つ目「重複があるのに重複なしと判断されているスケジュールがある」についても見とこうと思います。


つづく。

助十郎の期間スケジュール表示の修正 Part 2 〜状況整理編 [Zaurus]

「助十郎」の期間スケジュール、ソースの末尾に一応、決まり事を書いているのですが、ここに抜粋しときます。まず、線の描画について。

# ◆期間スケジュールの線の描画について
#  重複の可能性を考えて、下記のルールで描画する
#
#	- 線の位置は上方と下方のみとする(さらに重複する場合は次の行)
#	- 重複がない場合、線は中央。
#	- 複数の週に渡る場合も線の位置は統一する

線描画のルール


1つ目の「さらに重複する場合は次の行」と言うルールと3つ目のルールがくせ者で、重複したスケジュールが終了する頃に次のスケジュールが開始されると、どんどん次の行に行ってしまっています。本当は、上が空いていたら上に移動させるのが妥当なんですけどね・・。ま、今回はこれには目をつむっときます。

----[ 1つ目 ]------
               ----[ 2つ目 ]------
                             ----[ 3つ目 ]-----
                                            ----[ 4つ目 ]------
現状、こんな感じ
↓↓
----[ 1つ目 ]------   ----[ 3つ目 ]-----
               ----[ 2つ目 ]------   ----[ 4つ目 ]------
こんな感じが理想


次に、本題のタイトルの表示位置について。

# ◆期間スケジュールのタイトルの位置について
#  下記の通りとする。
#
#	1) 期間を週毎に下記に分類する
#		a) 重複のない期間
#		b) 重複している期間
#
#	2) 1)で分類したもののうち下記の優先度で候補とする
#		a) 重複のない期間
#		b) 期間が長いもの

タイトル表示位置のルール


タイトルの表示位置については、2)のa) b)に当てはまらない場合は、重複している期間を選択します。で、重複しているスケジュールがともに重複期間中にタイトルを表示する場合、タイトルの表示範囲の競合を考える必要がありますが、今のところ、そこの考慮はしないことにしている様です(たぶん、<私には>たまにしかないであろうことで、めんどくさくなってやめた)。

で、今問題としているのは、次の様な状況での表示です。縦軸がスケジュール番号、横軸が日付と見てください。まあ、あんまり使わない情報も含めて17日間に渡って7つのスケジュールが連続して発生して行っています。

1234567891011121314151617
1
2
3
4
5
6
7


まず、問題の1つ目。3、4、6、7のスケジュールのタイトルの位置が変です。で、問題の2つ目。5つ目のスケジュールが3段目で重複なしと判断されていて、期間が正確に表示されていません。

う〜ん、今のところバグのせいで3段表示になってますが、正常に処理されれば4段表示になってしまいますね・・・。これを見てると上が空いていたら上に表示させると言うのも対応入れた方がいいかもしれませんね・・・。でも、今の所は保留・・・。ソースを見ながら考えます。


ま〜、大体状況がわかったんで、次からソースを見ます。つづく。

助十郎の期間スケジュール表示の修正 [Zaurus]

また、話が脱線してしまうのですが、このブログの最初の記事でも書きましたとおり、併設しているぐうたラボにてザウルス用のアプリケーションをいくつか公開しております。で、私はいまだにザウルスを利用していて、公開しているソフトも割と自分で使用しています。

その中に「助十郎」と言うソフトがあります。こちら、かなり作りかけ感のあるソフトで、搭載されていない機能の存在もさることながら、普通に見えるバグもいくつか存在しています。その存在するいくつかのバグのうち、1か月画面での期間スケジュール(複数の日付にまたがるスケジュール)の表示が最近気になってきたので、久々(前の更新を見たら2年ぶり)に直そうかとソースを見始めました。すっかり中身を忘れているので、ここにメモしながら直していきます。ちなみにどんなソフトかはこちらを参照願います。

で、気になっているバグなんですが、次の様な感じです。

  • 1か月画面で2段目、3段目に表示されるべき期間スケジュールのタイトルが1段目に表示される場合がある


って、言葉で書いてもわかりにくいですね。全体の画像を載せようかと思いましたが、直近のリアルなスケジュールなので、まずそうなのや嫌そうなのにモザイクをかけていたところ、モザイクだらけになったのでやめました。まあ、たいした内容じゃあないんですけどね・・・。仕方が無いので、抜粋して載せときます。

sukejuro_bug1.png
タイトルが飛び出てます


わかりますでしょうか?こんな風に下の線と重なって表示されるべき期間スケジュールのタイトルが、上に飛び出てしまっています。最近やたらと期間スケジュールを入れる様になったので、あちこちでこの表示になっていて、見にくくてしょうがありません。まー、ソースを書きながら、アルゴリズムを考えながら、ソースを書きながら・・・って感じで作ってたんで、バグはちょこちょこあるんですよねぇ〜。

と、言い訳は置いといて、ソースを見ていきます。以下、完全に自分用のメモです。気になる方は、こちらでソースも配布していますので、どうぞ。

さて、さ〜っと見たところ、「skmonth.rb」で、ここの描画を行っていそうな感じなので、詳しく見ていきます。期間スケジュールのタイトルを描いていそうなところは、「SkMonth#drawPeriodSchedule」の様ですが、位置を決めているのは、「SkMonth#getTitlePos」メソッドですかね。このクラス内での呼び出し順は下記の様な感じです。

 drawSchedule → drawPeriodSchedule → getTitlePos

「SkMonth#getTitlePos」の中では「重複なし」の場合と「重複あり」の場合で処理を分けています。2段目でも「重複なし」の場合は問題なく表示できている様なので、「重複あり」の処理に問題があるのだと思いますが、現象を良く見ていたら2段目で「重複なし」と判断されているものも実は「重複あり」のパターンがありますね・・。これは別のバグっぽいです・・。って、言葉だけではわかりにくいですね。


ん〜・・・、これも直したいですね。まず状況を整理したいんですが、長くなってきたんで、つづく。

デザインガイドライン(裏面) [Dashboardウィジェット]

デザインガイドラインの続きですが、今度は裏面(設定画面)についてです。Dashboardを使うとわかるんですが、設定項目が存在するウィジェットは、設定画面を呼び出す時にくるっと回って裏側が表示された様になります。これは、Dashboardウィジェットの決まりの様ですね。

さて、その裏面のデザインについてですが、冒頭に裏面のレイアウトについては、「Apple Human Interface Guidelines」の「Layout Examples」を読む様に促されています。結構な分量の様なので、追々読むことにします。

ここでは、ウィジェットの裏面に関連する内容を列挙します。

  1. 裏面への遷移ボタン(info button)は「i」を丸で囲んだ標準のものを使用し、カーソルがその上に来た時にのみ表示。ボタンがクリックされるとflip animationで裏面へ遷移すること。
  2. info buttonは原則、ウィジェットの右下に配置すること。
  3. flip animationはウィジェットの表面と裏面の遷移のときのみに使用すること。項目1、6を参照。
  4. 裏面は設定画面もしくは、重要な情報の表示に使用すること。
  5. 裏面にはAquaの部品を使用すること。小さいサイズのAqua部品を奨励する。
  6. 設定終了時のためにDone buttonを用意すること。Done buttonがクリックされたときは flip animation で表面へ遷移すること。Done buttonは標準部品を使用すること。
  7. 裏面の背景色には暗めの色、もしくは抑えた色を使用すること。表面の背景色と同じ色はお勧めしない。
  8. 必要なら裏面にライセンス情報、ロゴ、簡易ヘルプ等を表示すること。
  9. 可能な限り標準のグラフィック部品を利用すること。


項目1、2は表面の話ですね。

表面の記事にも書きましたが、項目6の「Done button」や項目9で述べられている標準品は「/System/Library/WidgetResources/」にある様です。特に書かれていませんが、「info button」も同様だと思われます。もしかすると、「info button」だけは自分で作るんでしょうかね・・? それは無いか・・。

項目5、7は表面と裏面の区別をはっきりさせるための様です。どちらかというと、裏面はウィジェットの表面とは明らかに違う様にデザインして、設定中の画面が残らない様にすることを目指している様な気もします。

項目8は表面の記事でも書きましたね。表面にこれらの情報は載せないことということの様です。


以上、裏面はさくっと書かれていますね。「info button」と「Done button」とそれらをクリックした際の振る舞いだけはしっかり守って、それ以外の点は表面と区別ができる様にしておけば、ある程度自由にしていいよという感じですかね。

デザインガイドライン(表面) [Dashboardウィジェット]

・・・・この記事、書くのが2度目になります。1度目はほとんど書き上げたところで、よそのページを見ていたところ、ブラウザが落ちてしまいました・・。プレビューはしてたけど、保存はしてませんでした・・・。内容は全部消えてしまいました・・。ブラウザが落ちるなんて久々やのに、よりによって書きかけの記事がある時になんて・・・。かなりショックですが、仕方がありません。今後はマメに保存することにします・・・。

と言うことで、無駄に復習です。

さて、前回までの内容でDashboardウィジェットの概要はほぼ押さえたらしいです。CSSとJavaScriptについては、まだほとんど知識がない状態ですが、とりあえずは、もうウィジェットの作成はできるよとのことです。ですが、慌てず次の項目に読み進むことにしました。内容はウィジェットのデザインについてです。一応、ガイドラインが決まっている様なので、ざ〜っと目を通しておくことにします。

ウィジェットには表面(機能面)と裏面(設定面)が存在する様です。まずは、表面のガイドラインから。

  1. デザインはその目的の情報を即座に表示できる様にすること。
  2. 役に立つ情報のみを明確に表示できる様、領域は効果的に利用すること。
  3. 情報は即座に表示すること。
  4. 使用の際、説明が不要であるべきで、単一機能を実装すること。
  5. 小さい画面(例えばXGA)向けにデザインすること。
  6. 情報は1画面に表示し、スクロールバーの使用は極力避けること。
  7. 色は自身を他のウィジェットと見分けてもらえる様に使用すること。
  8. けばけばしい色使いは避けること。
  9. 読みやすいフォントを使用すること。
  10. Aquaの部品は表面では使用しないこと(裏面でのみ利用すべき)。
  11. 表面に広告(ライセンスや権利表記等も)を入れないこと。入れるなら裏面へ。
  12. Info.plist」に「CloseBoxInsetX」と「CloseBoxInsetY」を設定すること。
  13. 可能な限りペーストボードの機能はサポートすること。
  14. ドラッグ&ドロップは適切にサポートすること。
  15. 可能な限り準備されたグラフィックや部品を利用すること。


基本はDashboardが機敏な動作を期待されていることを念頭に置いておけということですかね。その上で、シンプルな作りにすること、Dashboard上には多数のウィジェットが配置されること、見易いことを考慮に入れろということだと理解しました。

Aqua を使うなというのは、項目7につながるものだと思われます。項目8と合わせて、各ウィジェットは色調を一色に合わせることを求められている様に思えます(例えば、標準添付のウィジェットだと、時計は黒、Stockは青をトレードカラーとしている様子)。

項目12の「CloseBoxInsetX」と「CloseBoxInsetY」を設定せよというのは、クローズボタンがずれてたり、空中に浮く様なことにならない様に注意せよということらしいです。まあ、そのかわり、ウィジェットの形は自由にデザインできるということですね。たぶん。

項目15に書かれている部品は「/System/Library/WidgetResources/」にあるそうです。部品の利用をHTMLファイルからするのだとすると、これは絶対パスで指定することになるのでしょうか? ちょっと、謎ですが追々わかるでしょう。

その他、本文中からリンクされてたものを下記にまとめときます。サイズの変更について気になっていましたが、その記述もありますね。

【参考】
→メニューの実装については「Integrated Menus
→Info Button については「Displaying a Back Side
→ボタンについては「The Apple Glass Button Subclass
→サイズ変更については「Live Resizing



スタイルシートについて [CSS]

Dashboardウィジェットの見た目の指定にCSSを利用するのはわかりましたが、肝心のCSS自体について、全く知識がありません。私がページのレイアウトをする時は、いまだにさんざんやめろと言われている<table>要素で整形しています。さて、このCSS。とりあえずは、Dashboardウィジェットの作成にしか使う予定は無く、どの程度の知識が必要かも良くわからないので、詳細は必要な時に調べることにして、ここでは最低、サンプルが読める程度になるため、見かけたものをメモっていくにとどめておきます。まずは、ここに記載されているサンプルソースから。

HTMLファイル中、<style>要素内にスタイルシートを記述する様子です。また、外部ファイル(.css)にスタイルシートを定義することもでき、その場合は、HTMLファイル内で「@import」と言うキーワード(?)を使って、読み込みを指定する様子です。サンプルでは下記の様に使用されています。最後のセミコロンは必要なんでしょうかね・・。

<style>
     @import "HelloWorld.css";
</style>


で、そのスタイルシートを使う側は、<span>タグのclassというアトリビュートで使用している様に見えます。このアトリビュートの値で、CSSで指定されている定義と結びつけ、定義されている通りに文字列を表示するのだと思われます。ちなみに<span>要素はスタイルシート適用のために使われたりする特に意味のない要素だとのこと。サンプルでは下記の様に使われています。

<span class="helloText">Hello, World!</span>


さて、肝心の「HelloWorld.css」には「body」と「.helloText」の二つのキーワード(「セレクタ」と言うらしい)が定義されています。まず、「body」はこちら。

body {
    margin: 0;
}


文章全体の設定でしょうか? って、あまりにも知識が無さ過ぎるんでちょっと調べてみました。見つけたページを適当にメモっておきます。リンクはこちら

ん〜、ざ〜っと見た感じセレクタ部分に書かれた文字列はそのままHTMLの要素に対応するみたいですね。ここがわかりやすそうな気がします。で、「margin」の部分はプロパティと言うそうです。「margin」自体の説明はこちらを参考に。要するに<body>要素の周囲のマージンを0ピクセルに設定しているということですかね・・。単位に何があるのかが気になりますが、とりあえずスルー。

で、もう一つの「.helloText」はこちら。

.helloText {
    font: 26px "Lucida Grande";
    font-weight: bold;
    color: white;
    position: absolute;
    top: 41px;
    left: 32px;
}


セレクタ部分の先頭に「.」がついてますが、これはなんでしょう? こちらによると、HTML側でのセレクタの選択方法によって、「#」をつけたり「.」をつけたりするそうです。「#」をつけた場合は、「id」で選択し、1ページ内で同じ名前を1回しか使用できない。「.」をつけた場合は、「class」で選択し、1ページ内で同じ名前を何度も使用できるとのこと。確かに先ほどの<span>タグのところで、「class」で選択してましたので、その通りですね。こちらによると、もう少しいろいろとルールがある様ですが、今は置いておきます。

後、プロパティにいろいろ設定されていますが、こちらも必要になったら見ることにします。字面と表示結果を比べてみると何となくわかりますね。

表示結果を見て、一つ疑問がわきました。画像と文字列が重なって表示されています。HTMLのソース上は下記の様に並べて記述されているので、普通に表示すれば並んで表示されるはずなんですが・・・。

<body>
    <img src="Default.png" />
    <span class="helloText">Hello, World!</span>
</body>


自分でサンプルのHTMLファイルを書いてみて、試してみました。

<html>
<head>
<style>
body {
	margin: 0;
}

.test {
    font: 26px "Lucida Grande";
    font-weight: bold;
    color: black;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
</head>
<body>
	<img src="font/0.gif" />
	<span class="test">Test</span>
</body>
</html>


上のソースの「.test」の所の定義のうち、「position」「top」「left」の設定が効いているみたいです。「position」を「absolute」で設定していますが、これが「絶対位置指定」を示すもので、後、「top」と「left」で表示位置の座標を指定しているみたいです。って、絶対位置で指定ですか・・。固定サイズのウィジェットならこれで問題ないかもしれませんが、リサイズできるものは・・。と思いましたが、たぶんレイアウトとかありますよね。今は深く考えないことにしました。


簡単ですが、CSSついては、こんなところで終わり。


リンク
Cascading Style Sheets home page
Cascading Style Sheets - Wikipedia
とほほのスタイルシート入門
CSSレイアウト実践講座
CSSとはなんだろうか

ブログを作る(無料) powered by So-netブログ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。