CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方 | コリス

2018/09/14 173 users コリス CSS スクロール スナップ 位置

CSSのscroll-snapプロパティを使用すると、縦長ページなどでスクロールをしてコンテンツの中途半端な位置で終了しても、ちょうどよい位置にぴたっとスナップさせることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 P... 続きを読む

【知ってた？ Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法（拡張機能も不要！） | Chrome | できるネット

2018/08/12 337 users Chrome スクショ スクリーンショット ブラウザー ネット

拡張機能を使わずに縦長ページのスクショが取れる！ Webページのスクリーンショット（画面キャプチャー、スクショ）を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー... 続きを読む

これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges | コリス

2016/12/12 125 users コリス Mixin レスポンシブ対応 テクニック Sass

縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。 Angled Ed ...記事の続きを読む 続きを読む

商用利用無料、最近のUIデザインが分かるレスポンシブ対応の高品質なHTMLのテンプレートのまとめ | コリス

2016/11/24 146 users コリス Editorial テンプレート レスポンシブ対応

今時のかっこいいデザイン、素敵なエフェクトを備えたレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、HTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、レスポンシブ時のレイアウトのバリエーション、使い勝手のよいコンポーネント、気持ちいい繊細なアニメーションなど勉強にもなります。 Editorial デモページ 文字を見せることに... 続きを読む

Bootstrapで作るランディングページ・小規模サイトに、商用無料でバックリンク不要で利用できるテンプレート集 -Designstub | コリス

2015/12/16 171 users コリス Bootstrap メールア ランディングページ

ランディングページ向けの縦長ページ、スモールビジネス向けの複数ページ、すべてがミニマルに美しくデザインされたレスポンシブ対応のBootstrapのテンプレートを紹介します。 テンプレートの良さはデザインだけではありません。いくつかダウンロードしてコードを見たところ、クリーンなHTMLでコメントもしっかりしているので、カスタマイズ性にも優れています。 Designstub ダウンロードには、メールア... 続きを読む

[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ | コリス

2015/11/25 282 users コリス jQuery スクリプト エフェクト プロダクト

縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さ ...記事の続きを読む 続きを読む

Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ | コリス

2015/11/20 184 users コリス リソー グリッド レイアウト インフォグラフィック

最近のWebサイトで見かけるさまざまなレイアウト、レスポンシブ対応のレイアウトの構成、縦長ページ・横長ページでグリッドの効果的な使い方、ランディングページの要素の配置など、デザインの勉強になるインフォグラフィック・リソー...記事の続きを読む 続きを読む

[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス

2015/11/19 163 users エフェクト スクロール スクリプト しん ポジション

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシン...記事の続きを読む 続きを読む

商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ | コリス

2015/10/22 324 users コリス Bootstrap スクロールエフェクト 背景 ベース

最近のWebページで人気のある縦長ページ、CSS3アニメーション、スクロールエフェクト、大きい写真画像を使った背景、カードコンポーネントなど、UIデザインのトレンドを取り入れたBootstrapのテーマを紹介します。 B...記事の続きを読む 続きを読む

商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ | コリス

2015/09/11 292 users ポートフォリオ かっこいいエフェクト ランディングページ

今時の繊細でかっこいいエフェクトを備え、美しくデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介...記事の続きを読む 続きを読む

無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2015/05/15 547 users ポートフォリオ かっこいいエフェクト ランディングページ

レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHT...記事の続きを読む 続きを読む

Bootstrapでかっこいい縦長ページを作りたい人にオススメ！完成形から制作用のファイルまで全部揃ったテンプレート -Forkio | コリス

2015/03/16 117 users BOOTS コリス Bootstrap スクロール 固定ヘッダ

固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Boots...記事の続きを読む 続きを読む

2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle | コリス

2014/12/15 169 users Beetle コリス ポートフォリオ かっこいいエフェクト

レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクト... 続きを読む

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

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

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

商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス

2014/11/05 576 users コリス Bootstrap スクロールエフェクト 商用 ベース

Webデザインの最近のトレンド、縦長ページ、スクロールエフェクト、CSS3アニメーション、フラットスタイルなどを取り入れたBootstrapのテンプレートを紹介します。 Bootstrapは先週3.3.0がリリースされ、...記事の続きを読む 続きを読む

[CSS]背景を固定させ、カーテンをあげるようにコンテンツを次々にスクロールで表示させるテクニック | コリス

2014/07/14 226 users コリス スクロールエフェクト スクリプト 実装 CSS

ブラウザの高さいっぱいに表示した写真画像とベタ塗り背景のコンテンツを交互に配置した縦長ページをスクロールした際、写真画像の背景を固定表示させ、カーテンをあげるようなスクロールエフェクトを実装するスタイルシートのテクニックを紹介します。 スクリプト無しなのでスクロールのもっさり感がなく、非常にさくさく動作します。 Alternate Fixed & Scroll Backgrounds デモ 実装 ... 続きを読む

[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify | コリス

2014/06/16 188 users jQuery コリス section要素 div要素 デス

section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 Scrollify Scrollify -GitHub Scrollifyのデモ Scrollifyの使い方 Scrollifyのデモ デモはデス... 続きを読む

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌

2012/02/12 128 users jQueryプラグイン phpspot開発日誌 カーテン

スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 2012年02月13日- Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下の... 続きを読む