あれはどうだったかな？ という時にすぐ分かる、Web制作の実装や勉強に役立つチートシートを紹介します。 iPhone 8やXsのスクリーンサイズはいくつだったかな？ CSS FlexboxやGridの挙動がまとめて知りたい、CSSのプロパティの値や対応ブラウザは？ Vue.js, React.jsのよく使用するイベントや構文、ブラウザごとのバグやハックはあるのか、がまとめられています。

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ

Webページやスマホアプリのコンテンツ、カードやナビゲーションや画像などのコンテナに美しいシャドウを簡単に与えることができるスタイルシートを紹介します。 htmlの要素にclassを加えるだけの簡単仕様。ホバーなどの操作に対応して、ふわりとシャドウを与えることもできます。

パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって

ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。 50 Things You (Probably) Forgot To Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ログイン・サインアップ関連のデザイン要素 ファースト エクスペリエンスのデザイン要素 小さいけれど大切なデザイン要素 割と目立つデザイン要素 プロフィールスタッフのデザイン要素 ユーザーのさまざまな

Webサイトのパンくずリストとは、ユーザーにサイトの階層を伝え、そのページがどこにあるのかを正確に理解できるようユーザーエクスペリエンスを強化します。また、Googleのbreadcrumb schemaにより、その重要性は高まっています。 最近のWebサイトで採用されている、デザインも機能も素晴らしいパンくずリストの実装例を紹介します。 11 Ways Breadcrumbs Bolster UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ※サンプルに日本語版がある場合は、日本語サイトに変更しました。 wayfair wayfairのWebサイトはUX全体が素晴らしく、非常に適切なページです。パンくずリストのデザインは大きすぎず、小さすぎず、控えめに存在しているのが好ましい理由です。 パンくずリストはプロダ

男性モデル・女性モデルを上下左右さまざまな角度から、拡大縮小して見ることができる3Dの無料素材を紹介します。 3Dの専用ソフトがなくても、Photoshopの標準機能「3Dオブジェクト」でも利用することができます。もちろん、各種3Dソフト用のフォーマットも揃っています。

今年になって人工知能、AIが取り入れられたWeb制作関連のサービスがどんどんリリースされています。フォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、自動化することができ、自分にはない知識を引き出して効率的に作業することができます。 今回紹介するのはサイトのブランド、ロゴやスタイルガイドを数クリックするだけで作成できてしまうオンラインサービスです。そのまま使ってもよし、カスタマイズも可能なので、ベースとしても利用できます。

Web制作者やデザイナー向けの定番のアプリ・ツールをはじめ、あまり知られていない便利なものまで、macOS用のアプリとツールを紹介します。 制作者やデザイナーに限らず、macOSを便利にするツールもたくさん揃っています。 Awesome Mac -GitHub MITライセンスで公開されており、せっかくなので、翻訳してみました。 私が日常的に使うツールや、気になっていたツールも含まれており、こんなのもあるんだ！という便利そうなツールもたくさんあります。 エディタとIDE（統合開発環境） 開発ツール テストツール コマンドラインツール バージョン管理 データベース デザイン&プロダクト 仮想マシン コミュニケーションツール データ復旧 オーディオとビデオ オフィス・読み書きツール Ebookリーダー FTPクライアント ハイブリッドアプリ用のフレームワーク ダウンロードツール オンラインスト

カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部

Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。 Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。 Driveaway -GitHub デモページ レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。 Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？ テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。 私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。 私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3C

HTMLの各要素のブラウザごとに異なる差異をなくすために、ブラウザのスタイルを初期化するリセットCSS、初期化ではなくノーマライズ（正常化）するノーマライズCSS。 定番のスタイルシートから、最近リリースされたものまで、リセットCSSとノーマライズCSSを紹介します。 イラスト: Girls Design Materials 定番も最近のWeb制作にあうようバージョンアップされており、Web制作者は要チェックです！ 下2つは通常のリセットとは異なるアプローチのスタイルシートです。 ress Normalize.css sanitize.css Marx Reset CSS minireset.css css-wipe Cleanslate Unreset CSS ress -GitHub normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、ブラウザごとに異なるH

その情報を見せるのに適したスライドは？ そのデータを見せるのに効果的なグラフは？、どんなスライドを使い、どんなグラフを使えば、主要ポイントを確実に伝えられるのかがフローチャートで分かる「Slide Chooser」「Chart Chooser」を紹介します。

デザインやイラストで配色を考える時、アクセントカラーは非常に大切です。 Webデザインだと目立たせたいコンテンツやボタンに、イラストだと単調な配色を引き締めたり、アイテムや小物を際立たせることができます。 配色のセンスや知識がなくても、ベースカラーにぴったりなアクセントカラーを簡単に見つけられる方法を紹介します。 便利な無料ツールを利用しよう ベースカラーを用意 アクセントカラーの選び方: その1 アクセントカラーの選び方: その2 アクセントカラーのダウンロード 便利な無料ツールを利用しよう 無料で利用できるオンラインのカラーツールがたくさんあるので、それを使用します。 今回は無料で利用でき、登録など面倒なことも一切ない「Paletton」を使用します。

アイコンとテキストを横並びにする配置は、Webページでよく使用されます。ナビゲーションやリスト、リンク、ヘッダやフッタのリンクなど、さまざまなコンテンツで見かけますね。 アイコンとテキストを横並びに美しく揃えるスタイルシートのテクニック、調整用のスタイルシートを紹介します。 Tips for Aligning Icons to Text 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Step 1: アイコンのフォーマットを決める Step 2: 同じようなサイズのアイコンを使う Step 3: アイコンのサイズにフォントのサイズを合わせる Step 4: 位置の調整はCSSを使う Step 5: 適用するアイコンのためにclass名を使う Step 1: アイコンのフォーマットを決める アイコン画像には、さまざまなフォーマットがあります。 SVG