Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i

※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit（ギット）っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い

Here we have presented some amazing and impressive CSS3 and HTML5 experiments for you. Though, they are amazing but unfortunately are still at the state of being called ‘Experiments’, mainly because most of them are not supported by all the browsers. Therefore, we will recommend you that you see these CSS3 and HTML5 experiments either in Safari or Chrome. However, few of them work well in Mozilla

IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi

WordPressで一般的なよくあるブログを作成する際、記事のフォーマットはひとつで、そのフォーマットで記事を投稿していく場合が多いと思います。しかし、ビジネスサイトの作成では掲載にする内容によって見せ方が変わりますので、複数のレイアウトのフォーマットが必要になってきます。そこで、通常の静的なHTMLでサイトを作るように、サイト全体の構造をしっかりと把握できるサイトマップや、それぞれのページのURLを管理できるようにして、WordPressのサイト構築をしていくとわかりやすくなります。 解説：（有）ムーニーワークス　ハヤシユタカ 今回作成したサンプルサイトでは、サイトの更新情報として「ニュース」という分類の中に「お知らせ」と「セミナー情報」というサブカテゴリーを作り、製品紹介をする「製品情報」として「製品A～D」というカテゴリーを設けました。 これにより、カテゴリー自体の増える可能性を持ち

ラジオボタンを使った画像ギャラリーを作りましたので紹介してみます。かなり変わった使い方ですが、CSSの勉強にもなると思いますのでぜひ。 今回は古いブラウザ（IE７，８）でもそれなりに対応できるようにしましたので、そこそこ実用的だと思います。 別サーバーにサンプルを用意していますので動作確認していただければと思います。 HTML ではまず外部ファイルの読み込みから。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="js/selectivizr.js"></script> <![endif

よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire

WEBデザイン時の参考にするのにサイトデザインのキャプチャをまとめたギャラリーサイト。その界隈の方が定期的にまとめ記事書いてますが2012年9月版ということでリンク切れチェック等兼ねて改めてまとめてみました。ちょっと数が多いので PC向けデザイン【36サイト】 モバイルデバイス向けデザイン【14サイト】 パーツごとのデザイン【7サイト】 ということでざっくり区分してみました（クリックで各項目へジャンプ）。 それぞれのサイトについての説明は省きますがサイトのジャンルやテーマ、色調などで検索できるところが多いので「なんとなくボンヤリしたイメージは出来てるんだけどもうちょっと」というときに参考にするといいと思います。 PC向けデザイン 一般的なPC向けWEBページのデザインギャラリーサイトです。 1.ズロック 2.ウェブセレクション 3.WEBデザインの見本帳 4.イケサイ 5.bookma!{

第1回 次世代Web標準「HTML5」は今、どこまで使えるレベルにあるのか？：なぜ今、HTML5なのか――モバイルビジネスに与えるインパクトを読み解く（1/2 ページ） 高度で多彩な情報処理機能を備えた、最新鋭のWeb技術「HTML5」がじわりとIT業界に浸透してきた。例えば米Microsoftが先頃プレビューを開始した次世代「Office Web Apps」。これは同社のフラグシップ製品である統合文書ソフト「Office」のWebアプリ版（クラウド版）であり、Internet Explorer（IE）やChrome、Firefoxなど主要Webブラウザからオンラインで利用できる。 これまでのWebアプリ版は、その原型となるネイティブ・アプリ版Officeに比べ、かなり見劣りのするものだったが、今回リリースされた次世代Office Web Appsは、初期メニューからネイティブ・アプリ版と