[B! CSS] [3ページ] opparaのブックマーク

How to style broken images with css

oppara 2021/03/10

リンク

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。ブレイクポイントは特定のデバイスの画面サイズを基準にしない以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。主流のデバイスのサイズなんてものは時間が経てば変化する。昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

oppara 2021/02/25

リンク

【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法

未経験からコーダーとして仕事をし始めて2年が経過しました。最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。この記事の前提コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい

oppara 2021/02/25

css
sass

リンク

ECSSの概要と考え方のまとめ - Qiita

ECSSというOOCSSとはほとんど反対のアプローチをするCSSの構成案があります。製品によってデザインが大きく異なるWebサイトに向いているのかなと個人的には考えています。あるいは、うまく共通化をすることができれば大規模なWebサイトにも適応可能ではないかなと期待しています。 Enduring CSS 案件で使いたいなと思ったのですが、あまり広く知られているものでもないですし、検索しても該当する記事はまだまだ少なかったりします。公式サイトを読むのが一番いいのですが、ボリュームがあり、さらに英語であることを考えるとそれも難しい。というわけで、ECSSの概要と考え方を日本語で比較的短い文章でまとめることにしました。このドキュメントの目的はECSSを詳しく調べたくなったり、実際に使い始めるためのきっかけになることです。以下の文章の最新版はGitHubにアップしています。 ECSS End

oppara 2021/02/22

リンク

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。今回は、CSSの設計手法に関する基本と、3つの人気のCSSの設計手法をご紹介したいと思います。メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう

oppara 2021/02/22

リンク

CSSのエスケープ方法

(Last Updated On: 2022年9月28日) プログラムからCSSファイルにデータを書き込む場合、エスケープしないと不正なCSSになってしまう場合があります。現在のブラウザはCSSでプログラムを実行する仕様が削除されているのでコード実行脆弱性の問題になりませんが、不正なCSSはセキュリティ問題（クリックジャック等）になる場合もあります。 HTML内のCSSの場合、エスケープしないとJavaScriptの実行を許してしまいます。HTMLエスケープでJavaScript実行は防げますが、不正なCSSのインジェクションを防ぐにはCSSエスケープが必要です。適切に処理しないとCSSキーロガーを仕込まれて情報を盗まれたりします。 CSSのエスケープ仕様 CSSのエスケープ仕様の概要はW3Cの https://www.w3.org/International/questions/qa-e

oppara 2021/02/15

css
escape

リンク

CSSにおけるマージンの相殺を徹底解説

CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに垂直マージンのみが相殺される隣接する要素のみが相殺されるより大きなマージンが勝つ入れ子は

oppara 2021/01/22

css
margin

リンク

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。ラインが一方向にスーッと通り過ぎるような感じです。

oppara 2020/12/15

リンク

次世代のフォント技術　バリアブルフォントの世界 - ICS MEDIA

補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例にバリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記

oppara 2020/10/09

リンク

How to Detect When a Sticky Element Gets Pinned

oppara 2020/10/09

リンク

CSS設計において特に大切にしている思想をまとめてみた

Zennの投稿は初です。TAK(@tak_dcxi)です。今回投稿するのは自分なりのCSS設計のメモ。ある程度の規模感のサイトでのCSS設計において、僕がいくつか大切にしている思想の中から特に重要だと思っているものをピックアップしてまとめてみた。「ある程度の規模感」とは以下のようなイメージ。テンプレートの数（※サイトのページ総数ではない）が10枚以上ローンチ後もPDCAが定期的に行われ、その都度サイトの更新や改修が行われるようなWebサイトサイトの更新や改修は自分以外のスキルを定義しないコーダーやエンジニアによって行われる最後の「スキルを定義しないコーダーやエンジニアによって更新や改修が行われる」というのがポイントで、つまりスキルに大きな幅がある、とりわけ未経験入社の方のようなマークアップの知識が乏しい方が更新する可能性があることを前提としている。場合によっては急遽量産で知識の

oppara 2020/10/02

css

リンク

filters.css - CSS only library to apply color filters.

oppara 2020/09/29

css
filter

リンク

コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends

Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。背景画像を書

oppara 2020/09/01

リンク

flexプロパティの実践的な使い方を徹底解説

Webページやスマホアプリのレイアウト・コンポーネントを実装する際に知っておくと便利なflexプロパティの基礎知識と実践的な使い方を紹介します。スペースいっぱいにアイテムを伸縮させて配置したり、画像・アイコンとテキストを並べて配置したり、フォームの入力欄とボタン、複数カラムの垂直方向の揃えなど、実践的な使い方を徹底解説です。 Digging Into the Flex Property by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに flex-growプロパティとは flex-shrinkプロパティとは flex-basisプロパティとは flexのショートハンドプロパティ flexプロパティの便利な使い方 flexのショートハンドを勧める理由 flexプロパティの使用例 flexプ

oppara 2020/08/28

css
flex

リンク

More Control Over CSS Borders With background-image | CSS-Tricks

oppara 2020/08/25

リンク

あなたのCSS力の助けになってくれる素晴らしいWebサイト12選 - Qiita

以下はAman Varma( Twitter / GitHub / stackoverflow / Webサイト )による記事、12 Super websites to help you with your CSS probl ems ☺の日本語訳です。 12 Super websites to help you with your CSS probl ems ☺ これらは、あなたのCSSをより楽しく簡単に装飾してくれる、そしてもしかしたらあなたが躓いているCSSの問題の多くを解決してくれるかもしれないWebサイトたちです。 1. Pixel art あなたもきっとピクセルアートが好きに違いありません。 90%の人はpngでピクセルアートを書いてサイトに追加していると思いますが、でもそのピクセルアートをCSSで書けたらもっといいと思いませんか？そこでPixel Art to CSSです。書

oppara 2020/08/22

リンク

::beforeと:beforeはどっちが正しい書き方なんだっけ？

短い答え ::beforeはCSS3の構文 :beforeはCSS2の構文ということで、CSS3の::beforeを使う。ていうか、そっちが推奨されてます。以上です😎 ほんとにダブルコロンのほうでいいの？その昔、CSS2しかサポートしない古いブラウザ（IE8以下）対応のためにシングルコロンの:beforeを使うこともあったようですが、2020年8月現在でIE8のサポートが必要なことって、もうないですよね？あるのかな？ないですよね？シングルコロンの:beforeは最新のブラウザでもサポートされていて使えますが、特異な理由でIE8をサポートするなどでないかぎり、ダブルコロンで記述するのが良さそうです。そもそも、2つのコロンで記述する擬似要素と1つのコロンで記述する擬似クラスを区別するために、CSS3で::beforeが導入されたそうです（MDNの記事中のメモを参照）。ダブルコ