デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 - Qiita

2019/10/30 90 users Qiita パディング マージン エンジニア 概要編

デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編 ３ヶ月やるとどうなるか Daily Cocoda 1日目 初心者丸出しのデザインですね。丸アイコンの画像が大きすぎたり、ピンクの背景色と白の文字色があってなかったり､パディングとマージンがおかしかっ... 続きを読む

無料でデザイン上「アリ」な色の組み合わせをサクッと確認できる「Accessible Brand Colors」レビュー - GIGAZINE

2019/03/04 183 users ウェブデザイン GIGAZINE 一目 ナシ アリ

ウェブデザインやフリーペーパーといった物理的なデザインをする際には、人に訴える力を持つ「見やすい」色の組み合わせを見つけ出すことはかなり重要です。背景色と文字色の組み合わせが「アリ」なのか「ナシ」なのかを一目でわかるようにする「Accessible Brand Colors」を使えば、悩みがちな色の組み合わせを直感的に... 続きを読む

【図解で分かる】色彩センスのいらない配色入門 - Brian'z Imagination

2016/05/04 502 users Brian'z Imagination 図解 色彩センス

2016 - 04 - 29 【図解で分かる】色彩センスのいらない配色入門 Webデザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。 背景色や文字色をいじるのだけれど、 どうもパッとしない 。 これだ！と思う色を選択して使... 続きを読む

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/01 826 users 実装 Webクリエイターボックス CSS小技集 コード タタ

はるか6年前に書いた記事「 少しのコードで実装可能な20のCSS小技集 」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像を... 続きを読む

強調文字をちょっとおしゃれにするCSSデザインサンプル

2015/04/09 62 users strong 太字 CSS デフォルト 蛍光ペン

strongなどの強調タグで使えるCSSデザインサンプル。線をつけたり背景色や文字色を変えて蛍光ペンでマークしたような感じにするなど、ちょっとおしゃれにできる装飾スタイルをご紹介します。ブログの本文で強調したい部分には <strong> や <b> を使いますが、デフォルトのスタイルではただの太字になるだけです。 これだとちょっと味気ないなーと思うときは、CSS でデザインしてみましょう。 文字や... 続きを読む

Sassでの色管理 - Weblog - Hail2u.net

2014/07/24 79 users Sass Weblog hail2u.net 変数 関数

Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色と... 続きを読む

有名企業やアニメなどのロゴを作れるジェネレーターまとめ | 男子ハック

2013/06/05 457 users 男子ハック アニメ 有名企業 フォントサイズ Twitter風

あんな企業ロゴやこんなアニメタイトルまで、色々なロゴジェネレータを使って男子ハックのロゴを作ってみました。 企業系 Twitter風のロゴジェネレーター テキストボックスに半角英数字で文字を入力するだけです。 フォントサイズや文字色、文字縁の色が変更可能です。 Generate Your Own Twitter Logo | Twitlogo 任天堂風のロゴジェネレーター テキストボックスに半角英... 続きを読む

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

2013/01/29 539 users コピペ エフェクト 目次 Webクリエイターボックス マウス

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む

コピー＆ペーストするだけで折り本用PDFファイルを作成・ダウンロードできる「8p Orihon Maker」 - GIGAZINE

2012/10/16 628 users GIGAZINE 折本 ウェブサービス 表紙 PDF

自分で書いた文章をコピー＆ペーストするだけでミニサイズの折り本用PDFファイルが作れるサービスが「8p Orihon Maker」。折本は全8ページ、最大1万3760文字まで記載でき、文字色の変更や、表紙をつけることも可能です。 8p Orihon Maker - PDFで誰でもかんたんに折本が作れるウェブサービス http://8p.dip.jp/ テキストボックスの上には編集ボタンがあります。... 続きを読む

Marginal Leaves - Googleカレンダーの土・日の日付の背景色を変更してみました

2006/10/05 63 users 日付 Googleカレンダー 背景色 追記 隙間

[追記] Googleカレンダーの土日の色 その2 - Marginal Leaves に改良版がありますので、そちらを使ってください。Googleカレンダーの土・日の文字色を変更しましたおお！ これはすごい。 カレンダーが断然見やすくなります。 標準で設定できるようにならないかな。これだとちょっと隙間が開いちゃうので、takayama さんのを参考に自分でもいじってみました。 @-moz-doc... 続きを読む

色の組み合わせチェック - 読みやすい前景色と背景色

2005/02/25 283 users シミュレーション 背景色 コントラスト 手法 テスト

誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と... 続きを読む