知っておくと便利！ CSSでUIデザインを微調整する時短テクニックとプロセスを解説
WebサイトやアプリのUIデザインで欠かせないのが、FigmaなどのデザインツールとChromeなどのデベロッパーツールです。この2つをどのように使い分けるとよいのか、デザインツールでやるよりもブラウザ上でCSSでやった方が便利な時短テクニック、UIデザインを微調整するプロセスを紹介します。 Tweaking In The Browser by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ブラウザでのデザインがうまくいかない理由 ブラウザでの微調整 ブラウザで配色を微調整する ブラウザでフォントサイズを微調整する ブラウザでグリッドレイアウト・システムを微調整する ブラウザでレスポンシブ対応のフォントサイズを微調整する ブラウザでコンテナクエリを微調整する ブラウザで多言語サイトのデザイ
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎｜note
弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあまりにも違うため、社内のスタッフには少なからず戸惑いがまだ残っているように思います。 そこで、改めて「なぜtailwindcssを使うと効率的にサイトが構築でき、メンテナンス性が上がるのか」反対に「tailwindcssを使う上で、やってはいけないことは何か」についてまとめたいと思います。 tailwindcssとは tailwindcssとは、2020年11月にバージョン2.0がリリースされたばかりの、今注目のCSSフレームワークです。CSSフレームワークといえば
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
僕がCSSを書く際に必ず意識している CSSのコーディングルール30条｜TAK / Web Creator.
初の有料noteです。 僕個人が厳守しているCSSコーディングのルールから、特に守っておいた方が良いと感じたものを「どうしてそれが良いのか・悪いのか」といった解説も含めて30点ほどピックアップしました。 文字数は全部で28,000字オーバーと卒論レベルですが、それだけコンテンツは詰まってます。価格は相場をよく知らないのでワンコインで買える500円にしました。 （※2019.12.22追記）こちらのnoteですが、リリースから一週間経たずして売り上げが1000部に届きました。皆様ありがとうございます。 先週リリースしたnoteが一週間経たずして売り上げ1000部突破いたしました。思いがけず大変なご好評をいただきまして、ありがとうございます。https://t.co/Pj1tOGTlh5 pic.twitter.com/xfP08jfF1p — TAK (@tak_dcxi) December
WebサービスにおけるCSS再設計で考えたこと
なぜこの記事を書こうと思ったか 配属されてからは、業務でCSSを書くといったら、Bootstrapのclass名を付与したり、機能追加の際にちょっと書くといったことだったのですが、大幅にサービス全体のCSSを見直さなきゃいけない機会があったので、どんなことを考えたのか書いておきます。 CSSのリファクタリングや再設計は工数がかかる上に、そこまで対価がない結構辛いことだと思います。また運用していて数年が経てば大体の場合がCSS設計は崩壊していきます...。 特に途中で気づいた、最初に決めておけばよかったということも多々あったので参考になればと思います。 前提条件 下記のような時に、この記事は役に立つのではと思って書いてます。 すでにあるWebサービスの大幅なデザイン改修がある 新しくCSSを書かなきゃいけないページが5ページ以上ある 既存のCSS設計を見なさなきゃいけない（CSSファイルが6
【iPhone】【Safari】【css】ボタンの角丸などの消し方 - zhuweichenの日記
ボタン類（<input type="button">や<input type="submit">など）の角丸をクリアしたい場合、 input[type="button"],input[type="submit"] { border-radius: 0; }↑↑を指定するだけでは、iPhoneのSafariではクリアされません！！ その為、下記cssの設定が必要です： input[type="button"],input[type="submit"] { -webkit-appearance: none; }そうすれば、ボタンのデフォルトcssが初期化されます（角丸以外もクリアされます。例えば、背景など）。 ※参考記事 [CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法 | コリス
CSSで変数（カスタムプロパティ）を使ってみよう
2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの
CSSアニメーションをワンポイントで取り入れてリッチなサイトにしよう - Qiita
エイチームライフスタイルアドベントカレンダー2017、9日目は株式会社エイチームライフスタイルのデザイナー @chika_1127 が担当します。 今回はCSSアニメーションについてのご紹介です。 本記事についての注意書き 今回の記事はCSSアニメーションの基本的な書き方を知っている方向けです 基本的なプロパティや使い方などは省略します 基礎的な記述について知りたい方は下記のページがオススメです CSSアニメーション 入門 CSSアニメーションの使いどころが分からない問題 ところでみなさん、CSSアニメーションをどういう場面で使っていますか？ 特設サイトやLPで使うもの、といったイメージがありませんか？ 世の中にはこれもCSSアニメーションなの！？ と驚くような複雑なCSSアニメーションなどもありますが、 そればかりがCSSアニメーションではありません。 プロモーションサイトのようなギミッ
最初にやっとかないと損をする！WordPressのビジュアルエディターにCSSを適用
いやー知りませんでしたよ。 WordPressのビジュアルエディターにＣＳＳが適用できるなんて。 (´・ω・｀) めっちゃ便利じゃないですか･･･ 振り返ると４～５ヶ月ぐらい気づかずに記事書いてました。 えらい損してましたよ。 結構、あちこちWordPressのサイトや書籍を読んだつもりだったんですけどね･･･。 だから、いちいち記事書いてはプレビューでCSS適用の結果を確認してました。 とんだ手間ですよ。 道化も道化。まさにピエロです。 (´・ω・｀) ええ、笑ってください。ハハ･･･。 もしもＣＳＳを適用できることをまだ知らない方がいたら、ぜひ参考にしていただきたい。 俺と同じわだちを踏まないためにも！ あ、ちなみに自分は、WordPressのテンプレートはSimplicityを使っております。 ＣＳＳを適用する手順 （１）まず、ワードプレスにログインして、管理メニューから［外観］→［
JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
HTML と CSS だけで Todo アプリを作りました。TodoMVC（今回デザインを使用使わせてもらいました）と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう？簡単に説明すると、HTML、CSS の一般兄弟セレクタ（~）、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること： Todo の追加（最大50件） Todo の完了 Todo の削除 フィルタリング（完了・未完了） 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと： ページリロード後の永続性の維持 「すべての Todo を完了にする（Mark all as done）」
CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ
CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。 来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこなせばいいだろうという方は、下記ページが参考になると思います。 Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト） CSS Gridで実装するヘッダ・フッタ・2カラ
BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。 画像1：BEM で命名されたコンポーネントの例 Block（ブロック） Block は、独立しており再
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri
![[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある](https://cdn-ak-scissors.b.st-hatena.com/image/square/222e57e0cb617f5924de9e159879efca2a68aa3e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017111110.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごめんなさいね。 - Lopan.jp
IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEB