メモメモ:windowsにImagemagickをインストールしてxampp上のPHPで使えるようにするよ



Windows7 64bitでPHP5.4、5.5、5.6それぞれで確認したよ。
先に言っておくけど、PHP5.4ではJPEGやTIFが対応できませんでした。(GIFはOK)
原因は不明ですが参考までに、以下の手順で準備した場合のPHP5.4のphpinfoです。

phpinfo3

“ImageMagick supported formats”にJPEGやPNGが出てきません。

1.ImageMagick本体をDLしてインストール

続きを読む

 

メモメモ:何故かIEだけopacityが効かない時の原因



IEではopacityを付ける要素の子要素がposition:absolute;の時は、その親要素にposition:relative;を付けないとopacityが働かない。

<div id="outer">
    <div id="inner">
        ほげほげ
    </div>
</div>
#outer { opacity : 0; }
#inner { position:absolute; left:0; top:0;}

これだとIEではopacityが効きません。

#outer { opacity : 0; position:relative; }
#inner { position:absolute; left:0; top:0;}

position:relative; を親要素に付ければOK。

 

すべてがFになる THE PERFECT INSIDER



2015年秋期のノイタミナ枠アニメの公式ページです。
外界との接触を絶たれた島の施設で起こる殺人事件の謎を解く推理ミステリー小説のアニメ作品です。じわじわと犯人に迫っていくような緊張感のある展開で、毎回目が離せません。

ウェブサイトの方も、ページを開くと最下部まで自動スクロールしてからクルッと180度回転するギミックが特徴的でおもしろいですが、これは作品自体のオチも暗示しているのでしょうか。
原作は20年前の小説ですが、未読なのでどうなるのか楽しみです!

 

名倉やないかい



以前ネプチューンの名倉さんを広報に抜擢したことでも話題になったタイ・セレクトで企画されている、タイ料理のキャンペーンサイト。
トップにでかでかと出てくる名倉さんはインパクトがありますがそれはさておき、単純に3Dに回転するだけでも小気味イイ動きでスクロールしていて気持ちいいですが、さらにタイ語だった文章が日本語に変わる演出はナルホドな感じです。
演出の意図がはっきり伝わるようなスクロールイベントは効果的で見ていてもおもしろいなあ。

 

CSS等で矩形以外にクリッピングマスクをかけたウェブサイトたち



かつてはHTML/CSSだけでマスクする場合はブロック要素にoverflow:hidden;をかけたりCSSのclip要素を使うしかありませんでした。
また、矩形以外の形にマスクをしたければFlashを使うか、マスクしたい箇所を繰り抜いたPNG画像で擬似的に実装するしかありませんでした。
しかし最近はclip-pathやmask-imageの実装が進んでいる事で、HTML/CSSのコーディングでも様々な形のマスクを実装することができるようになってきており、デザインの幅が広がっています。また、そういった最近の技術を使う方法でなくても、さまざまな工夫によって矩形ではないマスクっぽく見える演出を実装したウェブサイトも増えてきています。
というわけで、様々な方法で矩形以外のマスク(っぽい)演出を利用しているウェブサイトをまとめてみました。

目黒通りのワインショップ オルニス ornis
目黒通りのワインショップ オルニス ornis
目黒通りのワインショップ オルニス(ornis)

さまざまな仕掛けで、マスク以外の要素見ていて楽しいこちらのウェブサイトですが、ボトル型にマスクされたGoogleMapは、地図=矩形の常識に因われないデザインで特に目が留まります。
こちらのサイトではmask-imageが実装されているwebkit系のブラウザではボトル型の画像を使ってCSSでmask-imageを設定し、Firefoxでは<svg>タグでボトル型の図形を書きだしてclip-pathでマスクを適用しています。
IEなどではボトル型のマスクは適用されず、長方形のマップとなっています。

続きを読む

 

茨木市に関わるウェブサイトたち



いやさすがにこの括りはローカルすぎるだろ、と自問自答しているけど、まとめますよ。強行ですよ。

茨木市は大阪北部に位置し、JRや阪急電鉄の路線ではちょうど大阪と京都の中間にあるのでベッドタウンとして栄えて(?)いる都市です。
かつては、昨年の大河ドラマ 軍師官兵衛に登場した荒木村重や中川清秀の居城、茨木城を中心に栄え(?)ました。また同じく戦国時代では、市の北部はキリシタン大名として有名な高槻城城主 高山右近の所領であったこともあり、隠れキリシタンがいたことでも有名(?)で現在は資料館も建てられていて、当時の遺物を見学することができます。
そしてもちろん、この僕の出身地でもあることは言うまでもありません。
また、重要なことですが茨木市民や出身者に対して「茨城」と誤字ったり「いばら」と読むと笑顔のまま不機嫌な態度で正しい表記/読みに訂正されるのでご注意ください。

25162-0
吉見自動車株式会社|Yoshimi Auto Co.,Ltd.

茨木市にあるボルボ専門のカーショップのウェブサイトです。
白バックで縦長でゆったりスペースなイマドキのシンプル系レイアウトですが、手書きイラストのやわらかいイメージがさらにゆったりとした温かみを増しています。
オンマウスした時の黄色いストライプ柄のオーバーレイはなかなか斬新で、このサイトをただのオーソドックスなデザインで終わらせない要因となっているように思います。

どこかのウェブデザイン系のリンク集で見かけたこのウェブサイトが、たまたま茨木市の会社さんだったことで、あんな田舎マイナーな街でも素敵なウェブサイトがたくさんあるのではないか、と思って今回のまとめを思いついたわけなのです。

続きを読む

 

左右となりのバナーがチラッと見えるjqueryスライドバナーをつくったよ



banana4

左右のバナーがチラッと見えてスライドの並び順がループしているようなスライドバナープラグインがなかったので作ったよ。
こんなやつね↓

[jquery.banana4.min.js]
[DOCUMENT]
[Uncompressed on GITHUB]
使い方はこちら

update
2015/11/09
レスポンシブに対応しました

 

マジ怖い閲覧注意!でも最近では珍しい、ちゃんと「意義のある」スクロールイベント



いやホント怖いから!ホラー苦手な人は見ないほうがいいっすまじで。
こういうの苦手な僕は一番下までスクロールする勇気がでなくて、全部見るのに1週間くらいかかったっからまじで!!

それはそれとして、近年、演出上の意義をまったく感じられない、流行だからスクロールイベント実装してみました☆みたいなサイトが氾濫していて、効果的にスクロールイベントを利用しているサイトは逆に珍しいなあ。デザインというのは「(技術的に)できるからやる」のではなく「意義があるからやる」ものだということを改めて感じます。

続きを読む

 

HTML/Javascriptでフォントブラウザをつくったよ



banner_fontwedge

フォントブラウザ作ったよ第二弾。
前作のフォントブラウザはフォントリストの中から任意のフォントを選んで並べて見比べられる、という点をコンセプトに作ったんだけど、やっぱ書体自体の形から見比べられる方がいいよね、ということでこういう感じにリメイクしてみたわけです。

fontwedge2

続きを読む

 

<!– naname –>