最近HTMLとかCSSの勉強してなかったからなあ。

セレクタ

[attr]

属性セレクタ（CSS2.1）

[attr="value"]

属性セレクタ（CSS2.1）

[attr~="value"]

属性セレクタ（attrを含む属性にマッチ）（CSS2.1）

[attr|="value"]

属性セレクタ（属性attrにマッチかつ属性値valueを前方一致で含む）（CSS2.1）

[attr^="value"]

属性セレクタ（attrを含む前方一致の属性にマッチ）

[attr$="value"]

属性セレクタ（attrを含む後方一致の属性にマッチ）

[attr*="value"]

属性セレクタ（属性attrにマッチかつ属性値valueを含む）

:root

ルート要素にマッチ

::selection

::-moz-selection

選択要素にマッチ

:target

リンク先要素にマッチ

::before()

::after()

リンク先要素にマッチ

:not()

除外

~

兄弟セレクタ

:first-child（CSS2.1）

:last-child

:nth-child()

:nth-last-child()

nly-child

:nth-of-type()

:nth-last-of-type()

:first-of-type

:last-of-type

nly-of-type

:empty

子要素に適用。:nth-child()なんかは、交互に背景色を変えるときとか、プログラム絡めなくて良くなるので便利だな。

:enabled

:disabled

有効か無効か

:checked

チェックされているか

::outside

…

::alternate

…

::marker

…

::line-marker

…

:default

…

:valid

:invalid

…

:in-range

ut-of-range

…

:required

ptional

…

:read-only

…

:read-write

…

::value

…

::choices

…

::repeat-item

…

::repeat-index

…

XSLみたいになってきて、より実用度が増した感じ。

• HTML Test Index

プロパティ

column-width

カラムの幅

column-count

カラム数

column-gap

カラムの境界

text-shadow

テキストの影

text-shadow

テキストの影

text-stroke

-webkit-text-stroke

テキストのアウトライン

box-shadow

ボックスの影

border-radius

-moz-border-radius

-webkit-border-radius

ボックスのボーダーの角丸

opaciy

ボックスの透明度

opaciy

ボックス背景の透明度

transform

-webkit-transform

ボックスの回転とか

web-fonts

Webサーバのフォントを使用

transionts

時間制御

Internet Explorer 8のベンダ拡張は-ms-（翻訳）。

ひとまずはこの辺りをメモしてみたけれど、まとまらないのでリンクをば。

リソース

• CSS3 module: Cascading and inheritance
• CSS3 module: Syntax
• Selectors
• CSS3 module: Syntax
• CSS basic box model
• CSS Backgrounds and Borders Module Level 3
• CSS3 Generated and Replaced Content Module
• CSS3 module: Lists
• CSS3 Module: Paged Media
• CSS Color Module Level 3
• CSS3 module: Web Fonts
• CSS3 module: Fonts
• CSS Text Level 3
• CSS3 Basic User Interface Module
• Media Queries
• CSS3 Ruby Module
• CSS3 module: Multi-column layout

読まねば(^_^;)

※このブログ記事は将来アップデートされます。

まとめてみます（順不同）。ちなみにページビューが約3,000/月、セッションが約1,100/月です。

1. WordPressの情報を探して来る人が極めて多い
2. Firefoxでの訪問者が多い
3. Internet Explorer6がIEのうち40%
4. 検索エンジンはGoogleが100%
5. 1セッション当たりのページビューが少ない
6. ホームページ（http://maaguu.com/）へのアクセスが少ない

ってな感じです。

