普段何気なく観覧しているインターネット。
そこに潜む脆弱性を伝えてくれるサイト。
こちらのサイトで「Ｌｅｔ'ｓ Ｓｔａｒｔ」ボタンを押してしばらくすると
「あなた、こんなサイト見たことあるでしょう？」的なサイトがずらずらと表示されます。
ちょっとしたトリックを使えばＷＥＢの観覧履歴を習得できる危険性を教えてくれるサイトです。
最近はこの技術を使って広告を仕込んでくる手法もあるので
気をつけましょう。
2009年6月アーカイブ
面白いサイトのご紹介。
前編ムービー(Flash)のフォルクスワーゲンのプロモサイトです。
今のホームページは、中で使う素材をPhotoshopやFireworksで加工してから配置が定番。
でも、実際全部をアナログで作ったらどうなるか・・・
大胆にチャレンジしたサイトがこちら。
loading中のパラメーターまで、一切妥協なし。
面白いです。
ホームページ制作ではよく使う「角丸」。
通常は角丸の画像を用意したりで、なかなか手間のかかる作業ですが、
今回はjavascriptで角丸を作る方法、「DD_roundies」をご紹介です。
使用方法は簡単。
まずwebからライブラリをダウンロード。
ヘッダで読み込ませます。
そして普通にHTMLとCSSで四角形を用意します。
<div id="box">
<p class="test" align="center">メールフォーム</p>
</div>
<style type="text/css">
<!--
#box {
position:absolute;
left:17px;
top:21px;
width:198px;
height:53px;
z-index:1;
}
.test {
border:2px solid #7CBF4D;
background:#AFF32A;
}
-->
</style>
続いてライブラリの組み込み。
<script type="text/javascript">
DD_roundies.addRule('.test', '10px', true);
</script>
のように指定すると出来上がりです。
このライブラリはCSS3でサポートされる予定の「border-radius」プロパティを使用しているようで、
6以降のIE、Firefox3、Cromeなどで使用可能です。
画像で作る角丸に飽き飽きしてきた方はぜひお試しを。
通常は角丸の画像を用意したりで、なかなか手間のかかる作業ですが、
今回はjavascriptで角丸を作る方法、「DD_roundies」をご紹介です。
使用方法は簡単。
まずwebからライブラリをダウンロード。
ヘッダで読み込ませます。
そして普通にHTMLとCSSで四角形を用意します。
<div id="box">
<p class="test" align="center">メールフォーム</p>
</div>
<style type="text/css">
<!--
#box {
position:absolute;
left:17px;
top:21px;
width:198px;
height:53px;
z-index:1;
}
.test {
border:2px solid #7CBF4D;
background:#AFF32A;
}
-->
</style>
続いてライブラリの組み込み。
<script type="text/javascript">
DD_roundies.addRule('.test', '10px', true);
</script>
のように指定すると出来上がりです。
このライブラリはCSS3でサポートされる予定の「border-radius」プロパティを使用しているようで、
6以降のIE、Firefox3、Cromeなどで使用可能です。
画像で作る角丸に飽き飽きしてきた方はぜひお試しを。
ホームページには必ずといっていいほどあるのが、『フォーム』
みなさん、どうしてるんでしょう？
今は昔のHTMLフォームと違い、PHPやらCGIやらajaxやらが当然になってしまって。
かといって、PHPやCGIを１から組めるデザイナーさんってどれぐらいいるんだろう
とも思う。
プログラマーさんがいる制作会社はまた別だろうけど、制作会社って全部が全部
プログラマーさんが常駐してるところって事は無いと思うし。
そんな時、コレ使ってみてください。
スタイリッシュなフォームが多数紹介されています。デザインなどの参考に。
ちょっと面白い、というか楽しいキャプチャーを見つけました。
「PrtScr」なるソフトです。
どこが面白いかというと、キャプチャーした画像がデスクトップ上でゆらゆら揺れます。
一緒に出てくるダイアログで保存するまで揺れ続けるわけですが、
その揺れている画像をドラッグしてPhotoshopなどのプログラムに直接投げ込めます。
このソフトのちょっと良いところでもあります。
保存ダイアログでは「To desktop」でデスクトップへ一発保存も可能。
もちろん矩形領域指定やフリーハンドでの範囲指定などもできます。
さらにフリーハンドなどで指定してJPEG保存すると、背景をホワイトアウトしてくれる工夫もあり。
日本語化パッチも出ているのでバッチリ。
普通のキャプチャに飽きた方、息抜きに試してみてはいかがでしょうか？
最近フォントを調べていたら、
「エコフォント」なるものを発見。
フォントの文字が中抜きされていて、
それによりプリントアウトしたときの、
インクやトナー使用量を削減するというものらしい。
「エコフォント」と言われなければ普通に、
「こういうフォント」と勘違いしてしまいそうだが、
これによってインクやトナーを通常の約20％削減できるらしい。
エコが叫ばれる時代、ついにここまで来たかとも思えるが、...確かに節約率は高いと思う。
プリントアウトを頻繁に行うオフィスなどでは活躍する可能性も高いかもしれない。
しかし問題は、ビジネス書類としてこういったフォントが受け入れられるかどうか...な気もする。
いつかこういったフォントで文書が交わされる日も近いのか。どうか。
エコフォントがどこまで発展していくか、見ものでもある。
Firefox、使っている方も多いと思います。
アドオンでカスタマイズして、かなり便利ですね。
そんなアドオン達の中で、ついつい使ってしまうアドオンを少しご紹介。
カラーピッカーです。
ちょっと色を調べたいときに重宝してます。
逃がしたくない「その色！」を発見した時に。
「Font Finder」
その名の通りフォントやカラーが解ってしまいます。
むしろフォントの色を調べるときに使ってます。
IT関係者の方にはもはや必須アイテム状態。
SEOする上での必要情報がいろいろと解りますね。
使わないけどこんなアドオンも。
文字通りFirefoxでFTPするアドオンです。
今度使ってみたい...。
勢いで入れてしまって、使ってないアドオンもしばしばですが、
このカスタム性、かなり好きです。
CSSファンの皆さんこんにちは。
先日CSS3の概要を少しお伝えしましたが、
今日はその続きです。
以下に先日よりもう少し詳しい内容をお伝えします。
1. セレクタ (CSS3では強力なセレクタ指定ができるため、HTMLから不要なIDやクラス指定を削除できるようになる)
2. RGBAおよび透過 (RGBA: Red Green Blue Alpha指定で透過を実現できる。ただしWebkitベースブラウザ、Firefox 3+、Opera 9.5+でしかサポートされていない)
3. マルチカラムレイアウト (CSS3セレクタを使えば複数のdivを使うことなくマルチカラムレイアウトを実現できる。サポートしているのはSafari 3+とFirefox 1.5+)
4. マルチバックグラウンド (CSS3では複数のプロパティをレイヤとして重ね合わせて適用させることができる。SafariとKonquerorしかサポートしていないためあまり使われていないプロパティだが、デザイナに要求される作業の軽減やHTML要素の削減につながる)
5. ワードラップ (ワードラップ機能を活用する。IE、Safari、Firefox 3.5+でサポート)
6. テキストシャドー (CSS2からあるがあまり使われていない機能だが、文字に奥行きをあたえる機能として効果的。WebkitベースのブラウザとOpera 9.5+、Firefox 3.5+がサポート。IEは未対応)
7. @font-face属性 (これもまだまだ使われていない機能。フォンとのライセンス問題にも一因がありそう。Safari 3.1+、IEがサポート。Opera 10とFirefox 3.5でサポートされる見通し)
8. ボーダー角丸み (背景画像を使わなくとも四隅をそのまま四角ではなく丸みを持たせることができる。OperaとIEではサポートされていない。WebkitとGeckoベースのブラウザはサポートしている)
9. ボーダーイメージ (ボーダーに画像を指定できる。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされるかどうかは不透明)
10. ボックスシャドー (要素に影を追加する。Webkitベースのブラウザだけが今のところサポートしており、Firefox 3.5でサポートされる見通し)
11. ボックスサイジング (縦横のサイズ計算をどうおこなうのかを明示的に指定する。IE8、Opera、Gecko、Webkitでサポート)
12. メディアクエリ (デバイスの能力に合わせて適用するデザインを変更する。WebkitベースブラウザとOperaがサポートしている。Firefox 3.5で搭載が予定されているが、IEは対応のめどもよくわからない)
13. スピーチ (スピーチスタイルを指定する。ただしWindows XP/2000で動作するOperaだけがサポートしている)
ズラッと並べてしまいましたが、現在はこんなところみたいで。
本格実装はいつになるのか！？
引き続きお楽しみ。
気になる方はこちらなどをご参考に。
・・・やはりIEはツラいのか？？？
いまさらですが、オサライ。
IE7からアルファチャンネルを含むPNG表示が出来るようになったけど、
IE6.x以前は対応していません。
簡単に表示できるようにしてくれるのが、iepngfix.htc。
タグ、またはエレメントの背景画像にxxx.png画像が指定されているものに対して、AlphaImageLoaderを適用。
導入は簡単に行うことが出来ます。注意したいのはhtcファイル中で指定されているblank.gifのアップロードと、パス記述の修正程度です。アップロードが出来たら、スタイルシートに下記のコードを追加します。
スタイルシートの記述
スタイルシート中に透過PNG表示を適用したいスタイルに、behavior:url(iepngfix.htc)記述をします。
<style type="text/css">
img, div { behavior:url(iepngfix.htc) }
</style>
タグにAlphaImageLoaderを適用した場合、イメージソース（src）はblank.gifに置換され、背景イメージとblank.gifの中間のレイヤーとしてPNGイメージが出力されている状態に。
簡単に導入できるので、是非。
Daniel rolloverとはぶつかりますよ。
Appleから6月18日にiPhone OS 3.0がリリースされた模様。
iPhone 3G の OS を「iPhone OS 3.0」へアップデートすることで、
テキストのカット、コピー＆ペーストや、「MMS（マルチメディアメッセージングサービス）」、
メールや SMS、MMS での横向きキーボード対応などの新機能が利用できるようになるとのこと。
その他にもボイスメモの搭載や、カレンダー・株価アプリの向上など、
いろいろパワーアップが施されている様子だ。
さて、問題は実際どこまで使いやすくなっているのか！？
まだアップデートしていない方はお早めにどうぞ。
今ではかなり幅を利かせている代表的なオープンソースCMS達です。
個人的に触ったことがあるのは、OpenPNE,Word Press,Drupal,Joomla!あたりでしょうか。
XOOPSやEC-CUBEあたりも触ってみたいですが、まだ機会が･･･
CMSと言っても、それぞれの用途に特化しているものがほとんどのようで。
どのようなサイトを作るのか、良く検討したうえで、ウェブサイトにあった最適のCMSを選びましょう。
個人的にはやっぱりWordPressが好きです。
Widexplorerは指定したサイトをそのまま一つのブラウザ内で
ズラーっと横に並べて表示させてくれるツール。
一度に他のブラウザで見たいときとか
誰かにまとめてＵＲＬ送りたい時とか
便利かもしれません。
個々に縦スクロールできるので
使用してて違和感はありませんが
どうも横スクロールはなれません。
ちょっと面白いツールを見つけたのでご報告です。
ちょっとかっこいいフォトブラウザだったので。
いろいろな演出が楽しめる3Dフォトブラウザです。
さまざまな動きや表示で面白いです。
最初に、検索したい画像のキーワードを入力すれば関連イメージが表示されます。
（ただし日本語はダメみたい。）
表示方法の切り替えは右上のボタンでOK。
スライドショーで楽しむこともできたり。
タグで検索なんかもできて、クリックで追加できたりします。
手書きフォントを使っていたり、なかなか憎めないサイト。
こちらからどうぞ。
ミニチュア模型のような写真が簡単に作ることができるオンラインツール。
使う機会はすくないだろうが
知っておくと便利かも。
で、面白いと思う。
見ているだけでも面白いと思う。
子供のころおもちゃをみてわくわくしたような。
写真はなるべく遠景の方がいいみたい。
要素中のテキストの右側がキレイに揃わなくて、
ガタガタでお困りのみなさんこんにちは。
そんな時はすかさずCSSで、
text-aligin:justify;
です。
ワープロなどで言う、いわゆる「均等割付」的な小技です。
上のイメージのように途中の行をすべて均等揃えにしてくれます。
右側がキレイに揃います。
上記の効果を得る場合、Firefox等のブラウザではそのままで行けますが、
IEの場合は text-aligin:justify; に加えて text-justify:inter-ideograph; が必要なので注意。
また、和文のみで構成されている場合はこれでキレイに揃いますが、
英単語を多く含む場合、"justify"するとかえって文字組みが汚く出てしまうこともあるので注意。
テキストの多いページの制作などで活かしてみてください。
地味ですが与える効果はわりと高い小技かと思います。
東京ミッドタウンが去年に続いて「Tokyo Midtown Award 2009」を開催するらしい。
アートコンぺとデザインコンペの2部門があり、デザインコンペのお題は「Japanese New Gift 日本の新しい手みやげ」である。
手土産というと、緑の風呂敷に包まれたアレか、お菓子のホームラン王、「ナボナ」しか思い当たらない・・・
自分の表現力の無さを実感。
2次審査の入選者4名には、制作補助金（各100万円）が支給され、多くの人が訪れる東京ミッドタウンの「プラザB1F通路ガラスケース」にて作品が展示されるらしい。
賞金はそれぞれ、グランプリ100万円（1点）、準グランプリ50万円（1点）、佳作30万円（2点）。制作補助金の支給は、アーティストにとっても嬉しい仕組み。
しかも、日本在住の方であれば、だれでも参加OK。
腕に自身がある方はどうぞ。
インターネットを観覧する上で必ず誰しも
検索エンジンを使用し、自分の目的の情報などを探すと思います。
Web制作でもフリーの素材探しなど
よく画像検索をつかいます。
googleの画像検索で
imgcolorというパラメータを付け加えることで
指定した色で検索結果を絞ることができます。
ワード 「パソコン」
カラー「青」
知っておくと便利かも。
やってますか？
バリデータチェック。
どのくらいの人がやってるんだろうと、いつも思う。
もちろん、クライアントに納品する前は、一応やってはみるものの。
制作サイドとしては、W3Cの準拠に乗っ取ってつくることはベストであり、今や当然の時代だと思う。
しかし、実際クライアントさんに、そこを理解してもらうことはとても大変なことであり、
実際、無視をしなければ作れない場合もあったりして・・・
目に見えない部分の説明ってどうしてますか？
聞かれなければ、逆に混乱を招く事はいちいち説明しないほうがいいんだろうか？
でも、企業としてもそこんとこいい加減に作ってたらいつまで経ってもベースアップは難しいし。
ほかの会社に、「デタラメ」と言われる事だけは避けたいし、あってはならないし。
webもデザインである以上、見た目が重要なのは百も承知。
しかし、webデザインはそこだけではないといつも思うようにしている。
全てはバランスの上で成り立つものであって、カッコいいけど視認性が低い、
流行のデザインだけど使いづらい、などなどあげたらきりがない。
どこまで、正しく作るか。
そこら辺に気を受けて、意識して、意識しすぎず制作を行うことがこれから先、
web制作に携わる者として重要な課題だと思う。
前にも少し書きましたが昨年あたりから流行っているという、
「グランジデザイン」。
いまちょうどシルバーアクセサリ販売のHPを制作していることもあって、
少し取り入れてみようかと調べてみると。
...出てくる出てくる。
流行りなのか異常な数がヒット。
Photoshop用のブラシ、テクスチャ、フォント。
などなど。
味を出すにはちょっと工夫が要りそうだけど、
チャレンジしてみるのも面白いかも。
やってみたい方は手始めにこちらなどをご参照に。
角丸を使いたい。
でもイメージや背景画像だと、この先使いづらい。
では、どうする？
↓こんな書き方もをする時もある。
■ HTML
<div class="rbox">
<div class="rtop">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<div class="textbox">
ここにテキスト
</div>
<div class="rbottom">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>
■ CSS
.rbox {
width:300px;
background-color:#cccccc;
}
.textbox {
margin:0px;
padding:10px;
background-color:#cccccc;
}
.rtop, .rbottom{
background-color:#ffffff;
}
.rtop span, .rbottom span{
display:block;
height:1px;
overflow:hidden;
background-color:#cccccc;
}
.r1{margin: 0px 5px;}
.r2{margin: 0px 3px;}
.r3{margin: 0px 2px;}
.r4{margin: 0px 1px; height: 2px;}
でもspanの中、入ってないよ。アウトじゃないの？
じゃーこれで。
欲しい感じの設定からHTMLとCSSを吐き出させる。
あとは、コピペ。
http://www.roundedcornr.com/
ＵＲＬを短縮させるサービス。
3.ｌｙ
世界最短のＵＲＬに変換してくれます。
他にもいくつか似たようなサービスはありますが
こちらはかなり正攻法でそれを追求した形になっており
精度は高いです。
ちなみに制作まんブログを変換すると
↓
http://3.ly/hk
かなり短いＵＲＬに変換することができます。
手打ちでも飛べます。
ネタとしてはおもしろいかも・・・
ＷＥＢ制作においてアイコン、ボタンなどは
作れるに越したことは無いけれど
いち早くページのイメージに合った素材を見つけることも必要です。
ＷＥＢ上でアイコンの色やサイズ、背景などをカスタマイズしてダウンロードできる
サイトを見つけました。
単色でもグラデーションを使用してあるので
安っぽくなく、使用できる場面はあるかも。
iconza
インラインフレーム<iframe>タグで新着情報などを表示するとき、
<iframe src="news.html" width="440" height="100">代替えテキスト</iframe>
などのように記述しますが、
このままだと枠線が出てしまいます。
情報量が多い場合はスクロールバーも出ます。
制作するページによってはデザインを崩すので、
そういったものを出したくない時がありますよね。
そんなときは、"frameborder" "scrolling"属性を使います。
<iframe src="news.html" height="100" width="440" frameborder="0">代替えテキスト</iframe>
これで枠線が消えます
<iframe src="news.html" height="100" width="440" frameborder="0" scrolling="no">代替えテキスト</iframe>
こうするとスクロールバーも消えます。
状況に応じて使い分けてみてください。
2009年6月5日、ヤフーは今年も「Yahoo! JAPAN インターネット クリエイティブアワード2009」を開催することを発表しました。
「Yahoo! JAPAN インターネット クリエイティブアワード」は、Web 上で革新的なクリエイティブ制作を行うクリエイターと、新しいインターネット広告の可能性を開拓した広告活動を顕彰することで、インターネットと広告のさらなる発展を目的に開催するもの。聞いているだけでワクワクします。
8月1日～8月17日までの期間中、一般の人が制作した作品を募る「一般の部」と、企業のプロモーションのために制作した作品を募る「企業の部」のそれぞれにおいて、バナー部門とウェブコンテンツ部門から作品を募集する。その後、審査員によるノミネート選考、サイト上でのノミネート発表、特別審査員も加わる審査員による最終審査会を経て、11月に贈賞式を行う予定です。
次々に新しい技術が発信されていき、各々の発想を交え、
革新的なものが世に公開されていきます。
個人の作品を分け隔てなく世の中に発表できる時代になりました。
新しいもの、追いかけていきたいです。
ホームページ制作のお手伝いにはちょっとなりにくいですが、
先日、息抜きになりそうなjavascriptを見つけました。
「HTML崩壊」です。
制作に行き詰っている方、気分転換したい方、etc、
お好きなHPで良いので、以下のソースをアドレスバーへ貼り付けてみてください。
javascript:(function(d,s){s=d.createElement('script');
s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp
/~kazumix/d/javascript/meltdown2.js?'+(new Date)
.getTime();s.charset='UTF-8';d.body.appendChild(s);})(document)
どうでしたか？
これはページを構成している要素が崩れ落ちていき、
また再生するというスクリプトです。
ちなみに「崩壊しっぱなし」もあるようです。
以下がそれです。
javascript:(function(){var s=document.createElement("script");
s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp
/~kazumix/d/javascript/meltdown/meltdown.js?
"+da.getTime(); document.body.appendChild(s)})();
こうしてみるとjavascript、
いろいろ可能性大だと改めて思います。
普段、Googleで、プレビューは、IEで、なので基本的にそれ以外のエンジンは使わないのですが、今日知りました。
Bing。
順位検索ツールで見てたら、今まではMSNサーチって書いてあったところにBing。
なんだ、それ？的に調べてみたら、何とMSNじゃありませんか。
いつのまに、ちょっとお洒落に？
いや、しかしちょっと待てよ。
この検索窓と周りの感じ、あなたひょっとしてGoogleじゃないですか、と言わんばかりのインターフェイス。
もしくは百度・・・。
Googleのインターフェイスは、各方面でかなり高い評価らしいけど・・・
検索エンジンインターフェイスの理想系はやっぱりここなんだろうか？
少し癖があるのですが、発想がよく
うまく使えれば便利そうなツールを見つけました。
psd2css OnlineはPSDファイルをCSSレイアウトのHTMLに変換してくれるというツールです。
肝心な部分としてはＰＳＤファイル内のレイヤーです。
このレイヤーを判別してＣＳＳのブロックにしているようです。
Photoshopなどでレイアウトを作成する方、一度試してみてもいいかもしれません。
ただ癖があるようなので（ＴＸＴ配置など）
使い方を習得するために多少時間はかかりそうです。
ホームページ制作におけるデザインとか、レイアウトとか。
数年前まではHTMLの「table」タグを使ったレイアウトが主流だったけれど、
現在では色やレイアウトは「CSS」で、サイトの構造は「XHTML」で記述する方式が主流となっている。
最近では、最新版のCSSである「CSS3」を一部のブラウザーがサポートし始めているようで、
CSS3の時代がもうすぐそこまで来ている...のかもしれない。
CSS3では具体的に何ができるかというと、
境界線の角を丸くしたり、テキストに影を付けたり、
透明度を設定して透かせたり、といったことが可能になるらしい。
モジュールを使い、「ボーダーに画像を直接使う」
などといったことも可能になるとか。
いままで諦めていたデザインも、CSS3で可能となるのかどうか。
巷では来年あたり勧告になるとの噂で、実装が楽しみでもあるところ。
webデザイン面においても、昨年あたりから米国などでは「グランジデザイン」
というものが流行り出しているらしい。
艶やかなボタン、３Ｄ、角丸、カラフルな反射光などのデザインがweb2.0の特徴などとも言われていたが、
それに対して、むらがあり、不規則で、ゆがんでいて、風合いのあるデザインが「グランジデザイン」と呼ばれているらしい。
「汚らしい」ではなく、「風合いのある」デザイン。これがポイントだとか。
これから流行るのか、そうでないかは不明。
定義もあいまいな感じであるが、web2.0からweb3.0と呼ばれる時代へ移行しつつあるのかも知れない。
ホームページ制作会社
