JavaScriptの最近のブログ記事

2008.09.07.01:20
  1. HOME
  2. CSS
  3. Design
  4. Flash
  5. HTML
  6. JavaScript

GRIDGRID53　グリッドフォーマットとWEBデザイン

そもそもWEB本来の機能として、こういったグリッドデザインしかできないっていう事から、いろいろとデザイナーやコーダーは考えながらデザインを起こすわけです。

最近でいう所のCSSコーディングやら、見出しがどうやらとかいろいろと現場やらメディアで騒がれているわけですが、部分部分の小技を教えられてもどうしようもない。

僕自身もWEBデザインに関わって、２年ほどでしかないが、もともとグラフィックの学校を出てたりするために、結構こういう事を考えるわけです。

かなり、中途半端ですが、グリッドのフォーマットを考えてみました。
最近の画面サイズの変更に伴い、ぎりぎりの領域で作成

・横幅980px
・メインビジュアルは、9分割法で作成
⇒それに伴ったページ内レイアウトと応用


自分の中でしかないのかもしれませんが、
こうやってシステム化していくにすればするほど、自由な表現と基本的な考え方（文字の読みやすさとか余白の考え方）を理解できますね。ホントに。

これが出来たら、コーディングのフォーマットやワイヤーフレームのフォーマット、fireworksのテンプレート、FLASHのテンプレートも作って一気に合理化デザインの出来上がりです。
あとはIAのやりかたやそもそも企画の内容って事になるわけなんでしょうね。
結局コンテンツだって事を証明したい。

http://show-hey.com/download/gridgrig53.png


show-hey
(2008年9月 7日 13:20) | CSS,Design,Flash,HTML,JavaScript | | コメント(0) | トラックバック(0)
2008.04.03.08:00
  1. HOME
  2. Flash
  3. JavaScript
  4. コネタ

スライドショーを小技と共にまとめてみる。

webでスライドショーと言って「写真ばっかり見せてどうすんの？」と思われる方がいるかもしれないが、考え方によっては、いろんな事に使える。 ある意味それだけで完結してしまう。

個人的にも今まで作ったものをまとめようと、そういったスライドショー関連のものを探していたので、今仕事で使っているものも含め、気になったものをいろいろレヴューしてみた。

情報参照元
新しいWebビジネスや技術アイデアを活性化するWebマガジン - youmos
http://youmos.com/

Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
http://www.goodpic.com/mt/archives2/2007/03/lightboxjs.html

432 + JavaScript Libraries : skuare.net
http://www.skuare.net/test/index.html


スライドショーを小技と共にまとめてみる。の続きを読む

show-hey
(2008年4月 3日 20:00) | Flash,JavaScript,コネタ | | コメント(2) | トラックバック(0)
2008.03.31.12:29
  1. HOME
  2. JavaScript

リンク先にアイコンをつけてみよう。多少ブラッシュアップver

仕事柄アイコンをつけてくださいとか、もの凄く細かいレベルでの修正を頼まれたりする事がごく稀にあります。css2のattributeで指定できるのは知っていましたが、
IE6で対応していないので実用性がない。

そこで、jsにてカスタマイズしている方はいないかとググる。
さすが、ネットの世界。すばらしい方がいました。

aguuu ? Blog Archive ? リンクにアイコンを追加してくれる、 Iconizeを属性セレクタが使用できないIE6用にカスタマイズしてみる
http://www.aguuu.com/archives/2007/11/iconizetextlinkswithcsscustomer/

ただし、個人的にbody onload=の形式はhtmlも書き換えなければならないので好きではない。といった所でjavascriptをハッタリで書いている私ですが、知らないなりにカスタマイズしてみました。

http://www.show-hey.com/tools/iconize_cus/

ダウンロードはこちら
http://www.show-hey.com/tools/iconize_cus/iconize_custom.zip

※どうやらこの方法を使うと、aタグにclassを指定していると全て書き換わってしまうみたいです。使用は個人責任でお願いいたします。


【元ネタ】
aguuu ? Blog Archive ? リンクにアイコンを追加してくれる、 Iconizeを属性セレクタが使用できないIE6用にカスタマイズしてみる
http://www.aguuu.com/archives/2007/11/iconizetextlinkswithcsscustomer/

window.onload と <body onLoad> の違い
http://www5d.biglobe.ne.jp/~y0ka/2006-12-07-1.html
show-hey
(2008年3月31日 00:29) | JavaScript | | コメント(0) | トラックバック(0)
2007.12.07.11:17
  1. HOME
  2. JavaScript

もっと見やすい表組みをつくる

表題の通りですが、見やすい表組みはどのように表現可能かを考えてみた。

まずはjsを使った場合
1.ソートできる
sorttable: Make all your tables sortable
http://kryogenix.org/code/browser/sorttable/

2.ハイライトされる
Welcome to Tablecloth
http://cssglobe.com/lab/tablecloth/
▲cssでデザインを変更可能。ハイライトの設定はtablecloth.js内11行目あたりで設定可能

show-hey
(2007年12月 7日 23:17) | JavaScript | | コメント(0) | トラックバック(0)
2007.10.07.05:44
  1. HOME
  2. JavaScript

ニュースをもっとコンパクトに表示

もの凄くマニアックな趣向ですが、
最近アップルのニュースの部分がもの凄く洗練されているなと
感じます。

アップル
http://www.apple.com/jp/

アップルはフェードで表示されますが、
そこまで器用なことは僕にはできないので、
aScrollerというものをつかって
ニュースティッカーを作成してみました。

news ticker with
http://www.show-hey.com/demo/newsticker/

※コンパクトでいいですね…。

参照元
argilla: aScroller
http://digitalhymn.com/argilla/ascroller/

追記

近いものを見つけました。

早速デモを作成
crossfader script DEMO
http://www.show-hey.com/demo/newsticker2/

【参照先】
Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New
http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html

show-hey
(2007年10月 7日 17:44) | JavaScript | | コメント(0) | トラックバック(0)
« < | 1 | 2 | 3 | > »
« HTML | メインページ | アーカイブ | Motion Graphic »

DOWNLOAD

アーカイブ

最近のコメント

最近のブログ記事

このブログを購読
[フィードとは]