「position: sticky;」より便利!スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。

IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。

サイトのキャプチャ

Fixed Sticky- GitHub

続きを読む

最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ

Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。
ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。

スタイルガイドのキャプチャ

Laro Branding

スタイルガイドのキャプチャ

Budgee UI Style Guide

続きを読む

その精密なデザインがすごい!美しい飾り罫や文様を簡単に描けるPhotoshopの無料ブラシ素材 -Pixel Brushes

精密に美しくデザインされた、ラインやコーナーやブロック状の飾り罫、文様を描くPhotoshopのブラシ素材を紹介します。

作者様に聞いたところ、同人誌にも無料で利用できます。

ブラシ素材のキャプチャ

200 Pixel Brushes

続きを読む

Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ

2017年4月11日、Windows Vistaのサポートが終了しました。
これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。

Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

2017年、HTMLやCSSのリソースのまとめ

続きを読む

WordPressをここ2,3年触っていない人も要チェック!PHPの知識がゼロでもテーマを作成・カスタマイズしたい人にオススメの解説書

WordPressはPHPの知識無しでも利用できますが、ちょっとしたカスタマイズをする際、テーマのカスタマイズ、テンプレートファイル、テンプレートタグ、子テーマを使った拡張、function.phpの設定など、PHPは避けて通れません。

WordPressのテーマづくりに必要なPHPの使い方が初心者でもやさしく学べるオススメの本を紹介します。
ここ2, 3年触っていない人も、けっこう変化しているので要チェックです。

誌面のキャプチャ本の表紙

続きを読む

これは楽しい!本格的なピクセルアートが簡単に描けるPhotoshopの無料ブラシ

ピクセルアートを描く時に使うラインやドットで構成されたさまざまなイラストのパーツ・エレメントが収録されたPhotoshopのブラシ素材を紹介します。

ピクセルアートならではのギザギザの斜めのラインをはじめ、L字、Y字、矩形、円形、四角柱、円柱、三角柱、マス目など、いろいろ揃っています。

ピクセルアートを描くPhotoshopのブラシ

NASC Photoshop Pixel Art Brush Set

続きを読む

デベロッパーツールの賢い使い方!テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ

CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。

テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。

サイトのキャプチャ

Using DevTools to Tweak Designs in the Browser

続きを読む

サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows

Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。

ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成できます。

サイトのキャプチャ

UserFlows
UserFlows -GitHub

続きを読む

 1 2 3 4 5 ... 714 715 Next

top of page

©2017 coliss