かつてはHTML/CSSだけでマスクする場合はブロック要素にoverflow:hidden;をかけたりCSSのclip要素を使うしかありませんでした。
また、矩形以外の形にマスクをしたければFlashを使うか、マスクしたい箇所を繰り抜いたPNG画像で擬似的に実装するしかありませんでした。
しかし最近はclip-pathやmask-imageの実装が進んでいる事で、HTML/CSSのコーディングでも様々な形のマスクを実装することができるようになってきており、デザインの幅が広がっています。また、そういった最近の技術を使う方法でなくても、さまざまな工夫によって矩形ではないマスクっぽく見える演出を実装したウェブサイトも増えてきています。
というわけで、様々な方法で矩形以外のマスク（っぽい）演出を利用しているウェブサイトをまとめてみました。
目黒通りのワインショップ オルニス(ornis)
さまざまな仕掛けで、マスク以外の要素見ていて楽しいこちらのウェブサイトですが、ボトル型にマスクされたGoogleMapは、地図＝矩形の常識に因われないデザインで特に目が留まります。
こちらのサイトではmask-imageが実装されているwebkit系のブラウザではボトル型の画像を使ってCSSでmask-imageを設定し、Firefoxでは<svg>タグでボトル型の図形を書きだしてclip-pathでマスクを適用しています。
IEなどではボトル型のマスクは適用されず、長方形のマップとなっています。
(さらに…)
いやさすがにこの括りはローカルすぎるだろ、と自問自答しているけど、まとめますよ。強行ですよ。
茨木市は大阪北部に位置し、JRや阪急電鉄の路線ではちょうど大阪と京都の中間にあるのでベッドタウンとして栄えて（？）いる都市です。
かつては、昨年の大河ドラマ 軍師官兵衛に登場した荒木村重や中川清秀の居城、茨木城を中心に栄え（？）ました。また同じく戦国時代では、市の北部はキリシタン大名として有名な高槻城城主 高山右近の所領であったこともあり、隠れキリシタンがいたことでも有名（？）で現在は資料館も建てられていて、当時の遺物を見学することができます。
そしてもちろん、この僕の出身地でもあることは言うまでもありません。
また、重要なことですが茨木市民や出身者に対して「茨城」と誤字ったり「いばらぎ」と読むと笑顔のまま不機嫌な態度で正しい表記／読みに訂正されるのでご注意ください。
吉見自動車株式会社｜Yoshimi Auto Co.,Ltd.
茨木市にあるボルボ専門のカーショップのウェブサイトです。
白バックで縦長でゆったりスペースなイマドキのシンプル系レイアウトですが、手書きイラストのやわらかいイメージがさらにゆったりとした温かみを増しています。
オンマウスした時の黄色いストライプ柄のオーバーレイはなかなか斬新で、このサイトをただのオーソドックスなデザインで終わらせない要因となっているように思います。
どこかのウェブデザイン系のリンク集で見かけたこのウェブサイトが、たまたま茨木市の会社さんだったことで、あんな田舎マイナーな街でも素敵なウェブサイトがたくさんあるのではないか、と思って今回のまとめを思いついたわけなのです。
(さらに…)
私事ですが、1ヶ月くらい前から自転車通勤にしました。
一日に10ン時間もPCに向かっていてほとんど運動してなくて、これはまずいなーと思って。家と会社の距離もそんなに遠くないので、自転車で通勤するかー、と思い立ち、色々調べていて、「クロスバイク」というものを始めて知りました。ドロップハンドルのロードバイクよりも街で乗るには向いていて、通勤に使う人も多いという事でこのジャンルで選ぶことに。片道5.5kmなので、遠すぎず、近すぎず、なまった体にはちょうどいい運動量になっていると思います。自転車いいよ自転車。
と、いうわけで自転車初心者なのに恐縮ですが、簡単に主なメーカーをサイトと合わせて紹介します。
(さらに…)
ちょっと仕事で大学のサイトを色々見て周ったのでまとめてみる。
(さらに…)
いつの間にやら、陸海空各自衛隊のサイトがリニューアルされていました。
(庁から省になったタイミングででしょうか・・・？)
まあ、デザインやコンテンツとして特別取り上げるトコがあるわけではないのですが。
(さらに…)
