[B! css][あとで読む] mas-higaのブックマーク

CSSだけでif～else文と同じことができる！しかもすべてのブラウザでサポートされています

CSSでif～else文が使えたら、と思ったことはありませんか？もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。 CSSでif～else文を実現するには...記事の続きを読む

mas-higa 2024/03/13

リンク

これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン排他的アコーディオンのポリフィルアコー

mas-higa 2024/01/12

リンク

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

Webエンジニアを始めて丸2年が経ちました。複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。はじめに長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。各項目について、自分がその判断に至った「理由」を説明していますので、理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような初学者向けではないことご了承ください。一般的と思われるキ

mas-higa 2022/04/18

リンク

キーボード操作を意識したHTML/CSSコーディング

この記事は「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない）ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

mas-higa 2020/12/07

リンク

【第3弾】少しのコードで実装可能な15のCSS小技集

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミング CSSで計算式を書くテキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応