Earthquake. Thoughts in Tokyo

In my town in Tokyo, March 14th Rolling blackouts will start. Area 3 will be 12:20 to 16:00. Following, key points now I thought about this disaster.

Scale disaster because all this complaining and complaining at the moment, if you do not have accountability. There is nonsense to even complain to the disaster, and they raise one’s voice is a man-made later.
The government also engineers and companies, I think that everyone is doing their best. The result was a mistake, as all things are that different from having to deal with the unprecedented situation of who is doing it by touch. Individuals can only do my best.
I am proud of not becoming of people the panic. The pride will become the living and rebuilding.
Support from all over the world very happy. Thank you !
Fear of radiation is the best in the world, a strong Japanese. Likely to panic and lack of information is most relevant when the overlap of this activity. It is important to overcome it.
If you cannot believe the government and the company, I want to say. You are also safe until media and the main government official escape. There is being sure not to stay on in the dangerous neighborhood they are to think only about own attempt to save one’s own neck by people as you believe irresponsible.
Do not forget the humor at all times. Black humor also OK! Mood argue about silly refrain big favor. Cool idea & Warm Illustration by inoue takehiko is here !
Shocking footage already seen. TV should show us tips, good music, broadcasting your daily laugh. Opportunity to broadcast that content to not worry about ratings now.

地震。東京で思うこと

私の住む地域でも3/14から計画停電が行われる。エリア3なので12:20～16:00になる予定。以下、現時点のポイント。

これだけの災害規模なので、現時点では不平不満を言ったり、責任追及している場合ではない。天災に文句を言っても仕方が無いし、人災だと声を荒げるのは後回しだ。
政府も企業も技術者も、皆が最善を尽くしていると思う。結果的に間違いだった、となる事もあろうが、誰がやっても手探りで未曾有の事態に対処することに変わりない。個人個人も最善を尽くすしかない。
日本でパニックを起こさないことを誇りに思う。その誇りこそが、生存と復興の要になる。
世界中からの支援がとても嬉しい。ありがとう。
放射能への恐怖は世界中で一番、日本人が強い。この放射能関係と情報不足が重なるときが最もパニックが発生する可能性が高い。そこを乗り越えるのが重要だ。
政府や企業が信用できないと思う人へ。政府の要人や主要マスコミが逃げ出すまでは安全だ。彼らが保身や責任逃れをするヤツらならば、危なくなれば真っ先に逃げるはずだから。
どんな時でもユーモアを忘れないで。ブラックユーモアでもOK！不謹慎・自粛ムードに関する反論に大賛成。井上雄彦によるクールなアイデアと暖かいイラスト。
もうショッキング映像は見た。テレビは役立つ情報、休まる音楽、笑える日常を放送しなさい。今こそ視聴率を気にしないでコンテンツを放送できるチャンスだ。

Basic figure drawn with CSS3

It is possible to draw various figures by drawing of CSS and CSS3. It doesn’t become a reason why drawing by pure CSS is not used for the web expression though it is

necessary to consider how to support a browser of IE8 or less.

CSS3 is convenient, and sexy. But, it looks complex.

It is necessary to enjoy the expression by CSS3 positively. I think that it is the best practice of the understanding of css3.

However, the clue of something is necessary.

I think that you should understand the method of making a basic figure as for the first step. As much as the time before when we learned Adobe Illustrator.

There is a good explanation by Mozilla. I brought it together by the viewpoint of drawing style in a basic figure.

square

class：square

/*square. This shape is origin of other shapes.*/
.square {
    width:100px;
    height:100px;
    margin:20px;
    position:relative;
    background:rgb(100,100,255);
}
.square:hover {/*box-shadow is For sample*/
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    box-shadow:3px 3px 3px rgba(0,0,0,0.7);
}

/*square. This shape is origin of other shapes.*/

.square {

width:100px;

height:100px;

margin:20px;

position:relative;

background:rgb(100,100,255);

}

.square:hover {/*box-shadow is For sample*/

-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);

-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);

box-shadow:3px 3px 3px rgba(0,0,0,0.7);

}

cross

class：square cross

.square.cross {
    width:25px;
    left:37.5px;
}
.cross::before {
    content:"";
    display:block;
    width:100%;	
    height:100%;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
    background:rgb(80,80,200);
}

