いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
フラットなUI要素は、目につきにくく確信を持ちにくい
フラットインタフェースでは弱いシグニファイアがよく用いられる。クリックできることの手がかりを比較するアイトラッキングの実験では、ユーザーは、シグニファイアの弱いUIのほうが強いものよりも多くの労力を必要とした。 Flat UI Elements Attract Less Attention and Cause Uncertainty by Kate Meyer on September 3, 2017 日本語版2018年1月24日公開 デジタルインタフェースでは、フラットデザインが人気だが、それと並行して、シグニファイアが不十分になってきている。近年、多くのUIで、ユーザーがクリックできるものだと理解するために頼っている知覚可能な手がかりがはぎ取られ続けてきたからだ。 今回、我々はインタフェース上のユーザーの目の動きを追跡して視覚化するアイトラッキング装置を使い、クリックできることの強いシ
テキスト比較ツール「difff（デュフフ）」、web上で簡単に差分がわかる。 | WordPressやWebデザインなど紹介 Ocadweb
CSS、HTMLなどの修正をした場合に、前回との比較をして何が修正されたのか確認するケースがあります。 Subversionなどでバージョン管理をしている場合はSubversionの機能で差分を確認することができますが、使い勝手や見やすさという点では物足りない機能です。 そこで今回はWeb上で簡単にテキストの差分比較ができるdifffの使い方をご紹介します。 difff difffの使い方 左と右の欄に比較したいテキストの文章を入力、またはコピー＆ペーストします。 「比較する」ボタンをクリックすると差分がマーカーのような色付きで表示されます。色を変えたい場合は、「カラー１」「カラー２」「モノクロ」を選択して変更することができます。文字数、空白行、改行数、単語数もわかります。 印刷用のページとして、不要な画面の表示部分を表示せずに比較した差分の結果のみ表示したい場合は「結果のみ表示（印刷用）
[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline
見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。 テキストをデザインする際に、気を付けるべきことは「縦のリズム」。 Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。 レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美し
![[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline](https://cdn-ak-scissors.b.st-hatena.com/image/square/326599f01a29f1985c237ea13213cdb051872389/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060301-01.png)
SEOはテキストの最適化からエンティティの最適化へ at #SemTechBiz 2014
[対象: 上級] SemTechBiz 2014 カンファレンスのセッションレポートの第2弾です。 Barbara Starr（バーバラ・スター）氏のセッションと2本立てで構成された、Bill Slawski（ビル・スロースキ）氏によるセマンティック検索をテーマにしたもう1つのセッションになります。 テキストを対象にしていた昔のSEO サイトの運営を自分が初めて始めた2005年当時のSEOは、titleタグやh1タグのようなタグで”テキスト”を対象にしたSEOだった。 その当時のSEOのチェック項目 URL構造 情報設計 ページにおけるキーワードの使用 サイトスピード 正規化 など エンティティが加わった現在のSEO エンティティに対するSEOが今は加わった。 エンティティのチェック項目 サイトにどんなエンティティが現れているか 会社名やドメイン名でどんなふうにサイトが検索結果に表示されて
エディトリアルデザインから盗め！女性誌に使われているデザインを見てみた｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんにちは。年末ですね。クリスマス、忘年会、年越し、お正月と忙しい時期でしょうか。お仕事もラストスパート頑張りましょう。 最近ランディングページでも、フラットなデザインだったりわりとシンプルなデザインを作ることが多くなってきている気がします。昔のようにごりごりに装飾を使うというよりも、“今っぽい”シンプルおしゃれなものを作りたいですよね。そこで参考になりそうなものが、雑誌のデザイン(エディトリアルデザイン)です。紙とWebなのでそのまま真似るのは難しいですが、ちょっとしたあしらいなら参考にできそう！今日はそんなあしらいを紹介します。 版ズレ風文字 カンタンだけど結構おしゃれに見える、そんなあしらいです。基本的には濃いフチに薄い色をズラすのが良いかと思います。見出しに使えそう？ 鉤括弧 鉤括弧といっても普通の「かぎかっこ」ではなく、細めに大きめに、テキスト全体を囲うように使うのがポイント。こ
WYSIWYGエディタでCSSを作成できるサイト「EnjoyCSS」 | ライフハッカー・ジャパン
「EnjoyCSS」はWYSIWYGエディタでCSSを作成できるサイトです。ボタンやフォーム、テキストなどのデザインをWYSIWYGエディタで行うことができ、作成したものをCSS3でダウンロードすることができます。 以下に使ってみた様子を載せておきます。まずEnjoyCSSへアクセスしましょう。ボタンやフォーム、テキストなどいくつかのカテゴリに分かれているので、作りたいものを選びましょう。今回はボタンを作ってみます。 こちらがエディタです。左側にプレビューがリアルタイムで更新されます。右側にはTransitionや背景、影、余白などを設定できますよ。 編集が完了したら右上の「Get the code」からCSS3でダウンロードできますよ。CSSでボタンやフォームなどを作りたいときにぜひご活用ください。 EnjoyCSS （カメきち）
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス
グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事（グラデーションをより美しく滑らかにするPhotoshopのアクション ）をご覧ください。
コーディングを考慮したWebデザインガイドライン
2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less
【WEBデザイン】センス不要！5つのコツを抑えるだけで脱初心者 | LISKUL
■デザインはセンスが無くても大丈夫 あなたが作ったサイトやランディングページ、バナー。「何だかダサい？」「イケてない・・・」と感じるのは、「デザインの基礎」を抑えられていないからかも？自分の感覚・センスだけでテキストを並べたり、配色を考えたりしていませんか？ 今回は、見栄えの良いイケてるサイトやランディングページを作る為に「最低限コレだけは抑える」というコツをご紹介します。いきなりプロ並みには仕上がらなくても、見る人にとってストレスにならない、伝えたい事をきちんと伝えられるページに仕上げる為のコツを5分で身に付けて、初心者でも失敗しないサイトやページを作りましょう！ 【最重要5つ】「脱初心者」するデザインのテクニック脱初心者のページを作る上で、最もインパクトの大きい5つのテクニックをご紹介します。この5つを実践することで、WEBサイトやページは格段に見栄えが良くなります。 まずはこちらの良
新規顧客を逃さないECサイトデザイン
2014年5月12日 Webデザイン, ユーザビリティ ECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 目的の商品ヘ素早くアクセス ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはも
【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
HTML5 と SVG で考える、これからの画像アクセシビリティ
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
