忍者ブログ
カレンダー
03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
フルみっくすプレーヤー
マイリスト
顔文字
ミニ本棚
プロフィール
HN:
朝霧 翔
年齢:
35
性別:
非公開
誕生日:
1990/03/31
職業:
しゃかいじーん
趣味:
PC/漫画/ゲーム
自己紹介:
唯一の可愛い特性が動物好き。それ以外は変な物好き。

両目ガン見開いて「なんぞこれ?!」と思えるものが基本的に大好きです。例えば深海魚だったり見た目気持ち悪い植物だったり、擬態とか威嚇したときの生き物だったり。

あとはデフォルト装備ですがパソコン好きです。





最新CM
[08/18 朝霧@ウーロン茶でいい気がしてきました]
[08/15 劉 舞]
[02/19 朝霧翔]
[02/19 onod]
[02/16 朝霧翔]
最新TB
ブログ内検索
フリーエリア
変人日記。「自分が変人である事くらい小学校の頃から理解しているさ」とか堂々と言う程度の管理人がぐちぐち書いてます
[9]  [10]  [11]  [12]  [13]  [14]  [15]  [16]  [17]  [18]  [19
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS3のnth-childが素晴らしいと思った今日この頃。というか昨日初めて知りました←
セレクタの一つなんですが、どうやらテーブルとかリストの各行の設定が個別で出来るようになったらしいです。




というのは、最近ちょいと所用でスタイルシートを弄っているわけですが、お隣の席の依頼主さんから

「この表って交互に色変えられない?」

なんていう注文が。


JSP画面を作っていて、テーブルをforEachで回して列に値を格納~~なんて事をやっていた最中だったのですが、スタイルシートを交互に適用させるくらいしか思い当たりません。
そんな話をしていたところ、某お方から「nth-child」というセレクタを使えば可能らしいという情報をゲット。



とりあえずこんな感じらしいです↓





<table class="tableStyle">
<tr>
<th colspan="2">今月買った漫画</th>
</tr>
<tr>
<td>8/4</td>
<td>べるぜバブ(7)</td>
</tr>
<tr>
<td>8/4</td>
<td>REBORN(30)</td>
</tr>
<tr>
<td>8/4</td>
<td>BLEACH(46)</td>
</tr>
<tr>
<td>8/4</td>
<td>NARUTO</td>
</tr>
<tr>
<td>8/5</td>
<td>会長はメイド様(11)</td>
</tr>
<tr>
<td>8/5</td>
<td>恋だの愛だの(1)</td>
</tr>
<tr>
<td>8/12</td>
<td>鋼の錬金術師(26)</td>
</tr>
</table>




ひとまずこんなテーブルを用意。
データに対するツッコミはスルーの方向で。


これに、以下のスタイルシートを適用させてみます。



/* 枠に隙間が開かないように */
tr {
padding: 0px;
margin: 0px;
}

/* テーブルタグに付けるスタイル */
.tableStyle {
border-collapse: collapse; /* 枠線を結合(見えないから意味は無い) */
}

/* 基数行の設定(↑を継承) */
.tableStyle tr:nth-child(odd) {
background-color: #FFFFFF; /* 背景色:白 */
}

/* 偶数行の設定(同上) */
.tableStyle tr:nth-child(even) {
background-color: #FFE6D7; /* 背景色:薄いオレンジ */
}

/* 1行目の設定(同上) */
.tableStyle tr:nth-child(1) {
background-color: #FF7E59; /* 背景色:濃いオレンジ */
}







※スクショ




こんな感じに。

nth-childというセレクタが色々やってくれるらしいんですが、この()の中に色々入れられるようです。
形式としては基本は

a n + b

で、aとbには数字が入ります。nだけはnのままね。例えば「2n+1」とか。
直接数字を書き込めば指定行(1始まり)の設定もできます。

今回使ったのは

* odd (奇数)
* even(偶数)

これ。


それから、nth-last-childセレクタを使うと、名前通りに最後の列の設定ができたりするようです。



CSS3の対応とやらがまだまだらしいんですが、FireFoxでもちょこちょこ増えてってるらしいので色々調べてみたいと思います。
(当然と言うかなんというか、IEは未対応)



いいよねこういうの。創作意欲的な何かが刺激されます(*´∀`*)

拍手[0回]

PR




―――――というのは中学生の頃に某お金持ちのお医者さんの息子さん(え)が言ってたので名前だけは知っていました。

(「好きな食べ物はドラゴンフルーツとあわび。まぁ食べた事無いとは思いますが」という台詞を3次元で本当に聞いたのはこの時が初めてでした。それ以降未だに聞いたことはありません)



が、なんか
「食えるえ種蒔図鑑~モットーは食べたら蒔く~」
とかいうところに載ってたので検索かけてみたんですが・・・





めっさサボテン(*´ω`*)すげーかわええwwwwきもちわるいww




サボテンの実っていうものをそもそも初めて聞きました。
凄いですね。見た目も鮮やかでいかにも外敵から身を守りそうな感じがひしひしと伝わってきますが、本当のところ何の理由があってあんなに色鮮やかなのかは知りません。


ドラゴンフルーツの栽培(別窓)



味も葉っぱも気になります。
いいなぁ、欲しい、育ててみたい。そして食べてみたい。
色々サイト回ってると、どうやらお近くのスーパーで見かけての購入だそうですが、どう考えても朝霧の住んでいる所では「お近くのスーパー」で見かけるような代物じゃないのです。




・・・。いっそネットで買うか…?






むしろ苗だけ買えば…いや、高い。っていうかせっかくなら食べたい。
どーしよ。諦めようか。最終手段。

拍手[0回]

ふらふら調布に行ってたんですが、帰りの電車(各停)に乗ったら自分一人しか乗ってませんでした!凄い!





―――――と思ってたら、どうやら調布で終点だったらしい。

閉まった後に駅員さんが走ってきて開けてくれました。
俺あほす。マジあほす。


でも、周囲の人が見向きもしない辺り都会様は凄いところだな、と。






駅の近くにある色鮮やかなたい焼きが気になる…
(気になってても一度も買ってないけど←)

拍手[0回]

今朝の事になりますが、電車の中でこんな事書いてました。





電車でケータイ小説読んでる人がいた。
見た目からして魔法のiらんどだった。どんなジャンルかな?恋愛系?








「国光、~~」

「リョーマ…~」










テニプリだった。しかもなんかアレなの。











とか書いてたら乗り過ごして新宿まで来てた!!ヤバイ!






ケータイでタグ打ってるから間違ってるかも…。まぁそれはおいおい。










初めて乗り過ごしたww( ´∀`)















そんな取るに足らない箇所でテンション上げてた朝霧でした。
マジコイツ頭イってるわ…

拍手[0回]



今夜はカレーです。皿が明らかにそれと違ってるのも重々承知の上ですが、カレーです。どうせならチーズ乗せてオーブンででチンしたい気分ですがカレーです。

直前まで何にしようか悩んでたんですが結局材料も揃ってるし、ここ最近風邪気味か疲れも取れないということなのでこれに決定!
じゃがいもも大量だしね←


久々に食べたんですがカレーはやっぱり母親さんのが美味しいと思います(*´∀`*)
材料がその時々でコロコロと変わるロシアン風ですが←


そういえばカレーと一緒に写ってるCDがようやく届きました(*´∀`*)
イラスト素敵ww





―――――と、そんな事はどうでもいいんですが。


昨日の夜、久々に某キャッシュカードの残金を見ました。
基本的に触りたくないカードだったので中身がどうなってるか全然知らなかったんですが・・・






想像よりはるかに減っていた…(__;)




まじか、なにこれこわい…
来月にはポケモン出るのに…お金がぴんち。切実に。
お盆で実家帰るのにも4000円ちかくかかるしね。(そう考えたら毎週実家に帰る兄貴さんの財力って………)



というわけで現在無駄削減中。

そんな話を某さんにしたら

「漫画を我慢すればいいんじゃない?」

と言われたんですが、そこだけは削れません。必要経費です。




とりあえず風邪っぽいんだし、長々とネットしてないでさっさと寝ればいいよね。
あとは意識の問題。物欲を振り払えば結構変わると思われ。
















――――――――いつまでもつかな(笑

拍手[0回]

忍者ブログ/[PR]

skyruins/nt.syu-chan.net