.square.cross {

width:25px;

left:37.5px;

}

.cross::before {

content:"";

display:block;

width:100%;

height:100%;

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

transform:rotate(90deg);

background:rgb(80,80,200);

}

The width of the element is specified for 1/4 of the height. And make before pseudoelement content, change to block, And 100% width and height, And 90-degree rotation.

The reference point of the rotation is possible to specify with transform-origin. But, that’ s default values is center. So, I don’t touch it.

times

class：square cross batu (‘BATU’ is a name of the sign that shows ‘Times’ in Japanese.)

.shapesDemo .sample .square.cross.batu {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.shapesDemo .sample .square.cross.batu {

-moz-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

}

Only 45-degree rotation added to “cross”.

asterisk

class：square cross asterisk

.square.cross.asterisk::before {
    -moz-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}
.square.cross.asterisk::after {
/*that increases one line Content*/
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
    transform:rotate(-60deg);
    background:rgb(50,50,200);
/*Before pseudoelement
has already been generated,
so, the following specification
is necessary to pile it up.*/
    position:absolute;
    top:0;
    left:0;
}

.square.cross.asterisk::before {

-moz-transform:rotate(60deg);

-webkit-transform:rotate(60deg);

transform:rotate(60deg);

}

.square.cross.asterisk::after {

/*that increases one line Content*/

content:"";

display:block;

width:100%;

height:100%;

-moz-transform:rotate(-60deg);

-webkit-transform:rotate(-60deg);

transform:rotate(-60deg);

background:rgb(50,50,200);

/*Before pseudoelement

has already been generated,

so, the following specification

is necessary to pile it up.*/

position:absolute;

top:0;

left:0;

}

rounded square

class：square rounded

.rounded {
    -moz-border-radius:10px;
    border-radius:10px;
}

.rounded {

-moz-border-radius:10px;

border-radius:10px;

}

To round the corner, border-radius is specified. in Firefox3.6,-moz- vender-prefix is necessary.

circle

class：square circle

.circle {
    -moz-border-radius:50%;
    border-radius:50px;
}

.circle {

-moz-border-radius:50%;

border-radius:50px;

}

When the value of border-radius is adjusted to 50% (height and width), square becomes circle.

Because it is not possible to specify it with % in webkit, it specifies it by the numerical value.I want to support % specification by all means.

By the way, I was not daily using the English word “Radius”. Other Japanese people too, I think.

However,I remembered “r”. Once upon a time, I learned it in the elementary school as formulas 2πr and πr²…

And when saying, other “There were a lot of car accidents of this road because “r” was large” etc. , the initial “r” was noticed to be used!

ellipse

class：square ellipse

.ellipse {
    height:50px;
    -moz-border-radius:50%/25%;
    border-radius:50px/25px;
}

.ellipse {

height:50px;

-moz-border-radius:50%/25%;

border-radius:50px/25px;

}

Four values can be specified for border-radius.top-left,top-right,bottom-right, and bottom-left. In addition, it is possible to specify it by delimiting radius in the direction of x and y by/as a value of radius of each corner.

There are a major axis and a minor axis in the oval. If it is an oblong oval, half the value of width becomes a major axis, and half the value of height becomes a minor axis.

When the ratio in length and breadth is an oval of 1:2,X of radius of four corners is adjusted to 50%, and y is adjusted to 25%.

It is necessary to specify webkit by the numerical value.

tube

class：square tube

.tube {
    -moz-border-radius:50%/25%;
    border-radius:50px/25px;
}
.tube:after{/*Upper side*/
    content:"";
    display:block;
    position:absolute;
    top:2px;
    left:2px;
    width:96px;
    height:48px;
    -moz-border-radius:50%/25%;
    border-radius:50px/25px;
    background:rgb(150,150,255);
}

.tube {

-moz-border-radius:50%/25%;

border-radius:50px/25px;

}

.tube:after{/*Upper side*/

content:"";

display:block;

position:absolute;

top:2px;

left:2px;

width:96px;

height:48px;

-moz-border-radius:50%/25%;

border-radius:50px/25px;

background:rgb(150,150,255);

}

When x of four “border-radius” is adjusted to 50%, and y is adjusted from 26 to less than 50%, it becomes the outline of the cylinder that collapses to the vertical direction.

It becomes a tube if content is generated with ::after pseudoelement of this element, the same specification as the “oval” is done, and it arranges it by the absolute configuration up.

CSS3で描く基本図形2

2012.7.27、以下の修正・変更を行いました。

transformのskewの記述をskewXとskewYに変更
border-radius,box-shadowのベンダープレフィックスを削除

引き続きcssで基本図形を描く。今回は半円、扇型、平行四辺形、三角形の描き方。図形の描き方はいずれ一覧表の形でまとめようと考えている。

なお、前回と今回の図形は、すべて一つのdivで出来ているが、実際にはdiv以外の要素でもスタイリングできる。cssの初心者はサンプルの記述でdivが使われているのを見て、cssで見た目を指定できるのはdivだけだ、という勘違いをすることが多いので注意が必要だ（これがおそらく「div厨」の発生原因だと推察する）。

例えば、何かの申請用紙の姓名の記入例に「日本一郎・東京花子」とあっても、そのまま書き写す人はいない。サンプルをコピーする事は有効な学習手段だが、自分のマークアップで使っている要素にスタイルを設定して欲しい。

半円 half circle

class：square circle half

.half {
	height:50px;
	border-radius:50px 50px 0 0;
}

.half {

height:50px;

border-radius:50px 50px 0 0;

}

扇型 quarter circle

class：square circle quarter

.quarter {
	border-radius:0 100px 0 0;
}

.quarter {

border-radius:0 100px 0 0;

}

border-radiusの値を4つ指定すると、左上、右上、右下、左下の順に設定できる。左上、右上を丸めれば半円に、角を1つだけ丸めれば扇型になる。

平行四辺形 parallelogram

class：square parallelogram

.parallelogram {
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg);
	-webkit-transform:skewX(-25deg);
	transform:skewX(-25deg);
}

