CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

2023/10/24 84 users Calc フォントサイズ atan2 CSS フォント

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算... 続きを読む

HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状 | コリス

2020/08/18 19 users コリス ルックアンドフィール ピクセル CSS HTML

デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ... 続きを読む

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる | かちびと.net

2019/10/13 29 users table CSS セル overflow result

Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています css table { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; ... 続きを読む

遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js | コリス

2019/07/04 65 users 検出 軽量スクリプト 依存 パフォーマンス コリス

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく... 続きを読む

1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - dely engineering blog

2019/04/21 327 users dely engineering blog 変化

こんにちは！dely でフロントエンドの開発をしています @all__user です。 今回は kurashiru のフロントエンド開発に導入されたビジュアルリグレッションテストについてご紹介したいと思います。 目次 目次 ビジュアルリグレッションテストとは 導入の背景 フロントエンドのテスト？ SPA移行前後の比較 ツール reg-suit ... 続きを読む

あなたはデザインを見る目と判断する知識を備えているか、勉強にもなるUIデザイン検定問題 -Can’t Unsee | コリス

2019/01/30 87 users UIデザイン 文字詰め コリス ライン 正しいデザイン

面白くて勉強になるUIデザイン検定問題を見つけたので、紹介します。 2つのUIデザインが表示され、どちらが正しいデザインかを選択するゲームです。 デザインは、見る目を養うことも大切です。1pxのライン、文字詰め、ツラ合わ...記事の続きを読む 続きを読む

CSS - Retinaディスプレイは0.5pxを表示できるか - Qiita

2015/08/14 42 users Qiita SOLID border psd div

もらったPSDのborderに1.5pxが指定されていることがあり、 もしかしたらRetinaディスプレイなら表示できるんじゃないかと思い試してみました。 0.5px、1px、1.5pxのborderを作ってみる div { width: 10px; height: 10px; border: #F00 solid; } #point-five { border-width: 0.5px; } #... 続きを読む

marginとline-heightによる"真の余白"について考える | SimpleIsm

2015/06/09 73 users コーダー margin line-height 余白 20px

まだまだWeb制作においては、デザイナーがデザインしたものをコーダーがコーディングする、というような流れが多いように思う。 デザイナーは1pxにもこだわる人たちなので、コーダーもそれに応えるように、きちんとデザイン通りに表現する。 余白の指示書などがあるとありがたい。例えば、「ここは20px、ここは40px、ここは60px」というような具合。デザイナーによっては、余白がそれぞれバラバラだったりして... 続きを読む

コピペでOK！WordPressのサイトマップを人気記事ランキングにする方法 - ゆめぴょんの知恵

2015/02/19 57 users ゆめぴょん コピペ WordPress 知恵 toc

WordPressの新テーマ・デザインに変更した時に、サイトマップについても人気記事順にしてみました。それに伴いずっと使ってたプラグインをまた1つ減らしました。そのカスタマイズ方法を紹介します。<style type="text/css"> .toc { margin: 18px 5px; background: #ffd; border: 1px solid #666; border-radiu... 続きを読む

[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック | コリス

2014/03/20 47 users border ナイスアイデア box-shadow Drop

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひ... 続きを読む

LessでBEMってみたらかなりさくさくコーディングできた！という話 ::: Toro_Unit

2013/12/12 19 users BEM Element border Sass less

BEMを使ったCSSのクラス設計(MindBEMding)ですが、これをSassでやろうとすると、結構泣けてきます。 たとえばこんな感じになるんでしょうかね。 $block: ".block"; #{$block} { display: block; } #{$block}__element { border: 1px solid #CCC; } #{$block}__element_modifi... 続きを読む

[O][Webデザイン]IllustratorをWebデザインに使う時に気をつけたい設定 | Olein | 岐阜県岐阜市のデザイン屋ブログ

2013/02/26 161 users DTP ピクセル オブジェクト 背面 間隔

まずは、キー入力を1pxに変更します。DTPだと、1mmや0.1mmで設定している人が大半だと思いますが、Webにおいては最小単位が１ピクセルなので、このような設定にしておきます。 オブジェクトを選択して、方向キーで移動するときに間隔の設定ということです。 単位をピクセルに 上の画像では0.35mmとなっていますが、1pxと入力するとこう表示されます（僕だけ？）。 こちらは好みですが、【背面にグリ... 続きを読む

テキストリンクの差別化にborder-bottomを使ってみる｜Webpark

2013/01/17 16 users Webpark text-decoration 点線 差別化

最近海外のサイトなんかを見ているとテキストリンクにボーダーを使っているサイトが多い気がします。普段だと「text-decoration: underline;」のところ「border-bottom: 1px solid #003f8e;」って感じです。 ボーダーにすることで何ができるかというと、テキストの色と違う色の下線にできたり、点線にできたりします。 例えばこんな感じ。下線の色のみ変えています... 続きを読む

画像の最大幅を calc() で制御する – terkel.jp

2012/12/16 99 users padding パディング Calc border img

画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (... 続きを読む

リストに1pxのラインを追加するだけで、印象がぐっとよくなる｜Webpark

2012/03/26 1000 users Webpark 印象 ライン リスト

#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる こ... 続きを読む

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック | コリス

2011/11/23 613 users コリス background border CSS hr要素

デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; ba... 続きを読む

illustratorで1pxのラインがぼける時の対処法 | CREAMU

2011/11/13 58 users CREAMU Illustrator ピクセルグリッド 整合

ちょっとメモ。illustratorで1pxのラインを引くとぼけてしまってなんとも直らないことがありますが、0.5px上か下に移動させることで直ることがあります。 「環境設定 / 一般 / キー入力」を0.5pxに設定。ラインを選択して上下に移動 あるいは、以下のように変形オプションでY座標を0.5px程度移動させるか、ラインを選択して「ピクセルグリッドに整合」にチェックを入れることでも可能です。... 続きを読む

リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。 (フェンリル | デベロッパーズブログ)

2011/11/11 1305 users ガンプラ プラモデル 奥行き フェンリル 長谷川

こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すために... 続きを読む

ウェブデザインにおける「1ピクセルのこだわり」に関するエントリーいろいろ | IDEA*IDEA

2011/10/11 268 users IDEA レイヤ ウェブデザイン Photoshop ウロコ

なんかいつも検索しているような気がするのでメモ的にエントリー・・・。 さて「1ピクセルへのこだわり」に関するエントリーいろいろです。神は細部に宿るので参考にしたいところです。 Webデザインにおける、1pxへのこだわり « Parkn Park グラデーションの開始色と終了色でピクセルラインつくるってところが目からウロコでしたよ。必読。 Webデザインの1pxを作るためのPhotoshopのレイヤ... 続きを読む

Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

2011/09/28 1146 users レイヤースタイル pho Photoshop webデザイン

素敵なWebデザインを見ていると、1pxにこだわって作られたデザインが多いです。今回はそんな1pxを、Photoshopのレイヤースタイルを使って、いろいろ作ってみました。これからPhotoshopで1pxのWebデザインをしたいなーと思っているPhotoshop初心者さん向けの記事です。色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Pho... 続きを読む

素人っぽいデザインから脱却するための12のデザインチップス | webox blog

2011/08/30 1234 users webox blog ボーダー 素人っぽいデザイン 要素 小技

クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。... 続きを読む

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com

2011/08/11 29 users シャドウ ノイズ グラデーション Ginpen.com 実践編

元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加... 続きを読む

Webデザインにおける、1pxへのこだわり « PARKN' PARK

2011/06/05 1091 users 日頃 質感 シュ 方々 PARKN

デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出... 続きを読む

人生をより楽しくさせる100の方法 | Webクリエイターボックス

2010/11/29 2286 users Webクリエイターボックス SEO フレーズ スレ 人生

今、あなたは自分の人生に満足していますか？もしそうでないなら、今回の記事が役に立つかもしれません。より素敵な人生を送るためのライフハックです。SEOに疲れたとき、1pxのズレで残業したとき、納期から逃げたくなったとき（※どっかで聞いたなそのフレーズ）に、ぜひ読んでみてください！ Webクリエイターボックスを始めた理由 実は約一年前、毎日なんだか退屈だな…と思っていたときに、今回紹介する「100 W... 続きを読む

光源や１ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集 | コリス

2009/09/16 301 users シャドウ チュートリアル グラデーション コリス 光源

光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。 How to Make a Light and Sleek Web L [...] 続きを読む