CSSによる微調整、フォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位などを確認しながら変更できる無料ツール -shaper | コリス

2021/09/06 18 users ボーダー UI要素 Shaper コリス 角丸

WebページのUI要素に適用したフォントのベースサイズ、レスポンシブ用の増減、スペースの基本単位、マージン・パディングの量、カラー、ボタンの形、ボーダーのサイズ、ボーダーの角丸など、表示を確認しながらスタイルの値を調整できるオンラインツールを紹介します。 shaper shaper -GitHub shaperの特徴 shaperの使い... 続きを読む

最近の実装に合わせた最新版HTMLテンプレート、基本構造に使用するすべての要素とその役割も解説 | コリス

2021/04/27 783 users コリス プログレッシブエンハンスメント preload 実装

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごと... 続きを読む

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

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

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

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

2018/08/28 230 users CSSハック レスポンシブ対応 コリス 実装方法 CSS

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create resp... 続きを読む

こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype | コリス

2018/02/28 172 users line-height Archetype コリス 見出し

文字の指定をいろいろ調整できる無料ツールは他にもありますが、ようやく日本語フォントに対応したものがリリースされていたので、紹介します。 文字のサイズやline-heightをはじめ、見出しレベルによるサイズの拡大率など、 ...記事の続きを読む 続きを読む

レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy | コリス

2017/05/08 154 users iPhone コリス レスポンシブ 後発 Nexus

iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応して... 続きを読む

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法 | コリス

2017/02/23 224 users ワイドスクリーン タブレット コリス 傾向 スクリーンサイズ

スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。... 続きを読む

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス

2016/03/17 412 users コリス Bootstrap Flexbox class 単位

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む

スマホ・タブレットをはじめ、27インチの大モニタまで！ページの見え方をさくっと確認できるレスポンシブ用の便利ツール -Responsive View | コリス

2016/02/10 70 users モックアップ コリス デバイス 縦向き デバイスごと

スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方をさくっと確認できる便利なオンラインサービスを紹介します。 デバイスごとのモックアップにも使えるレベルですよ！ Re ...記事の続きを読む 続きを読む

[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS | コリス

2015/11/30 138 users コリス フォーカスエリア スクリプト 配置 主題

レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。 Re...記事の続きを読む 続きを読む

レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ | コリス

2015/03/30 413 users コリス GitHub BOD Body class

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bod... 続きを読む

商用にも無料で使える！レスポンシブ用の200種類以上のコンポーネントが収録されたPSD素材 -Sally Blocks | コリス

2014/06/10 83 users エレメント コリス フォーマット 各エレメント コンポーネント

200種類以上のコンポーネントに、さまざまなエレメントやブロック、スタイルが収録された、レスポンシブ用にデザインされたPSD素材を紹介します。 Sally Blocks PSD素材には、レスポンシブ用のさまざまなエレメント、コンポーネント、スタイルが収録されています。 各エレメントはベクターなのでサイズやカラー変更、テキストの変更なども簡単におこなえます。 ダウンロードできるファイルのフォーマット... 続きを読む

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ | コリス

2014/04/25 540 users div コリス エレメント font-size指定 ボーダー

CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく... 続きを読む

レスポンシブサイト用レイアウトフレームワーク「Grid」:phpspot開発日誌

2014/02/27 15 users Grid Bootstrap phpspot開発日誌 CSS

レスポンシブサイト用レイアウトフレームワーク「Grid」 2014年02月27日- Grid レスポンシブレイアウトフレームワーク「Grid」 Bootstrapにもレイアウトフレームワークがついていますが、こちらもモバイルファーストなレスポンシブ用のレイアウトフレームワーク レイアウト以外にもノーマライズ用のCSSがついていてモバイル端末間の差異を減らすようになっています クラス名がBootst... 続きを読む

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

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

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

[JS]ぷるぷるっとかわいいアニメーションでレイアウトを変更するレスポンシブ用のスクリプト -DyLay | コリス

2013/04/14 168 users jQuery easing コリス jquery.js ソート

ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 DyLay! V2 DyLay -GitHub DyLayのデモ DyLayの使い方 DyLayのデモ デモはフィルタとソートでレイアウトを変更します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.... 続きを読む

これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes | コリス

2013/03/17 99 users ワイヤーフレーム コリス レスポンシブ エレメント 一元

ブラウザ上で、さまざまなスクリーンの幅に合わせたレスポンシブ用のワイヤーフレームを作成できるオープンソースのオンラインツールを紹介します。 RWD Wireframes RWD Wireframes -GitHub 使い方の前に、レスポンシブに対応している一番の売りから。 RWD Wireframesはレスポンシブ用のワイヤーフレームということで、配置した各エレメントをさまざまなデバイス用にサイズ... 続きを読む

レスポンシブ用に3案必要？ クライアントとロス無く進める便利ツール -Style Tiles | コリス

2013/01/31 74 users コリス モックアップ エレメント フォント クライアント

Style Tilesはウェブサイトを制作する際、そのブランドの本質を伝えるフォント、カラー、エレメントなどをクライアントと打ち合わせをして、ビジュアルのコンセプトを決めるツールです。 レスポンシブデザイン用に3つのモックアップが必要ですか？　このツールを利用することでそういったことはなくなります。 Style Tiles 下記は各ポイントを意訳したものです。 Style Tilesとは Styl... 続きを読む

[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック | コリス

2012/12/05 149 users レスポンシブ コリス クロップ 実装 CSS

デスクトップでは通常のサイズ、タブレットでは縮小サイズ、スマフォではクロップして画像を表示させるスタイルシートのテクニックを紹介します。 Focal Point: Intelligent Cropping of Responsive Images デモ 実装 デモ デモは表示サイズで、画像のサイズや表示領域が変化します。 デモページ：幅1,200pxで表示 レスポンシブの対応は2種類用意されており... 続きを読む