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

キロクのブログ

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

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

続きを読む

精麦工場を再利用:MOKICHI FOODS GARDEN(茅ヶ崎市元町)

茅ヶ崎は、北口に下りようが南口に降りようが、どっちも目に入るのはチェーン店ばかり。駅ビルも小さい。
「ここが湘南?雑誌に載ってるようなおしゃれな店ってほんとにあるんだろうか?わざわざこっちに引越までして住む人達は、何故決めたんだろう?」
湘南でも他のエリアと異なり、そう思われるのも無理もない光景が広がる駅前を離れ、徒歩やバスで数分~数十分の距離を移動すれば、それなりにはあるのですよ。ファミレスでさえちょっと違う。
元・住人として、少しずつ、知ってる限り、紹介していきたいと思います。
(※盛衰も早いからご無沙汰していると、あの名店が!!!と涙することも多いです)。


今回ご紹介するのは、茅ヶ崎駅北口から徒歩5分。住宅街の中にある木造の精麦工場を再利用したレストラン「MOKICHI FOODS GARDEN(モキチ フーズ・ガーデン)」。

日本精麦株式会社さんの工場として昭和19年に建てられ、今はこちらのレストランに貸与しているそう。

醸造用精米機と書かれた古い機械が目立つけど、当時に使っていた計器類がインテリアとして飾られています。

続きを読む