タグ 各パネル
人気順 5 users 10 users 100 users 500 users 1000 users注目度アップ!画面を二分割するWebサイトの制作ポイントまとめ(参考テンプレート付) - PhotoshopVIP
画面を縦半分に二分割した「スプリット・スクリーン(英: Split Screen)」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「 ひとつの画面に2つのメッセージ 」というシンプルなルールだけです。 各パネルには写真イメージや文字テキスト、イラストなど異なるさまざまな要素を配置できるのが特長のレイアウトです。 シンプルとなってきているグラフィックの デザイントレンド に比べ、... 続きを読む
高さの異なるパネルを揃え、汎用性に優れたグリッドが簡単に使えるシンプルなフレームワーク -FlexGRID | コリス
CSSハックもJavaScriptも使用せずに、中身のテキストや画像の高さがバラバラでも各パネルの高さを同じにする、モバイルファーストのシンプルなグリッドシステムを紹介します。 非常にシンプルなグリッドなので、さまざまなプロジェクトに利用できると思います。 FlexGRID FlexGridは文字通り、柔軟なグリッドを提供するもので、非常にシンプルなHTMLと軽量のCSSで構成されています。 基本... 続きを読む
[CSS]パネルをCSS3アニメーションでスライドや回転や拡大させたりするチュートリアル | コリス
画像とテキストを配置した2枚のパネルを切り替える時に、CSS3アニメーションでふわりと入れ替えたり、しゃっとスライドしたり、くるっと回転したり、拡大させたりするチュートリアルを紹介します。 CSS animated profile cards 実装とデモ アニメーションは4種類あり、まずは共通のHTML/CSSから。 HTML 各パネルはリスト要素で実装し、デフォルトの画像のパネルはimg要素、切... 続きを読む
[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS | コリス
デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直:下方向 垂直:上方向 水平:右方向 水平:左方向 垂直:下方向:半回転 斜め 見えない人用に、デモをアニメーションGIFでどうぞ。 続きを読む
[CSS]JavaScriptを使わずに、Pinterest風レイアウトにするスタイルシートのテクニック | コリス
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ:幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns... 続きを読む
[JS]普通のとはちょっと違う、オーバーレイのスライド方法が面白いホバーエフェクト | コリス
画像を配置したパネルをホバーすると、各アイテムをまたいでオーバーレイのパネルがスライドするエフェクトを紹介します。 デモ:Inverse 反対の面からスライドするデモです。 実装 HTML 各パネルは画像のimg要素とオーバーレイのdiv要素が一組になっており、リスト要素で実装します。 <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http... 続きを読む
[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む
[JS]リストで実装したアイテムにページ機能をつけるスクリプト -Ono List Pager | コリス
リスト要素で実装したアイテムをアニメーションでスライドするさまざまなインターフェイスのページ機能付きパネルにするjQueryのプラグインを紹介します。 最もベーシックなデモです。 パネルがアニメーションでスライドし、キーボードの矢印キーの操作にも対応しています。 HTML 各パネルはシンプルなリスト要素で実装されています。 ... 続きを読む
[CSS]スタイルシートだけで実装されたスライドショー -Pure CSS Slideshow | コリス
CSS3を使って実装された、スライドのアニメーションや各パネルのダイレクトリンク機能を備えたスライドショーを紹介します。スタイルシートだけで実装されたスライドショーはアニメーションでスライドするので、CSS3 transitionに対応したChrome, Safariでお楽しみください。 Firefox 4などの非対応ブラウザでは、アニメーション無しでスライドされます。また、各パネルへのリンクは#... 続きを読む
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む