IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa

30 Superb Photoshop Web Layout Tutorials | Top Design Magazine - Web Design and Digital Content プロレベルのWEBサイトレイアウト作成チュートリアル３０。 過去に紹介したものも含まれていますが、比較的新しいチュートリアルもあったのでご紹介。 次のような美しいレイアウトのチュートリアル集となっています。 学習資料なんかに活用させていただきましょう。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル 緑のすっきり綺麗なWEBレイアウト作成Photoshopチュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集８０

ウェブサイトを作成する場合に 「こんな事が出来たら良いなぁ・・・」 的な事って結構あるのだけれど、そういう悩みを解決してくれる なフリーソフトウェアを7つほど紹介してみる。 ▼ WinShot 非常に高機能な画面キャプチャーソフト。 キャプチャー範囲をドラック等で指定してのキャプチャーや、キャプチャーの定期実行等の機能がある。 キャプチャ後に任意のアプリケーションに直接渡し、そのまま編集して保存、と言った事も可能。 サイト用のキャプチャ画像の作成に便利。 ▼ Devas 特定のディレクトリ以下のファイルのテキスト検索するソフト。 複数行の検索や、正規表現での検索が可能で、検索結果から直接該当行を表示する事も出来る。 また、一括置換機能なども備えており、置換前に自動でバックアップしてくれる。 他者が組んだスクリプトなどを検索する場合にとても便利。 ▼ Charu3 入力支援ソフト。 定型文を

30 Best Wordpress E-Commerce Themes - tripwire magazine オシャレなECサイト構築用のWordPressテーマ３０。 次のように、WordPressで作ったか分からないぐらいにカスタマイズされたテーマ集が３０個公開されています。 更にプラグインや、ビルトインの機能を使ってショッピングカートの仕組みも内蔵されているので、ECサイト構築用にも使うことが出来そうです。 使い慣れたCMSをECサイトにそのまま使うことでラーニングコストが最小化できそうですね。こまわりが効くかどうかなど検証は必要だと思いますが。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」 カートが目立たず、いい感じにスライドしてくれるショッピン

地震の災害の最中ですし、僕も東京住まい でそれなりの被害がありますが、関東以外 の方は普通にお仕事をされてると思います。 地震の情報は多数存在しますし、僕が変に 介入しすぎても混乱を招きかねないので 本日より通常更新に戻ります。が、停電を 含め、地震の弊害次第では更新が止まる かも知れ無いことをご了承下さい。 さて、今日はちょっと便利そうなWordPressのプラグインがあったのでシェア。有りそうでなかったプラグインです。 WordPressは、画像をアップロードし、その画像を投稿に含める際にサイズを選べるんですが、そのサイズがデフォルトでは限られています。このサイズの種類を増やせるプラグインがAdditional image sizesです。 上記のように、デフォルトの4つのサイズ以外に3つ増えています。試してはいませんが、いくらでも増やせそうですよ。 設定 プラグインを有効化すると、「

ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの

コンテンツ生成用に画像をなるべく使用せずに、より多くのブラウザ対応を考慮した、画像を使用しないでイメージを作成するスタイルシートを紹介します。 CSS Generated Content [ad#ad-2] 小さい三角 キャラクター アロー トリッキーシャドウ 下記の対応ブラウザは、IE8+, Fx3+, Chrome4+, Safari4+ です。 各コードは主要箇所のみの抜粋です。 小さい三角 「New」の右上に添えてある小さい三角をCSSで実装します。

CSS3で実装されたボタンのサンプルやチュートリアル総まとめ。 当サイトでは色々とCSS3ボタンのエントリを紹介してきていますが、ここら辺でちょっとまとめてみました。 画像つくるのはめんどうだしCSS3でやっちゃおうという場合に参考にしてみて下さい。 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル iPhone風のボタン実装 ステップで学べるCSS3ボタンのデザインチュートリアル CSS3ボタンのデザインチュートリアル 綺麗にデザインされたCSS3ボタンのまとめ カラフルで美しいCSS3ボタン これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 デザインは微妙かもしれませんが、カーソルを合わせると背景が動くあたりテクニックとして覚えておくとよさそう CSS3だけで実現するクリックすると色の変わるボタン実装 クリックで色が変わります。

このブログでNo,1のアクセス数を誇っている『絶対にインストールしたいWordPressプラグイン30個！』の記事ですが、今でも凄いアクセスを頂いています。 そして、そのアクセスを見るたびに思うのです。申し訳ない…と。 ブログを移転したり色々やっていたので正確な日にちは判らないですが、あの記事を書いたのはもう一年以上前だった気がします。今ではもう使ってないプラグインやもっと良いものが沢山あるんです。 というわけで、2011年にもなったことですし2011年版のオススメWordPressプラグインを一挙にご紹介したいと思います！その数も増えて何と30個から45個へグレードアップ！記事もなるべく読みやすくしたつもりです。 どれもこれもWordPressユーザーならかなりオススメのものですので参考にして頂ければ幸いです！ それでは、少し長いので「続きから」どうぞ～！ WordPress

みなさんも仕事の効率化、時間短縮のためにしていることってありますよね？ 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。 私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X( できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間

ユーザーにより多くクリックされる効果的なボタンにするには、どのように手をいれたらよいのかをステップごとに紹介します。