Chrome 116 デベロッパーツールの新機能が便利！ 正常に読み込まれなかったスタイルシートのデバッグが簡単に

2023/08/22 11 users ライセンス 改良 デバッグ 下記 多く

先日リリースされたChrome 116 デベロッパーツールの新機能で、正常に読み込まれなかったスタイルシートを簡単にデバッグできるようにするための多くの改良が加えられました。 What's New in DevTools (Chrome 116) 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてと... 続きを読む

CSSのコード品質向上のためのStylelint入門 - ICS MEDIA

2023/05/25 48 users CSS ICS MEDIA lint コード品質向上 重複

Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になり... 続きを読む

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.... 続きを読む

ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 | かちびと.net

2021/02/07 10 users Typography CSS変数 layout colors

Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられ... 続きを読む

株式会社カプコン：カプコン動画ガイドライン

2021/01/06 9 users 本文 株式会社カプコン 先頭 ブラウザ JavaScript

ページの先頭です。 ヘッダコンテンツをとばして本文へジャンプします。 株式会社カプコンのWebサイトではスタイルシートとJavaScriptを使用しています。 ご使用中のブラウザでは、これらの機能が一時的に切になっているか対応しておりません。 スタイルシートとJavaScriptが適応された状態とは表示が異なりますが情報は... 続きを読む

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

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

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

CSSのスゴ技！美しいグラデーションのボーダー、角丸や半円のテクニックを使用したチケットを実装する方法 | コリス

2020/11/10 12 users コリス 半円 グラデーション CSS ボーダー

CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves... 続きを読む

コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス

2020/11/09 16 users コリス ジグザク 罫線 CSS コピペ

ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に...記事の続きを読む 続きを読む

こんなことができるんだ！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のcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール | コリス

2020/05/22 19 users 可変 Calc ワイドスクリーン コリス 最小値

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語... 続きを読む

幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator | コリス

2020/05/11 19 users ジェネレーター コリス グラデーション CSSグラデーション

ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出...記事の続きを読む 続きを読む

CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス

2020/04/23 26 users ジグザク コリス 罫線 グリッド ドット

ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与える...記事の続きを読む 続きを読む

サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス

2020/04/12 14 users ツリービュー コリス ul要素 DOM構造 CSS

サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際... 続きを読む

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

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

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

CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css | コリス

2020/03/09 18 users トグル Git iOS コリス class

シンプルなHTMLに、実装が面倒なトグルをclassを加えるだけで簡単に実装できるスタイルシートを紹介します。 iOSやAndroidのスタイルをはじめ、チェックやスクエアなど、さまざまなデザインのトグルを簡単に実装できます。トグルは拡大縮小にも対応しているので、非常に便利です。 MoreToggles.css MoreToggles.css -Git... 続きを読む

CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック | コリス

2020/03/04 33 users マージン div要素 コリス CSS flexbox デモ

div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモを... 続きを読む

音楽、数学、タイポグラフィ / 鈴木 丈 | ÉKRITS / エクリ

2020/02/20 14 users ブレット エクリ KRITS タイポグラフィ カウンターパンチ

タイポグラフィとしてのスタイルシート タイポグラフィでは、文字や単語は機械的な手法で生み出されます。……（サイズや位置などの）情報は他の人に渡すことができ、別の機会にまったく同じものを再現することもできます。 フレット・スメイヤーズ『カウンターパンチ※1』 タイポグラフィとは、人の手によって直接描かれる... 続きを読む

CSSもこれなら簡単！ニューモーフィズムのスタイルシートを生成できるジェネレーター -Neumorphism.io | コリス

2020/02/09 13 users コリス ジェネレーター ニューモーフィズム シャドウ CSS

先日紹介したニューモーフィズムの繊細なデザインでつくられたフォームのように、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーターを紹介します。 カード...記事の続きを読む 続きを読む

CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック | コリス

2020/01/17 32 users コリス 美しいグラデーション UIデザイン スマホアプリ

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for mor... 続きを読む

HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート | コリス

2019/10/30 40 users コリス Attribute 弱点 HTML 要素

ページ上の要素、例えばメニューの中身などの表示・非表示を切り替える必要がある時があります。実装方法はいろいろありますが、要素を非表示にする一番簡単な方法はHTMLのhidden属性です。 HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシートを紹介します。 The 'hidden' Attribute ... 続きを読む

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にインタラクション... 続きを読む