サイト構築
CSS3の便利なセレクタをおさらい、「:nth-child()」と「:nth-of-type()」疑似クラスの使い方
Post on:2016年9月27日
「:nth-child()」と「:nth-of-type()」セレクタは、他の単純なセレクタでは表現できないドキュメントツリー内の情報に基づいて要素を選択することを可能にする構造的な擬似クラスです。 この2つの疑似クラス […]
すぐに使える！UIデザインで効果的なカラースキームをまとめたスウォッチ素材 -Open Color
Post on:2016年9月26日
UIデザインで使う、フォント、背景、ボーダー、ボタンなどのカラーを効果的にするグレーと基本の12色から展開されたカラースキームを紹介します。 Open Color Open Color -GitHub
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
Post on:2016年9月23日
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイ […]
真ん中に配置したらバランスが悪い！画像の見た目のウェイトから中心を見つける方法 -Visual Center
Post on:2016年9月21日
正円とか正方形を中心に配置するのは簡単ですが、見た目の中心が中央にないものを中心に配置するためには、見た目のウェイトから中心を見つける必要があります。 画像の見た目の中心を見つけることができるオンラインツールを紹介します […]
Webページのグリッドを計算する時に便利！全体幅・カラム数・溝の組み合わせのパターンを提示してくれる -Grid.Guide
Post on:2016年9月20日
Webページのグリッドを決める時、全体の幅、カラムの数、溝のサイズ、両端のスペースを元に、グリッドのパターンを提示してくれるオンラインサービスを紹介します。 1px端数がでてしまうといった面倒な計算とは、これでさようなら […]
デザインやレイアウト、見せ方、使い勝手が参考になるオンラインショップやプロダクトページのまとめ
Post on:2016年9月15日
ストアページ、プロダクトページ、価格表ページ、チェックアウトページなど、オンラインショップやプロダクトページのレイアウト、商品の見せ方、UI周りの使い勝手が参考になるページをコレクションしているサイトを紹介します。 St […]
[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック
Post on:2016年9月14日
メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。 In CSS, set […]
カラーの取得・管理、カラーパレットの作成、画像からカラー抽出などいろいろできてしまう便利なカラーツール -Kelir
Post on:2016年9月14日
カラーピッカーはいろいろありますが、これは決定版では？ というくらい便利なOS X用の無料ツールを紹介します。 カラーピッカーとしてはもちろん、カラーの管理、カラーパレットの作成、画像からカラーの抽出、グラデーションの作 […]
こんなツールがあったのか！Webページが世界各地でどのように見えるか、位置情報を使ったコンテンツも確認できる -Geo Screenshot
Post on:2016年9月13日
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 Geo Scree […]
これは珍しい！幾何学的な錯視を使った不可能図形のベクター素材 -Impossible Geometry
Post on:2016年9月13日
ペンローズの三角形、ネッカーの立方体、悪魔のフォークなどのような幾何学的な錯視を使った、ちょっと不思議な不可能図形のベクター素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに。 商用利用もO […]
sponsors
