[B! webデザイン] cpp_0302のブックマーク

カトウヒカル@バナーデザインのきほん著者 on Twitter: "［配色が苦手なあなたに］ 2年前に既出だけど、時短で配色する時の王道を再投稿。 ➀配色比率は70:25:5に設定 ➁白抜き文字が置ける色をベース ➂アクセントは黄色 ➃ベースとメインを入替て2種類出す色の扱いは難しいから、… https://t.co/c0CFoyNVJN"

［配色が苦手なあなたに］ 2年前に既出だけど、時短で配色する時の王道を再投稿。 ➀配色比率は70:25:5に設定 ➁白抜き文字が置ける色をベース ➂アクセントは黄色 ➃ベースとメインを入替て2種類出す色の扱いは難しいから、… https://t.co/c0CFoyNVJN

cpp_0302 2019/12/13

リンク

ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。左右の余白は揃っているか左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>

cpp_0302 2019/06/11

リンク

アイコンWebフォント Font Awesome 5 の簡単な使い方

cpp_0302 2016/03/16

リンク

UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita

仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書

cpp_0302 2016/02/24

Webデザイン

リンク

非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita

はじめに普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。手順デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。実際に作ってみる。おしゃれなサイトを探して研究する個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき

cpp_0302 2016/02/03

リンク

無料で配色シミュレーションができるカラーパレット系サービス6選【2022年最新】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーのモモコです。今回はデザインの重要な要素の一つである、色選びの時に使える配色シミュレーションができるツールやサイトをご紹介します。Webカラーのカラーパレット系サービスを中心にチョイスしましたので、配色などでお悩みの方はぜひご参考にしてみてください！独学でつまずいていませんか？配色やデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 coolors https://coolors.co/ 直感的な操作で色の組み合わせのシミュレーションができるサイト。スペースキーを押すことで自動で配色を行なってくれます。何度でも押せる

cpp_0302 2015/06/24

]

リンク

-webkit-text-size-adjust: none を絶対に設定してはいけない理由

PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。以上。で終わってしまうと記事にならないので、ちゃんと説明しておく。そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。これを制御するのが CSS の -webkit-text-size-adjust である。文字サイズ自動調整の具体例次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-

cpp_0302 2015/04/10

リンク

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。パターン1: 何も考えずに HTML を書くまずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま

cpp_0302 2015/04/10

リンク

今更聞けないWebサイト構築〜脱テーブルレイアウト〜【中編】 - 今日学んだこと

前回の続きです。続いて、メニューを作ってみます。 ※※　注意！！ ※※ 今回の説明は、いわゆるダメな例です。CSS素人が、どう失敗するかが本エントリーで、次の章で立て直す予定です・・・。こういうことやるとハマるよ？と、悪い例として見てもらえれば。自分の勉強メモとして、試行錯誤の経緯も重要な資産となるかなと思って残してます。メニューの作成テーブルだと <table><tr><td>menu1</td><td>menu2</td><td>menu3</td></tr></table> とするところを、li(リストアイテム)タグで作っていきます。また、HTML5からnav(ナビゲーション)というタグが追加されたので、こちらも使っていきます。メニュー(HTML) メニュー(CSS:レイアウト) ポイントは、nav#nav_main liでfloat:leftを指定しているところ。これで、

cpp_0302 2015/03/27

リンク

HTML5のheader要素とfooter要素はdiv要素の代わりではない｜ SEOモード

html5から新しく採用された要素にheader要素とfooter要素があります。これら2つの要素は、しばしばウェブページ全体のヘッダーとフッターというこれまでdiv要素で区分してきた部分を置き換えるものだという話を聞きます。私自身もそう考えていたのですが、今回改めて仕様書を見てみたところ、どうもそういう単純な話ではないようです。自分用のメモ、という意味も込めて、ここで改めてheader要素とfooter要素について、整理しておきたいと思います。 header要素まずheader要素です。html5のワーキングドラフトには以下のように書かれています。 The header element represents a group of introductory or navigational aids.（header要素は導入部ないしナビゲーションの補助を表します。） Note:A hea

cpp_0302 2015/03/27

リンク

今更聞けないWebサイト構築〜脱テーブルレイアウト〜【前編】 - 今日学んだこと

SIの現場では、未だにテーブルでのレイアウトが多勢を占めてる気がします。フォントの色とかサイズとかも、CSS使わず書くことが多い気もしてます。そんな訳で、少なくとも僕はモダンなHTMLやCSSがわかりません。で、お勉強しつつ、ここにアウトプットを残そうというのが今回の趣旨です。 HTMLの種類昨今のメジャーどころでは、以下の様になるのかな　と。HTML5がすでに主流と言っても良い気がするので、お勉強もHTML5に則ってやっていこうと思ってます。 HTML4.01 ちょっと前までの主流。yahooはまだHTML4.01。Windows XP使い続けてるおじーちゃんおばーちゃんもターゲットだからなのかな？古いブラウザでも観れるように配慮するなら、このバージョンを選ぶことになる XHTML 若干空気。古いブラウザでもそれなりに対応している。XMLのように厳格に書きましょ　という企画。利用して