ゴールを見失わないために！vol.2 デザインをする前に「スタイルタイル」を作ろう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
スタイルタイルとは？ ムードボードなどで定めたデザインの方向性から、Webサイトをデザインする前により詳細なバリエーションを検討するために制作するものです。 スタイルタイルでは以下のような要素について検討していきます。 使用するフォントの種類 フォントカラー 背景カラー ベースカラー、アソートカラー、アクセントカラー インタラクション要素のあしらい その他要素のあしらい 使用する写真のトーンアンドマナー スタイルタイルの役割 「ムードボード」と同じように、「スタイルタイル」はクライアントや関係者に重要な検討ポイントを提供することで、デザインの方向性に対する第一印象を確認することができます。 また、複数のスタイルタイルを比較することで、どのデザインの方向性が良いかも判断しやすくなります。 スタイルタイルを作ってみる スタイルタイルがどのようなものを示す参考として、LIGブログのサンプルのスタ
hashids.js - 数字からYouTube風のID文字列を生成 MOONGIFT
WebサービスでユニークなURLを提供する際に、IDを数字のまま出してしまうとデータ件数が何件あるのかバレてしまいます。そこでランダムな文字列を作ってIDの代わりにしたりします。しかし、数字のIDとランダムな文字列、二つ管理するのは面倒です。 そこで使ってみたいのがhashids.jsです。数字からYouTube風なID文字列を生成します。 hashids.jsの使い方 例えばこんな感じです。 分かりやすい数字でもちゃんとランダム文字列化します。 ハッシュ風の文字列を作る際に、32進数などを利用することもできますが、少ない桁数の時にランダム性が失われてしまいます。hashids.jsであればsaltを指定してランダムな文字列（かつ可逆）を生成できます。サーバ側でデコードして数字に戻すことも可能です。複数の数字をまとめて変換もできます。 hashids.jsはTypeScript製のオープン
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
CSSで「続きを読む」を作る | かちびと.net
Result 以前書いたものとは別で、こちらは任意の場所で区切りたいケースの時に。 もっとシンプルな方法で非表示部分が要素に依存しています 多くの場合は動的なコンテンツに対応する必要があるので以前書いた方法で事足りそうです css .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .15s ease; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS GridとGradientsを使ってランダムにパターンを作成、コードをコピーできる・「CSS Grid-ient」 - かちびと.net
