全200種類以上、シンプルなデザインがさまざまなウェブサイトにマッチするアイコン素材 -Freecns
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
あらかじめ設定したサイズにフィットするように複数の画像を配置するPhotoshopのエクステンションを紹介します。 Tych Panel [ad#ad-2] Tych Panelとは Tych Panelのインストール Tych Panelとは Tych Panelは写真などの画像のレイアウトを自動化するPhotoshopのエクステンションで、レイアウトの設定は事実上無限です。 下記のようなレイアウトも1クリックで簡単にできます。 Tych Panel -ギャラリー 背景色や角丸にも対応。 [ad#ad-2] Tych Panelの主な特徴 横・縦に画像を配置 高さ・幅のリサイズが可 スマートオブジェクト・レイヤーマスク対応 Adobe Bridge対応 背景色、ボーダー、角丸の設定可 Tych Panelのインストール インストールはちょっと面倒かもしれません。 ダウンロードしたファイル
デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ:幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
通常時は画像が配置されたパネルで、ホバー時には元画像に重ねて、半透明のアニメーションで情報を見せる「Dribbble」風のエフェクトを実装するスタイルシートを紹介します。 本家よりこっちの方がかっこいいかも。 Using CSS3 Animations to Build a Sleek Box UI [ad#ad-2] デモ 実装 デモ デモではCSS3に対応したブラウザ、Firefox4+, Chrome, Safari, Opera, IE9+でご覧ください。 ホバー時 実装 HTML パネルはdiv要素で実装し、画像やホバー時のコンテンツを内包します。 <div id="container"> <div class="boxxy"> <a href="http://dribbble.com/shots/489532-Banking-App" target="_blank" class
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」! HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します! まずは王道!縦に長い高級ペライチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く