CSS メディアクエリのチートシート、デスクトップ・タブレット・スマホ、主要デバイスごとのメディアクエリ | コリス

2021/02/08 17 users CSS タブレット コリス ベース デスクトップ

WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、デスクトップ、タブレット、スマホの各デバイスごとのメディアクエリ、主要デバイス用のメディアクエリのチートシートをまとめたので紹介します。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024,... 続きを読む

ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io | コリス

2020/05/20 18 users ファビコン コリス テキスト 各デバイス 絵文字

数回 or 1クリックするだけで、デスクトップ・タブレット・スマホに適した複数サイズのファビコンを簡単に生成できる無料オンラインツールを紹介します。 ファビコンは、テキスト・画像・絵文字から簡単に生成でき、日本語や自分の...記事の続きを読む 続きを読む

タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider | コリス

2019/07/17 35 users バニラJS ライブラリ コリス 単体 HTML

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -G... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js | コリス

2018/07/23 57 users コリス ドロワー スクリプト 実装 ハンバーガーメニュー

Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また...記事の続きを読む 続きを読む

実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters | コリス

2018/06/22 175 users React コリス スクロール スクリプト 実装

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJ... 続きを読む

[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes | コリス

2013/11/19 21 users コリス ブッダ 脚注 jQuery スクリプト

デスクトップ時はすぐ横に、タブレットではすぐ下に、スマフォではフッタにまとめて脚注を表示するjQueryのプラグインを紹介します。 sidenotes sidenotes- GitHub sidenotesのデモ sidenotesの使い方 sidenotesのデモ デモでは脚注が、デスクトップ、タブレット、スマフォなど表示サイズに合わせて最適に表示されます。 デモページ：幅1,200pxで表示 ... 続きを読む

肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten | コリス

2013/02/06 76 users コリス パララックス フレームワーク パララックススクロール

ベータ版ですが、ちょっと面白そうなシンプルなフレームワークがリリースされていたので紹介します。肉球に惹かれたわけではないですよ。 Cool Kitten Cool Kitten -GitHub Cool Kittenはデスクトップ・タブレット・スマートフォンなど、レスポンシブ対応のパララックススクロールのエフェクトを備えたフレームワークです。 スクロールすると、肉球がパララックス！ 肉球 もちろん... 続きを読む

レスポンシブ対応で柔軟性に富んだグリッドを使いたいならこのフレームワーク -Extra Strength Responsive Grids | コリス

2013/02/05 81 users 可変グリッド づら コリス レイアウト 各エレメント

デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応で柔軟性に富んだ可変グリッドのレイアウトをつくるのに便利なフレームワークを紹介します。 各エレメントのツラや高さの異なるパネルも簡単に揃えることができます。 Extra Strength Responsive Grids Extra Strength Responsive Grids -GitHub Extra Strength Res... 続きを読む

一歩先に進むためのレスポンシブデザインのガイドライン | コリス

2013/01/30 156 users ウェブサイト UIデザイン クロスデバイス対応 デスクトップ

ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレッ... 続きを読む

デスクトップ・タブレット・スマフォなど、さまざまな環境で同時に同じページを表示できるオンラインサービス -Framote | コリス

2012/12/17 81 users デバイス タブレット 遠隔地 ノートブック コリス

デスクトップやノートブック、タブレット、スマートフォンなどの異なるデバイス、OS、ブラウザで、自動で次々に同じページを表示し、制作ページの表示確認できるオンラインサービスを紹介します。 遠隔地など異なる場所でも利用できます。 Framote Framoteの仕組みは同じページを表示するURLを発行し、各デバイスは一度そのURLにアクセスするだけで、後はコントロール側が表示ページを変更すると、各デバ... 続きを読む

デスクトップ・タブレット・スマフォなど、最近のデバイスが全て揃ってる手書き用のモックアップのPDF素材 -INTERFACE SKETCH | コリス

2012/10/09 89 users コリス モックアップ デバイス スマフォ 全て

デスクトップ・タブレット・スマフォなど、最近のデバイスが全て揃ってる手書き用のモックアップのPDF素材 -INTERFACE SKETCH 続きを読む