ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1906-01-12はてなダイアリーガイド「CSSセレクタ - calendar2p

はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」

calendar2photoモジュールで表示される写真つきカレンダーのセレクタです。

calendar2モジュール(写真なし)も同じです。

Flashを利用した「calendar2jphotoモジュール」は、スタイルシートでは見栄えを変えらず、モジュールのタグのほうで指定してやります。はてなダイアリーのヘルプ - calendar2jphotoモジュールをご覧ください。

table.calendarとtable.calendar trとtable.calendar td

「table.calendar」は全体。テーブル全体の幅とか、背景色を決めるのがこのセレクタです。

table.calendar {
 width: 150px;
 height: 180px;
}

のようにすると、カレンダー全体の縦横のサイズをピクセル指定できます。

テーブルの説明もいるかな。テーブル(table)っていうのは表組みのことです。カレンダーも言ってみれば日付の一覧表でしょう。

テーブルの行(の中身)を指したいときは「tr」を追加です。

tr
tr
tr

このカレンダーの横一行になにか指定したいときは「table.calendar tr」を使います。でもこのカレンダーモジュールのtrにはクラスがついてないので、全部の行に同じ指定しかできません。一行ずつ色を変えたりは出来ないです。

table.calendar tr {

 line-height: 150%;
 border-top: 1px solid #eee;
 border-right: 1px solid #aaa;
 border-left: 1px solid #ddd;
 border-bottom: 1px solid #999;
}

のようにすると、すべての行が影つきっぽくなると思います。

テーブルの中のマス目(の中身)を指したいときは「td」を追加です。こういうマス目のことを「セル」と言います。

tdtdtdtd
tdtdtdtd
tdtdtdtd

「table.calendar td」はカレンダー内の全部のセル。

table.calender td {
 font-size: 80%;
 background-color: red;
}

のようにすると、全部のセルの中の文字が80%になり、背景色がred()になります。

[戻る▲]

td.calendar-prev-month

前の月へのリンクがあるセル。

このセルの中のリンクを指定するときは、

  • td.calendar-prev-month a
    • td.calendar-prev-month a:link
    • td.calendar-prev-month a:visited
    • td.calendar-prev-month a:hover
    • td.calendar-prev-month a:active

[戻る▲]

td.calendar-current-month

その月を表示するセル。

このセルの中のリンクを指定するときは、

  • td.calendar-current-month a
    • td.calendar-current-month a:link
    • td.calendar-current-month a:visited
    • td.calendar-current-month a:hover
    • td.calendar-current-month a:active

[戻る▲]

td.calendar-next-month

次の月へのリンクがあるセル。

このセルの中のリンクを指定するときは、

  • td.calendar-next-month a
    • td.calendar-next-month a:link
    • td.calendar-next-month a:visited
    • td.calendar-next-month a:hover
    • td.calendar-next-month a:active

[戻る▲]

td.calendar-sunday

「日曜日」のセル。

td.calendar-sunday {
 color: black;
}

で文字が黒くなります。

[戻る▲]

td.calendar-saturday

「土曜日」のセル。

[戻る▲]

td.calendar-weekday

「平日」(月火水木金)のセル。

[戻る▲]

td.calendar-day

各日付のセル(の中身)全部。数字が入ってるセルも、画像が入ってるセルも、なにもないセルも。

文字を右詰めにするには

td.calendar-day {
 text-align: right;
}

のように書きます。

[戻る▲]

td.calendar-day a

日付がリンクになっているところ。

  • td.calendar-day a
    • td.calendar-day a:link
    • td.calendar-day a:visited
    • td.calendar-day a:hover
    • td.calendar-day a:active

[戻る▲]

td.calendar-day img

日付の中の画像。

画像はリンクになっているので、それを指定したいときは

  • td.calendar-day a img
    • td.calendar-day a:link img
    • td.calendar-day a:visited img
    • td.calendar-day a:hover img
    • td.calendar-day a:active img
td.calendar-day a:hover img {
 width : 60px ;
 height : auto ;
}

のように書くと、ポインタで触れたときに画像が大きくなってちょっと便利です。

td.calendar-day td {
 position: relative ;
}

td.calendar-day a:hover {
 dislpay : block ;
 line-height : 1 ;
}

td.calendar-day a:hover img {
 position: absolute ;
 width : 60px ;
 height : auto ;
}

さらにテーブルが崩れないようにするにはこんな指定もありますが、ブラウザによって違う結果かもしれないです。

[戻る▲]

 | 

ホームページ制作