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.




class:square cross

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.


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

Only 45-degree rotation added to “cross”.


class:square cross asterisk

rounded square

class:square rounded

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


class:square circle

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 πr2

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!


class:square ellipse

Four values can be specified for,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.


class:square tube

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

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



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

半円 half circle

class:square circle half

扇型 quarter circle

class:square circle quarter


平行四辺形 parallelogram

class:square parallelogram


三角 triangle

class:square parallelogram triangle



三角2 triangle2

class:square triangle2

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


台形 trapezoid

class:square trapezoid


台形2 trapezoid2

class:square trapezoid2


CSS3で描く 基本図形

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



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

四角 square


十字 cross

class:square cross


class:square cross batu

アスタリスク asterisk

class:square cross asterisk

角丸四角 rounded square

class:square rounded


正円 circle

class:square circle




楕円 ellipse

class:square ellipse






円筒 tube

class:square tube



その他の イラスト



  • 京野菜:賀茂なす・鹿ヶ谷かぼちゃ
  • 京野菜:聖護院だいこん・えびいも・九条ねぎ・京にんじん


  • うぞう
  • むぞう


  • カレーでGO!
  • アリンコネット


  • 夏の終わり
  • 牛の仔
  • たきにうたれているつもり
  • 寒い羊
  • 落下する猿をライフルで撃つ問題