すぴかあやか（角田綾佳）＠キテレツ on Twitter: "コピーの一部を強調のために色をつけると、元々の文字色に負けてしまうジレンマについて書きました。作っている最中は「強調した」と思

2022/08/12 9 users ジレンマ 角田綾佳 強調 最中 https

コピーの一部を強調のために色をつけると、元々の文字色に負けてしまうジレンマについて書きました。作っている最中は「強調した」と思うので気がつきにくいけれど、あとで冷静に見ると色薄いな…みたいなことをよくやってしまいます。 https://t.co/w4ztPuiv1E 続きを読む

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

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

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

CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 | NxWorld

2019/08/30 42 users NxWorld CSS class 複数行 実装

実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 ※動きはPCで確認してください。 実装にはCSSを下記のように記述し、ここでは.hover-underlineというclassを適用したいa要素に指定する想定になりま... 続きを読む

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

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

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

オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 | TechMemo

2018/04/03 11 users TechMemo modules Hidden 結合 PDF

最近の投稿 オンライン上でPDFを結合・分割することができるWEBサービス「I Love PDF」 フッターに被らないスクロール追尾型のサイドバーを実装する方法 Contact Form 7のフォームにページタイトルやURLなどを隠し項目(hidden)で設定できるようになるWordPressプラグイン「Contact Form 7 Modules」 テキスト選択時の背景色や文字色をCSSで変更す... 続きを読む

テキスト選択時の背景色や文字色をCSSで変更する方法 | TechMemo

2018/03/29 9 users TechMemo background fff CSS 白色

どのブラウザでも大体テキスト選択時は、背景色が青色、文字色が白色になりますね。「::selection」を使うと、簡単にテキスト選択時の背景色や文字色を変更することができます。 ::selection { background: #FF0000; color: #fff; } ::-moz-selection { /* Firefox用 */ background: #FF0000; color:... 続きを読む

【Webデザイン】配色に悩んだ時に見て欲しい便利なサイト5つ紹介 - ゆうう兄のまったり奮闘記

2017/11/05 36 users 配色 見出し 奮闘記 う兄 うえ

2017 - 11 - 05 【Webデザイン】配色に悩んだ時に見て欲しい便利なサイト5つ紹介 ブログ 突然ですが、Webサイトを作成する時や、ブログのデザインをカスタマイズするときに 「どんな色を使うか」 で悩んだことはありませんか？ 背景色、文字色、メニューの色、見出しの色... 何となく決めてしまいがち ですよね。デザインを決めるうえで配色というのは、見た人に与える印象を決定づけるもので、と... 続きを読む

【図解で分かる】色彩センスのいらない配色入門 - 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 でデザインしてみましょう。 文字や... 続きを読む

文字色と背景色のコントラストが適切かどうかをチェックしてくれる・「colorable」 - かちびと.net

2015/02/25 42 users FAIL WCAG 彩度 OSS コントラスト

colorable colorableはテキストの色と背景とのコントラストがアクセシビリティ上、適切に保たれているかをチェックしてくれるツールです。判断基準はWCAG 2.0解説書のコントラストガイドライン(日本語版ではココ見ると良いかも)が採用されています。色や彩度等を設定するだけで反映され、問題がある場合はFail、適切な場合はAAAなどの形でチェックをしてくれます。本ツールはOSSとしてMI... 続きを読む

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

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

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

はてなブログでタイトルや本文の文字色を変える方法 - マトリョーシカ的日常

2013/12/14 46 users 本文 タイトル 日常 食傷 ブログカスタマイズ

2013-12-14 はてなブログでタイトルや本文の文字色を変える方法 ブログ ブログカスタマイズ さて、食傷気味のブログ論はわきへ追いやってそれよりは幾分建設的なカスタマイズの記事を書こう。今日はブログの文字色の変え方を説明する。「そんなの分かってるよ」という意見もあるだろうがアクセス解析を見る限りでは少しは需要があるらしい。「はてなブログ　文字色　変更」とかで月に二、三人が来ているのだ。彼らを... 続きを読む

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

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

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

[iPhone, iPad] Ever Sticker for Evernote: よく使うEvernoteのノートをホーム画面から開ける！アイコン生成アプリ。 - たのしいiPhone！ AppBank

2013/05/08 16 users Evernote iPhone AppBank Safari

AppBank の主任です。よく使うノートはホーム画面に置いておきたい…。そんな願いを叶えてくれるのが Ever Sticker for Evernote です。 ホーム画面に置きたいノートを選び、アイコンを作成します。そのアイコンをタップすれば Evernote/Safari でノートを開くことができます。 アイコンには文章の一部が埋め込まれ、背景色・文字色は16種類から選べます。ノートを Ev... 続きを読む

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

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

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

「ソーシャルにシェアするときのアイコン」をWebフォントを利用してチャチャッと配置する方法 | 男子ハック

2013/01/08 11 users ソーシャル 男子ハック Webフォント アイコン CSS

最近流行しているWebフォントってやつを男子ハックでも使ってみました。いまいち便利さを理解できていなかったのですが、実際にソーシャルシェアボタンを作ってみて感動。またひとつWebデザインのハードルが下がりました。 Webフォントでできること そのまま使えばどんな環境でも同じデザインでかっこいい さらに普通のテキストと同様にCSSによるデザイン変更が可能 CSSで文字色をつけたりできて、CSS3で影... 続きを読む

Dreamweaverのコードビューのコードカラーリングを作ってみました | Webデザインのタネ

2012/11/12 46 users コードビュー Dreamweaver タネ モチベーション

Dreamweaverのコードビューの背景や文字色は設定で変更できます。背景を黒くすると、目の負担が軽くなってちょっと肩こりもよくなったような。ちょっとモチベーションも上がりましたｗ Colors.xmlをダウンロード Colors.xmlの配布ページ コードカラーリングを変更するには？ Dreamweaverを起動している場合は一度終了します。 ダウンロードして解凍したColors.xmlを次の... 続きを読む

コピー＆ペーストするだけで折り本用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/ テキストボックスの上には編集ボタンがあります。... 続きを読む

ドットインストールの一部レッスンが字幕に対応しました #dotinstall | IDEA*IDEA

2012/07/03 9 users dotinstall IDEA 不自由 聴覚 CSS

さて、以前からやらなくちゃな、と思っていた動画字幕に一部レッスンが対応しました。聴覚に不自由がある方、なんらかの理由で音を出せない方はご利用いただければと思います。 なお、現在対応しているのは「HTMLの基礎」「CSSの基礎」のみです。 ↑ 動画を再生して右下にある「cc」をクリックしてみてください。 ↑ こんな感じで字幕が出ます（スマホでも見れます）。 ↑ なお、設定で文字色は背景色、文字の大き... 続きを読む

Palette｜SMSをもっと可愛く素敵にカスタマイズ！！背景や文字色、なんと、フォントも変えれます♪♪無料だからダウンロード必須です♡iPhone女史

2012/06/24 11 users iPhone女史 Palette フォント SMS やりとり

文字色や背景をカスタムして、メールをもっと楽しく可愛く♡豊富なデコレーション素材であなたのメールをもっと華やかに♪普段のメールのやりとりはもちろん、記念日やお誕生日メールなど特別な日のメール作成にはもってこい！！Paletteなら、SMSのフォントを変えることも可能☆顔文字も充実していて、かつ無料なのでダウンロード必須です！！！ 続きは↓ アプリを起動して、吹出しの画像をタップして普段通りにメール... 続きを読む

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

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

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

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

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

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