.parallelogram {

-moz-transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform-origin:0 100%;

-moz-transform:skewX(-25deg);

-webkit-transform:skewX(-25deg);

transform:skewX(-25deg);

}

傾きはtransformプロパティのskewXで設定できる。変形の基点はtransform-originで設定。ここでは右下を基点に-25度skewXしている。

三角 triangle

class：square parallelogram triangle

.triangle {
	background:-moz-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:-webkit-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:linear-gradient(
		45deg,
		red,
		red 50%,
		transparent 50%,
		transparent 100%);
}

.triangle {

background:-moz-linear-gradient(

45deg,red,red 50%,

transparent 50%,

transparent 100%);

background:-webkit-linear-gradient(

45deg,red,red 50%,

transparent 50%,

transparent 100%);

background:linear-gradient(

45deg,

red,

red 50%,

transparent 50%,

transparent 100%);

}

平行四辺形のbackgroundをグラデーションで塗り、その半分の塗り色を透明にする方法。

なお、mozとwebkitとで違いの著しかったgradientの指定方法だったが、両者で統一方式が合意された模様。これを受けて、後方互換用の指定をしておいた。

三角2 triangle2

class：square triangle2

.triangle2 {
	overflow:hidden;
	background:transparent;
	width:142px;
	height:71px;
}
.triangle2::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	background:rgb(80,80,200);
	-moz-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.triangle2 {

overflow:hidden;

background:transparent;

width:142px;

height:71px;

}

.triangle2::before {

content:"";

display:block;

width:100px;

height:100px;

background:rgb(80,80,200);

-moz-transform-origin:0 0;

-webkit-transform-origin:0 0;

transform-origin:0 0;

-moz-transform:rotate(-45deg);

-webkit-transform:rotate(-45deg);

transform:rotate(-45deg);

}

triangle2の::beforeでcontentした正方形を-45度回転。triangle2自体の幅を√2px * 100px、高さを√2 * 100px / 2にしてoverflowをhiddenにして隠している。

マウスをホバーすると、親要素につけたbox-shadowが元の矩形が見える。

台形 trapezoid

class：square trapezoid

.trapezoid {
	overflow:hidden;
	background:transparent;
}
.trapezoid::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	background:rgb(80,80,200);
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg);
	-webkit-transform:skewX(-25deg);
	transform:skewX(-25deg);
}