1に関しては、単にWordPress以外の有用な情報がこのサイトにはないから(^^ゞだと思います。5に関しては、IE6を蹴っているのが大きいです。ホームページはほとんど見られないですね。その他に関しても、特に目立った傾向は無いようです。

あと、GetMoneyからの振込が4,500円ほどありました。GetMoneyはコストがほぼゼロで収入になるのが嬉しいところです。

まとまってません。殴り書きです。

ブックマークしてタグで分類してコメント追記して、あとで再ブックマークとか再分類とか、ブログもそうなんですが（ブログまで話を拡げるのはどうなのかとも思いますが）、このブックマーク（記事）とあのブックマーク（記事）とを関連させるのがタグ（とかカテゴリーとか）しかない、というのがどうも腑に落ちないのです。

このブックマークとあのブックマークをくっつけてそのブックマークにしたい、みたいな？？？

インターフェイスの問題なのかな？？？

ハイパーリンクで繋げる手法ってのは普通にあるしな……。

exploratreeみたいかなあ。これはちょっと目指している方向が違うかな。Evernoteはすごいアプリですが、これも違うかなあ。

K100（いわゆるスミ）は完全な黒ではない！　濃いグレーだ。

まじですかー！　知らなかったYO！

つか、黒にもいろいろあるわけで、こんなことに気づかなかったオレはアホだ。デザイナーさんにとっては、知ってて当たり前、教えるまでもないことだったのだろうな。

そういえばプリンタインクにもリッチブラックとかあったな。

The Problem

If there is an unforgivable sin, this would be it. Again, a simple understanding of CMYK is needed.
A printer takes the CMYK info it is sent and puts out ink according to that info. CMYK value refers to a set of 4 numbers between one and 100 representing the amount of each color mixed in to achieve the desired color. So you would immediately guess that k=100 would mean black, right?
Larry said so.

[...]

K=100 produces a dark grey that is definitively not black.

The Fix

Once again, easy fix; use values for rich black. Rich black mixes in some cyan, magenta, and/or yellow to darken the 100% Key. There are many different opinions on what is best, but there are basically two kinds; warm and cool. Generally accepted values (in order of CMY) are 70, 50, 30 (known as “designer black”), 60, 40, 40 (cool black) and 40, 60, 40, (warm black). All of these are mixed with k=100.

Some people say that a “C” value of 40 and a k value of 100 does the trick just fine; the point is to add some kind of extra into your blacks to make them… well, black.

Do NOT use rich black for smaller text; registration problems (where one cmyk ink prints slightly in the wrong place) will make your text unreadable. And no one wants that. Usually using k=100 for black text is readable enough.

Another neat trick: if your text is large enough that you want to use rich black, but is just small enough that registration may pose a threat, outline your text with .5 or 1 pt of k=100. This will take care of the registration problems. Note: the outline should be on the inside and should replace the original area it lays over, so that your text is not improperly displayed.

3 Deadly Sins of Print Design | Fuel Your Creativity

デザイナー・ブラック

70, 50, 30, 100 (CMYK)

クール・ブラック

60, 40, 40, 100

ウォーム・ブラック

40, 60, 40, 100

リッチ・ブラック

90, 60, 30, 100

印刷に出して確かめてみよーかなー。

ちなみにRGBにするとほとんど差はないですが、Webで微妙な黒を使い分けている人、いるんでしょうか？

P.S. こっちも参照

• Photoshopでやってしまいがちな12個の間違った使い方 – GIGAZINE）
  • 12 Common Photoshop Mistakes, Misuses and Abuses | The Design Cubicle

文書的Webデザイナーの頭の中はこんな感じだろうと思う。

マークアップエンジニアな人がグリッド線的Webデザイナーと組むと、結構大変だったりするのではなかろうか。

さらに、グリッド線的Webプログラマとの挟み撃ちに合うと、同情を禁じ得ない。

とどめに、グリッド線的Webディレクターと三方を囲まれると、これはもう悲惨としか言いようがない。

（それにしても下手糞な絵だ。）

以下簡単に。

オレはCORESERVERをレンタルしていますので、そこでSSH通信を行うためには、管理画面の「ホスト情報登録」から「SSH登録」をします。

WindowsではSFTP対応のFileZillaなどを使います。FileZillaでは「サイトマネージャ」の「一般設定」で「サーバの種類」に「SFTP – SSH File Transfer Protocol」を選択します。接続しようとすると「不明なホスト鍵」ダイアログが表示されますので、「了解」で接続します。

パスワード認証より公開鍵認証の方がより安全ですが、ここでは割愛します。

ホーム（トップ）ページに空白がないようにこれでもかと情報を詰め込んでいるサイトばかりを作ってきましたが、こういうシンプルなサイトは分かりやすくていいですね。

（正直言って、ホームページやサイドバーに情報盛りだくさんのサイトはウンザリです。）

ナビゲーションがわかりやすいです。

1. 最上部、枠から外れたところのサインインとサインアップ
2. 明快なアップロードボタン
3. シンプルなソート
4. 上下のページャ

システムはRailsを使っているようです。WordPressなどブログソフトで行けそうかなとも思いますが、ユーザ別のページもありますし、ユーザ管理やファイルアップロードなど必要な機能だけを構築するにはスクラッチがいいのでしょうね。

サインインのページで「Sign in」ボタンを押すと、ボタンが「Loading…」と変わるさりげない処理なんかもおもしろいですね。

一時Tumblrに繋がりにくくなって、Soupを使ってみたらそっちがメインになっている今日この頃です。テキストとか画像とかクリップするだけなのですが、なぜかおもしろい。なんでだろ。

ちなみにSoupは非公開にできます。

はてなのサービスは手当たり次第使っていましたけれども、最近はてなダイアリーをやめて、はてなブックマークのみを利用しています。

はてブ、最近リニューアルしましたが、相変わらずタグが入力しにくいですね。いちいちキャレットをつけなければならないなんて、面倒この上ないです。間違えてタグ付けしてしまってそのタグを削除したり変更したりするのも非常に面倒です。

あと、コレクション機能、ユーザには無意味です。オレは本をブックマークするのに使っていますが、ブックマークしようとすると「コレクションに追加」にあらかじめチェックが入って選択された状態になっています。そのままブックマークしたら最後、コレクションから削除も変更もできません。これ、買ったから削除しようと思っても、コレクションからは削除できません。ああ、でも、ブックマークから削除すると消えるみたい。これって、キーワードもそうだけど、運営者にしか利益がない仕組みですね。

はてなは収益を上げるために利用者をもっと増やしたいようです。以前はおもしろいモノを作る会社だなあと思っていましたけれど、今後はどうなっていくのでしょうか。収益を確保したら、またおもしろいモノを作り出すのかな。

ブラウザクラッシャーの類だな、これ。

Ctrl+Wで消せるけどさ。

見たページ

韓国の現代自動車、小型車「i20」をインドで発売へ　写真4枚　国際ニュース : AFPBB News

ちなみにFx3.0.5/Ubuntuでの話。

強制全画面ブラウザウィンドウ表示っての、まだあったのね。

つまりあれだ、オレはプログラミングがわかりません。プログラミングがわからないオレが読んでちんぷんかんぷんなので、これはプログラミングがわからない人が読む本ではありません。

JavaScriptの関数は、（大部分は）レキシカルなスコープを持つファーストクラスオブジェクトである。JavaScriptはメインストリームに登場した最初のラムダ言語だ。実際には、JavaScriptはJavaよりもLispやSchemeとよく似ている。JavaScriptはCの皮を被ったLispなのである。この性質のおかげでJavaScriptは非常に強力な言語になっている。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

ひとまず用語の意味だけはメモしておこう。

レキシカル

以下のようにあったので、多分レキシカルはローカル変数のローカルと同じ意味だろう。

クロージャはある関数全体が他の関数（以下、エンクロージャ）の内部で宣言されたときに発生し、内部の関数はエンクロージャのローカル変数（レキシカル変数）を参照する。

クロージャ – Wikipedia

スコープ

上記引用に続いて以下のようにある。

実行時に外部の関数が実行された際、クロージャが形成される。クロージャは内部の関数のコードとエンクロージャのスコープ内の必要なすべての変数への参照からなる。

クロージャ – Wikipedia

また、

プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。ある範囲の外に置いた変数等は、通常、その名前だけでは参照できない。このときこれらの変数はスコープ外である、「見えない」といわれる。

スコープ – Wikipedia

ファーストクラスオブジェクト

第一級オブジェクトで引けた。

第一級オブジェクト（ファーストクラスオブジェクト、first-class object）は、あるプログラミング言語において、その言語における他のものと比べて制限なしに使用できる物体のことである。第一級オブジェクトは「第一級データ型に属す」という。

この言葉は1960年代にChristopher Stracheyによって「functions as first-class citizens」という文脈で初めて使われた。

言語によって、第一級オブジェクトは次のような性質をもつ。

• 匿名のリテラルとして表現可能である。
• 変数に格納可能である。
• データ構造に格納可能である。
• それ自体に独自性を内在する（名前とは独立している）。
• 他のものとの等値性の比較が可能である。
• プロシージャや関数のパラメータとして渡すことができる。
• プロシージャや関数の戻り値として返すことができる。
• 実行時に構築可能である。
• 表示可能である。
• 読み込むことができる。
• 分散したプロセス間で転送することができる。
• 実行中のプロセスの外に保存することができる。

第一級オブジェクト – Wikipedia

ラムダ言語

ラムダ計算 – Wikipediaを参照。

専門用語を調べるとその専門用語の説明に別の専門用語があってまた専門用語を調べなければなりませんね(^^ゞ

クロージャ

クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。関数とそれを評価する環境のペアであるともいえる。

Schemeは完全な静的スコープのクロージャを持つ最初の言語として登場した。実質的にすべての関数型言語（Scala、Haskell、OCamlなど）とSmalltalkに由来するオブジェクト指向言語は何らかの形でクロージャを持っている。 その他のクロージャを持つ言語に、Groovy、ECMAScript（JavaScriptを含む）、Perl、Python、Ruby、Lua、C#などがある。

クロージャ – Wikipedia

PHPが入っていませんね（5.3から実装されるらしいです）。

リテラル

コンピュータプログラミングにおいてリテラルは、ソースコード内に値を直接表記したものをいう。数値、文字列、関数などさまざまな型のものが存在し、それぞれの表記方法も言語によって異なる。

リテラルを記述できることは、第一級オブジェクトを構成するための要件として見なされる場合もある。

リテラル – Wikipedia

だめだこりゃ、勉強しないと。