読者です 読者をやめる 読者になる 読者になる

キロクのブログ

変わりゆく風景やものを単なる私的思い入れで記録中。意外とのんびりしてられない。

旧・軍人会館:九段会館

九段会館(旧・軍人会館)1934年(昭和9年)3月竣工。
どんな建築にも歴史や物語があると思うが、ここも昭和史の舞台ともなった建築の1つ。

二・二六事件(1936年・昭和11年2月26日) 」の司令部があったところ。二・二六事件とは、若き陸軍の青年将校たちがたった数時間で東京の中枢エリアを占拠し、首相官邸や大臣宅など政府要人達を次々に襲撃した近代の日本最大のクーデター未遂事件。

続きを読む

[HTML・CSS]CSSでエフェクト:hoverで文字が拡大する

何度引越してもずっと白が基調の我がブログ。
地味で無機質になりがちなので、マウスオーバーしたとき、その部分がほわっと拡大するエフェクトを付けてみました。

【例】
ここからトップページに飛びます。


jQueryなどのJavaScriptを使わず、CSSのみで簡単に実装できます。

a{
    display: inline-block;
    color: #999;   
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

a:hover {
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}


時間の変化を操作する「transform」というプロパティを使用するのですが、今回のポイントは、

  • a タグはインライン要素なので、display: inline-block; にして、 transform プロパティが使えるようにする。
  • リンクのない他の文章には影響させたくないのでscale を使って指定。

ブログ全体に適用してしまうと鬱陶しくなったり、サイドバーのレイアウトが崩れる可能性があります。記事の部分のみに適用するには「a」「a:hover」のところを適当なものに変えてください。当ブログでは「entry-content a」「entry-content a:hover」と書いています。

文字だけでなく画像にも使えます。
今回は「拡大」ですが、他にも反転させるとか、回転するとか、ほわっと変化するとか、いろんな効果が作れます。
そのうちまた書いていきますね。

日比谷公会堂と、アーカイブカフェ【閉店】

日比谷公会堂は1929年(昭和4年)に竣工。
日比谷公園にあること自体、既に激動の歴史のニオイ。東京の空襲で唯一焼け残ったと言われている音楽ホールと市政会館。

ここから歩いて10分もかからない場所は一面焼け野原になってしまったのですが・・・。奇跡的に残ったという説と、接収するときのことを考えて爆撃をしたため、残ったのではなく残したという説と。

続きを読む