.trapezoid {

overflow:hidden;

background:transparent;

}

.trapezoid::before {

content:"";

display:block;

width:100px;

height:100px;

background:rgb(80,80,200);

-moz-transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform-origin:0 100%;

-moz-transform:skewX(-25deg);

-webkit-transform:skewX(-25deg);

transform:skewX(-25deg);

}

::beforeでcontentした正方形を傾けて平行四辺形にし、その一部を隠すと台形の出来上がり。

台形2 trapezoid2

class：square trapezoid2

.trapezoid2 {
	overflow:hidden;
	background:transparent;
}
.trapezoid2::before {
	content:"";
	display:block;
	width:100px;
	height:100px;
	-moz-transform-origin:0 100%;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-moz-transform:skewX(-25deg) translate(-10px,-20px);
	-webkit-transform:skewX(-25deg) translate(-10px,-20px);
	transform:skewX(-25deg) translate(-10px,-20px);
	background:-moz-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:-webkit-linear-gradient(
		45deg,red,red 50%,
		transparent 50%,
		transparent 100%);
	background:linear-gradient(
		45deg,
		red,
		red 50%,
		transparent 50%,
		transparent 100%);
}

.trapezoid2 {

overflow:hidden;

background:transparent;

}

.trapezoid2::before {

content:"";

display:block;

width:100px;

height:100px;

-moz-transform-origin:0 100%;

-webkit-transform-origin:0 100%;

transform-origin:0 100%;

-moz-transform:skewX(-25deg) translate(-10px,-20px);

-webkit-transform:skewX(-25deg) translate(-10px,-20px);

transform:skewX(-25deg) translate(-10px,-20px);

background:-moz-linear-gradient(

45deg,red,red 50%,

transparent 50%,

transparent 100%);

background:-webkit-linear-gradient(

45deg,red,red 50%,

transparent 50%,

transparent 100%);

background:linear-gradient(

45deg,

red,

red 50%,

transparent 50%,

transparent 100%);

}

::beforeでcontentしたものを三角形1の手法で三角にして、その頭を1つ隠している。しかしtrapezoidなんて単語、初めて知ったなあ。

CSS3で描く基本図形

2012.7.27、以下の修正・変更を行いました。

transformのskewの記述をskewXとskewYに変更
border-radius,box-shadowのベンダープレフィックスを削除
ellipseのborder-radiusの記述を修正

css及びcss3の描画で、様々な物を描く事が可能だ。IE8以下のブラウザをどうサポートするかは、考慮する必要があるが、web表現にpureなcssによる描画を使わない理由にはならない。

むしろ積極的にcssによる表現を楽しむ姿勢こそが必要であり、css3で採用が検討されつつある、便利で（同時にとても複雑に感じられる）指定方法を理解する為の、最良の練習方法であると信じている。

とは言え、何かのとっかかりは必要だから、Adobe Illustratorを学んだ時と同じ様に、基本的な図形を作成する方法を理解するのが良いはず。Mozillaにも良い解説が有るが、基本図形の描き方という趣旨で、以下にまとめた。

四角 square

class：square

/*square. This shape is origin of other shapes.*/
.square {
    width:100px;
    height:100px;
    margin:20px;
    position:relative;
    background:rgb(100,100,255);
}
.square:hover {/*サンプル用。マウスhoverで影を付ける*/
    box-shadow:3px 3px 3px rgba(0,0,0,0.7);
}

/*square. This shape is origin of other shapes.*/

.square {

width:100px;

height:100px;

margin:20px;

position:relative;

background:rgb(100,100,255);

}

.square:hover {/*サンプル用。マウスhoverで影を付ける*/

box-shadow:3px 3px 3px rgba(0,0,0,0.7);

}

十字 cross

class：square cross

.square.cross {
    width:25px;/*その要素自身の幅を、高さの1/4に指定。*/
    left:37.5px;
}
.cross::before {
    content:"";	/*before疑似要素のcontent*/
    display:block;	/*ブロック化*/
    width:100%;	/*幅と高さを100%に*/
    height:100%;
    /*90度回転。回転の基準点はデフォルトで中心なので指定しない*/
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    /*色を変えたのはサンプルとしての分かり易さのため*/
    background:rgb(80,80,200);
}

.square.cross {

width:25px;/*その要素自身の幅を、高さの1/4に指定。*/

left:37.5px;

}

.cross::before {

content:""; /*before疑似要素のcontent*/

display:block; /*ブロック化*/

width:100%; /*幅と高さを100%に*/

height:100%;

/*90度回転。回転の基準点はデフォルトで中心なので指定しない*/

-moz-transform:rotate(90deg);

-webkit-transform:rotate(90deg);

/*色を変えたのはサンプルとしての分かり易さのため*/

background:rgb(80,80,200);

}

×（バッテン）

class：square cross batu

.shapesDemo .sample .square.cross.batu {
    -moz-transform:rotate(45deg);	/*45度回転。*/
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.shapesDemo .sample .square.cross.batu {

-moz-transform:rotate(45deg); /*45度回転。*/

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

}

アスタリスク asterisk

class：square cross asterisk

/*アスタリスクasterisk*/
.square.cross.asterisk::before {
    -moz-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}
.square.cross.asterisk::after {	/*線を一本増やす*/
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
    transform:rotate(-60deg);
    /*色を変えたのはサンプルとしての分かり易さのため*/
    background:rgb(50,50,200);
    /*before疑似要素が既に生成されているので、
    重ねる為には以下の指定が必要。*/
    position:absolute;
    top:0;
    left:0;
}

/*アスタリスクasterisk*/

.square.cross.asterisk::before {

-moz-transform:rotate(60deg);

-webkit-transform:rotate(60deg);

transform:rotate(60deg);

}

.square.cross.asterisk::after { /*線を一本増やす*/

content:"";

display:block;

width:100%;

height:100%;

-moz-transform:rotate(-60deg);

-webkit-transform:rotate(-60deg);

transform:rotate(-60deg);

/*色を変えたのはサンプルとしての分かり易さのため*/

background:rgb(50,50,200);

/*before疑似要素が既に生成されているので、

重ねる為には以下の指定が必要。*/

position:absolute;

top:0;

left:0;

}

角丸四角 rounded square

class：square rounded

.rounded {
    border-radius:10px;
}

.rounded {

border-radius:10px;

}

角を丸めるにはborder-radiusを指定する。Firefox3.6では-moz-というベンダープレフィックスが必要。

正円 circle

class：square circle

.circle {
    border-radius:50%;
}

.circle {

border-radius:50%;

}

border-radiusの値を、高さ・幅の50%にすると正円になる。

~~webkitでは%での指定ができないので数値で指定。ぜひ%指定もサポートして欲しい。~~サポート済み。

radiusという単語は聞き慣れないが、英語での半径のこと。2πrとか、πr²の公式に出てくるrや、「この道はrがキツくて事故が多い」などと言う時のrはradiusの頭文字だ。

楕円 ellipse

class：square ellipse

.ellipse {
    height:50px;
<del datetime="2012-07-27T02:53:00+00:00">    -moz-border-radius:50%/25%;
    border-radius:50px/25px;</del>
<ins datetime="2012-07-27T02:53:00+00:00">
    border-radius:50%;
</ins>
}

.ellipse {

height:50px;

<del datetime="2012-07-27T02:53:00+00:00"> -moz-border-radius:50%/25%;

border-radius:50px/25px;</del>

border-radius:50%;

</ins>

}

border-radiusには左上、右上、右下、左下の順番で4つの値を指定できる。さらに、それぞれの角のradiusの値としてx方向のrとy方向のrを/で区切って指定できる。

楕円には長径と短径がある。横長の楕円なら、幅の半分の値が長径になり、高さの半分の値が短径になる。

~~縦横比が1：2の楕円なら、4つの角のrのx方向を50%、y方向を25%にする。~~

~~webkitは、やはり%が使えないので数値で指定。~~

border-radius:50%;だけで楕円になります。

円筒 tube

class：square tube

.tube {
    border-radius:50%/25%;
}
.tube:after{/*フタ部分*/
    content:"";
    display:block;
    position:absolute;
    top:2px;
    left:2px;
    width:96px;
    height:48px;
    border-radius:50%;
    background:rgb(150,150,255);
}