CSSのデバッグは、けっこう難しい
Web制作で一番悩ましいのが、期待通りに動作しないことだと思います。 CSSも簡単なものであれば、すぐに原因が特定できて修正できますが、デバッグするのが難しい時もあります。 そんな事例を紹介します。 CSS debugging is hard by Vincent De Oliveira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのデバッグは難しい CSSはデバッグするのが難しい時があります。Appleのサイトを例に見てみましょう。 blink-devで先日、backdrop-filterの実装についてアナウンスされました。 backdrop-filterとは、要素の背景（その下にあるもの）にフィルタを適用する本当に素晴らしいCSSのプロパティです。このプロパティはすでにSafariとEdgeに実装されており、Chr
[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコード ブレ
![[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d19eb7832f21ddf4cde99e17c015e45e093986e9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021910.png)
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
CSSグラデーションによるリンクの下線
CSSグラデーションを使った太くならないリンクの下線は、Mediumの詳細な記事やterkel.jpのその解説とも言える記事を見てそのうちやってみようと思っていた。フォントサイズが大きい時に下線が2pxや場合によっては4pxくらいで引かれるようになるのは見た目に結構な負荷を与えるので、常に1pxで引きたいといった希望を持ってる人は多いはずだ。 このウェブサイトでは以下の要件を満たすような感じで実装した。 常に1pxで下線を引く 文字サイズに依存しない なるべくシンプルな実装 a { background-image: linear-gradient( transparent 0, transparent 50%, rgb(91, 172, 208) 50% ); background-position: 0 1.1em; background-repeat: repeat-x; backg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
