サイト構築 -実装
[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート
Post on:2019年2月18日
フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, Pos […]
Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar
Post on:2019年2月14日
サーバーサイドのバリデーションを自動的に表示するようにVue.jsで実装されたフォームのコンポーネントを紹介します。 ベーシックなフォームをはじめ、ファイルアップロード、ドロップゾーンなど、最近よく利用されるフォームのコ […]
CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
Post on:2019年2月13日
最近、CSSのリセットを見直す動きが少しずつあるようです。 2018年おすすめのCSSリセット！「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセッ […]
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
Post on:2019年2月12日
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外 […]
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers
Post on:2019年2月6日
プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。 コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざま […]
Web制作に役立つ、Chrome 72 デベロッパーツールの新機能のまとめ
Post on:2019年2月5日
先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72)
色の組み合わせ方の参考にいい！Webサイトやスマホアプリに適したカラーパレットを生成する無料ツール -Color
Post on:2019年2月4日
指定したカラー、画像、Webページなどをベースに、カラーパレットを生成し、カスタマイズできる無料のオンラインツールを紹介します。 カラーパレットは、Webサイトやスマホアプリに特化されており、コンテンツに使用されるさまざ […]
商用でも完全無料！Webサイトやスマホアプリをプレゼンで魅せるためのベクター素材 -Vector Mockups Library
Post on:2019年2月4日
Webサイトやスマホアプリのプレゼンテーション用に便利な無料のベクター素材を紹介します。iPhone, Androidをはじめ、スマホ・タブレット・デスクトップ・ブラウザなど、さまざまなデバイスが揃っています。 Vect […]
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
Post on:2019年1月31日
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで […]
あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can't Unsee
Post on:2019年1月30日
面白くて勉強になるUIデザイン検定問題を見つけたので、紹介します。 2つのUIデザインが表示され、どちらが正しいデザインかを選択するゲームです。 デザインは、見る目を養うことも大切です。1pxのライン、文字詰め、ツラ合わ […]
sponsors
