[B! *webデザイン] atsamのブックマーク

JavaScriptで飛び出すWebページへ！

「解像度が低く画面領域が狭いPCでも見やすくページを表示させたい」「すっきりとしたレイアウトに見せたい」――そうした、Webページのコンテンツの表示／非表示を切り替えたいことがある。そんなときには、やはりJavaScriptを使うのが便利。上下・左右にコンテンツを折りたためるようにするJavaScriptライブラリはいくつもあるが、今回はちょっと変わった楽しい演出で表示を切り替えてくれるライブラリを紹介しよう。それが「jQuery pageSlide」だ。 jQuery pageSlideは、jQueryのプラグインとして動作するオープンソース（MITライセンス）のJavaScriptライブラリ。このpageSlideをWebページに組み込むと、特定のリンクをクリックするだけで右側から別のコンテンツがスルッとスライドで飛び出してくるようになる。そのまま左側の領域をクリックすると、今度は左か

atsam 2009/01/20

リンク

これは便利だ！Excel→Table化するjQueryプラグイン

Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.

atsam 2009/01/20

リンク

Web2.0デザインジェネレーターいろいろ-２００８年８月:phpspot開発日誌

Web 2.0 Design Generators For Developers | 84 Bytes here is a handy list of online tools to help you save time and effort creating nice graphics for your sites or apps. Web2.0デザインジェネレーターいろいろまとまっていました。過去にいろいろとこうしたツール系は書いてきましたが、まだ知らないものもありました。ボタン As Button Generator Buttonator.com My Cool Button ローディング画像 AJAXload.info AJAX loading Gif generator バッジ Web 2.0 Badges Fresh Badge リボン QuickRibbon Websit

atsam 2008/12/22

リンク

プロレベルのサイト作成時に使える実用Photoshopチュートリアル集:phpspot開発日誌

25 Photoshop Tutorials for Web Designers - Six Revisions プロレベルのサイト作成時に使える実用Photoshopチュートリアル集。ページ全体だけではなく、ヘッダーやナビゲーション等、パーツによって個別に別れているので使いやすそうです。テンプレート作成のチュートリアル Photoshop Paper Texture from Scratch How to Create a Grunge Web Design Design an Awesome Band Website Template ナビゲーション作成のチュートリアル Design Watercolor Effect Menu Glossy-Style Carbon Fibre Navigation Buttons CSS Menu With Icons サイトヘッダー作成のチュ

atsam 2008/12/22

リンク

押さえておくべき20のAjax効果を体験できるサイト | 教えて君.net

Ajax（エイジャックス、アジャックス）は、ウェブページをリロードをしなくても、サーバとデータのやり取りを行なって処理を進めていく対話型ウェブアプリケーションの実装形態だ。画面遷移を伴わないため、ユーザーは、サーバの存在を感じることなくウェブアプリケーションを利用できる。「NETTUTS」では、20のAjax効果を体験できるページを公開している。すべてではないが、ほとんどのソースを体験することができるので、ウェブ開発者は要チェックだ。公開されているサンプルコードは、 Ajaxを利用したメッセンジャー「Ajax IM」、リアルタイムで値チェックを行う「LiveValidation」、ダブルクリックで編集可能にできる「Inline Editing」、クリックする場所を測定するアクセス解析「ClickHeat」などなど。「DEMO」ボタンを押すことで体験することができる。なお、「SR

atsam 2008/10/07

リンク

ロゴデザインに役立つPhotoshopのカスタムシェイプ (1/2)

フリーのCSS/HTMLテンプレートやジェネレーターを活用するとカッコいいWebサイトは簡単に出来上がる。Webサイトのロゴジェネレーターもあるが、サイトの看板となるロゴだけは気合を入れて作りたい。だが、どうも文字を並べただけではしっくりこない――。そんなときにオススメなのが、Photoshopのカスタムシェイプを活用する方法だ。先日紹介したブラシ（関連記事）と同様に、ネット上にはさまざまなカスタムシェイプが配布されている。今回はロゴのデザインに手軽に使えそうなカスタムシェイプをいくつかピックアップしてみた。「Speech Balloon Shapes」