サイト構築

[JS]これなら簡単で便利!要素がビューポートに表示されているかを判定できる -Intersection Observer

Post on:2017年8月10日

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。

...記事の続きを読む

CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css

Post on:2017年8月9日

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用でき

...記事の続きを読む

CSSのコードを整理し、効率的に管理する方法のまとめ

Post on:2017年8月7日

CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一

...記事の続きを読む

デザインの神は細部に宿る!最近のWebサイトで見かけるナビゲーションのアイデアのまとめ

Post on:2017年8月3日

Webサイトをデザインする時にナビゲーションをどうするか、けっこう頭を悩ませると思います。コンテンツを見せるために、サイトの構造を伝えるために、ページを移動するために、ナビゲーションはデザインで重要なアイテムです。 最近

...記事の続きを読む

1クリックで簡単!写真画像が印象的になる美しいDuoToneをつくりだすPhotoshopの無料アクション

Post on:2017年8月1日

DuoToneを使ったデザインは、去年くらいから爆発的に増えてきました。DuoToneとは2つの色相をベースに色調を変化させたもので、最近の使い方としては画像にDuoToneのグラデーションを加えて、画像に強いインパクト

...記事の続きを読む

[JS]レスポンシブ対応!テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty

Post on:2017年8月1日

テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。 レスポンシブ対応で、日本語にもWebフォントにも対応しています。 Fitty Fitty -GitHub

[CSS]レスポンシブ対応の最新版!サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

Post on:2017年7月31日

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering hor

...記事の続きを読む

デザイナーがチェックしておきたい、おすすめの新作フォント!プロユース向け日本語の有料フォントのまとめ

Post on:2017年7月28日

新しいフォントに出会うと新鮮で嬉しい気持ちになりますよね! 今年リリースされたばかり、おすすめの日本語フォントを紹介します。 AXIS FontをリリースされているType Projectの新作フォントなど、注目すべきフ

...記事の続きを読む

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」

Post on:2017年7月26日

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です

...記事の続きを読む

デザインにもどんどん人工知能がすごいぞ!ディープラーニングで、フォントの最適な組み合わせをつくりだす

Post on:2017年7月25日

先日の記事で、カラーセオリーに基づいた学習型AIで色の組み合わせを作成できるツールを紹介しました。デザインの世界にも人工知能がどんどん進出しているように感じます。 今回は、フォントの最適な組み合わせをつくりだすことができ

...記事の続きを読む

 1 2 3 4 5 ... 386 387 Next

top of page

©2017 coliss