[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser | コリス

2015/09/16 100 users レスポンシブ対応 ハンバーガーメニュー アイコン コリス 選択

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデ... 続きを読む

[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック | コリス

2014/11/10 188 users セクション スクリプト 実装 コリス 各セクション

フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装...記事の続きを読む 続きを読む

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス

2014/08/20 235 users パララックス コリス チュートリアル エフェクト CSS

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモはパララックスの構造を可視化できるので、より分かりやすいと思います。 Pure CSS parallax scrolling websites パララックスのデモ パララックスの実装 パララックスのデモ デモは非常にシ... 続きを読む

スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス

2014/05/29 141 users コリス jQuery ウェブページ スクリプト video要素

jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 Basic Fullscreen Video Background レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常に... 続きを読む

[CSS]スクリプト無し、レスポンシブ用のナビゲーションを表示するちょっと素敵な7種類のアニメーション | コリス

2014/01/28 138 users エフェクト Off Canvas HTML コリス 去年あたり

スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。 コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。 Pure CSS Responsive Nav HTML ベースとなるHTMLは、下記のようにシンプルです。 [html] One Two... 続きを読む

[CSS]スクリプト無し、スタイルシートで実装するパララックススクロール | コリス

2014/01/22 203 users コリス パララックス パララックススクロール CSS 一目

パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 Pure CSS Parallax Scrolling デモをスクロールすると、コンテンツと背景が異なるタイミングでスクロールされて表示されます。 背景が派手なので、効果も一目で分かりますねｗ スライド2では、左の2枚の画像も異なるタイミングで重なります。 実装方法を簡単... 続きを読む

[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス

2014/01/14 152 users アニメーションgif 切替 アニメーション スライド デモ

スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 Off Canvas Menu with Animated デモの動きをアニメーションgifにしてみました。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される... 続きを読む

[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through | コリス

2013/11/17 241 users 半透明 スライダー スクリプト GIFアニメーション コリス

画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 デモのアニメーション 上記のgifアニメーションは軽量化のためコマ数を落としていますが、実際の動作はもっと滑らかで気持ちいいです。 下記ページでお試しください。 radio click through スライダーの動... 続きを読む

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ | コリス

2013/06/13 134 users ナビゲーション アニメーション レスポンシブ対応 アイコン

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 エフェクトは、こんな感じです。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの... 続きを読む

IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal | コリス

2013/05/13 146 users コリス iOS モーダルウインドウ モダンブラウザ 配置

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のM... 続きを読む

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

2011/07/26 256 users コリス Alt Photos section要素 グリッド

ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt=... 続きを読む

[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート | コリス

2009/05/10 194 users コリス CSSplay table 半透明 Opera

スクリプト無しで、tableで配置したコンテンツをドロップダウン型のナビゲーションのパネルに表示するスタイルシートをCSSplayから紹介します。 Professional - drop down table menu demo パネルの透過処理は、IE6にも対応しています。 対応ブラウザは、IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google ... 続きを読む