UAスタイルシートとリセットCSSとは - 2023 - kojika17

2023/02/26 161 users リセットCSS KOJIKA17 UAスタイルシート 劇薬

以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話... 続きを読む

閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー

2022/03/06 455 users ウェブブラウザ ウェブページ全体 Firefox 別フォルダ

ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.... 続きを読む

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど | コリス

2020/12/07 271 users Flexbox コリス ブレークポイント フレームワーク デザ

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザ... 続きを読む

こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス

2020/08/25 192 users フェード コリス 点線 傾斜 CSS

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Bor... 続きを読む

CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス

2020/08/24 175 users コリス inpu button要素 input要素 CSS

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む

CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック | コリス

2020/07/16 171 users テクニック コリス 実装時 ロゴ画像 参考

ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログで... 続きを読む

[CSS] button要素のスタイルシート、最新テクニックを徹底解説 | コリス

2020/03/19 152 users コリス Button モーダル インタラクション CSS

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイ... 続きを読む

div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui | コリス

2019/09/18 149 users コリス 矩形 ユーザーインターフェイス class div要素

Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされ... 続きを読む

これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス

2019/09/13 85 users コリス interactions インタラクション アロー

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス

2019/09/10 86 users コリス Grid Flexbox 階層 CSS

flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Ga... 続きを読む

意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法 | コリス

2019/08/30 217 users コリス 文末 CSS 省略 ライセンス

テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-c... 続きを読む

CSSでアニメみたいに文字や画像を真っ二つ、斜めに斬るスタイルシートのテクニック | コリス

2019/06/03 56 users コリス 真っ二つ CSS テクニック アニメ

* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: hsl(0, 0%, 20%); } .wrap { position: relative; } .text { font-size: 20vw; line-height: .8; color: whitesmoke; text-transform: uppercase; font-weight: bol... 続きを読む

Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ | コリス

2019/05/28 58 users block display コリス Edge Safari

Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義され... 続きを読む

[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ | コリス

2019/05/09 59 users シャドウ グラデーション コリス バリエーション 山形

サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb ... 続きを読む

[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css | コリス

2019/04/09 63 users フレームワーク コリス 外部CSS head内 CSS

シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSのフレームワークを紹介します。 class付与を一切必要としないスタイルシートで、HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できます。 water.css water.... 続きを読む

[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート | コリス

2019/03/07 67 users コリス CSS グラデーション 実装 美しいエフェクト

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。 ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。... 続きを読む

[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css | コリス

2019/02/22 64 users コリス デフォルト select要素 CSS ブラウザ

フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。 フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssの... 続きを読む

[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート | コリス

2019/02/18 91 users ビューポート コリス RFS プリプロセッサ Stylus

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(R... 続きを読む

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング Normalize.css CSS 差異 案件

今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む

レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17

2018/12/28 113 users コーディング Normalize.css CSS 差異 案件

今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む

[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック | コリス

2018/11/02 145 users セレクタ コリス CSS テクニック 条件分岐

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？ CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介します。 Using Feature Detection, Conditionals, and Groups with Selectors 下記は各ポ... 続きを読む

カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法 | コリス

2018/10/02 102 users system コリス ボーダー アクセント 保守

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンス... 続きを読む

1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.css | コリス

2018/09/20 345 users コリス NAV header article HTML要素

Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Trashy.css Trashy.css -GitHub Trashy.css... 続きを読む

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリス

2018/09/11 153 users コリス jQuery block CSS a要素

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでク...記事の続きを読む 続きを読む

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

2018/08/28 230 users CSSハック レスポンシブ対応 コリス 実装方法 CSS

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create resp... 続きを読む