チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ
エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フロントエンド開発者がコードの正しい構成と一貫性を保証するために使われます。ツールに関する最近の調査では、開発者の大多数がJavaScriptでLintツールを使っていると答えました。 CSSコーディングでは、コード品質管理ツールの使用に向けた動きはいくぶん緩やかで、同様の調査では開発者の大半がワークフローでCSSのLintツールを使っていないと答えました。 この記事では、スタイルシートにおけるli
stylelintの導入とVS Codeの設定の方法 - Qiita
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
stylelintの使い方 動かして体験してみるまで | isoppp.com
TL;DR 「stylelint 使い方」での検索が結構だったものの対象の記事がなくなんか申し訳ないので作ってみました。 結構入れ方や使い方が色々ありますのでフォローアップや追記希望等あれば、ContactかメニューにSNSが貼ってありますのでお気軽にお問い合わせください。 最終のサンプルはこちらにありますので、必要であれば参照してください。 https://github.com/isoppp/isoppp-com-examples/tree/master/how-to-use-stylelint また、設定ファイルの記述等はgithubでファイル名で検索して人のコードをパクる方法がおすすめです。 エラーが出て動かない場合も人のファイルを見てみると書き方が間違っていた、等結構あります。 対象読者 stylelintを使ったことがない方 npmの基本はなんとなく分かる方 cliコマンドに抵抗
UIkit Plus α
UIkit Plus α 最新バージョン v1.0.3 UIkit3と合わせて取り込むことで、少し拡張(使用できるCOMPONENTSを追加)することができます。 追加されるCOMPONENTSについては以降のサンプルを参照ください。 ※UIkit 3.3.0で動作確認を行っています。 日頃の開発の中で今後も使いそうだなと思ったものをCOMPONENT化しています。(独断と偏見によりｗ) 同じくUIkitを使用する方の手助けになれば幸いです。 まだまだCOMPONENTの数は少ないですが、今後も随時COMPONENTを追加していく予定です。 Installation使い方 UIkit3と合わせて取り込んでください。 jsDelivrのCDNを使用することができます。 CSS <!-- uikit --> <link rel="stylesheet" href="https://cdn.js
【時間を節約】tailwind CSSで爆速開発のためのツール集 | りーほーブログ
tailwind CSSが大人気ですね！ 単一責任の原則でCSSの管理から解放されます。 tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。 慣れていないとクラス名を調べる回数が多くなり、時間がかかります。 tailwind CSSに慣れている方でも慣れていない方でも時間を節約できるツールをご紹介します。 tailwind components – コンポーネント集 ボタン、フォーム、ナビゲーション、カード、ウィジェット、テーブル、ページのtailwind CSSで装飾されたコンポーネントをコピペで使えます。 https://tailwindcomponents.com/ Tailwind Toolbox – コンポーネント集 �tailwind CSSで装飾されたテンプレートやコンポーネントがコピペで使えます。 http
Tailwind CSS IntelliSense - Visual Studio Marketplace
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting. Installation Install via the Visual Studio Code Marketplace → In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.{js,cjs,mjs,ts} in your wo
社畜エンジニアがおすすめする2022年トレンドのCSSフレームワーク - wiblok
Bootstrap CSSフレームワークを使う上で、これを選定対象からはずすことはないでしょう。 それくらい多くの技術者によって使用され開発されてきました。 2011年にTwitterで開発され使用されたフレームワークであり、フロントエンド開発者がレスポンシブWebデザインを非常に簡単に開発できるようにしてくれました。 Bootstrapは公開されたから非常に多くのアップデートを重ね、最新のプロジェクトのCSSデザインをサポートするように進化を重ねてきました。 フロントエンド開発者は、その進化によって生まれた複数の機能を無料で使用することができます。 メリット 最も人気のあるCSS フレームワーク 今現在、最も利用されているCSS フレームワークと言って差し支えないと思います。それゆえプロジェクトで遭遇した不具合の解決策をすぐに見つけることができるます。多くのフロントエンド技術者にとってこ
CSSのhover(マウスオーバー)でサブメニューを表示/非表示させる4つの方法 | KERENOR { ケレンオール }
「メニューの上にカーソルを乗せるとサブメニューが表示される」というよくある動き。 CSSのみ・CSSとjQueryを組み合わせる・jQueryのみなどなど、色々な方法があると思いますが、みなさんはどのように実装していますか？ 対応ブラウザやレスポンシブの有無などによっても変わってくると思いますが、先日、自分がよく使う方法とは違ったCSSのみでの実装方法を目にしたのでまとめてみました。 【この記事を書いた人】 Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細 サンプル 以下のような動きを想定したHTMLとCSSを作成します。 CSSによるhoverのデモはこちら 共通HTML <header class="sample01"> <ul> <l
CSS | prag by pranktone -ありきたりな日常とそれとない非日常を紡ぐ記録。-
この記事は2019年10月30日に書かれたもので、内容が古く現在では推奨されていない方法の可能性もありますのでご注意ください。 CSSとcheckboxを使ってアコーディオンメニューを実装するサンプルです。 展開する要素の高さが変わっても（テキストの量が増えても）、大丈夫な作りにしました。 極力自然なアニメーションを心掛けたのですが、JavaScriptで実装した方が動きは滑らかな気がします。 別記事のjQueryのslideToggleを使ってアコーディオンを実装するサンプルと、ネイティブのJavaScript（脱jQuery）でアコーディオンメニューを実装するサンプルとの比較も兼ねて作ったので、htmlは似た構成にしています。 html <input type="checkbox" name="accordion" class="accordion-checkbox" id="acco
下へスクロールすると隠れて、上にスクロールすると表示されるヘッダー | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
JavaScript不要！CSSだけでハンバーガーメニューを実装する方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ
inline-blockの隙間をなくす方法 - Qiita
display:inline-blockで要素を並べると余計な隙間ができてしまうので、 簡単に隙間をなくす方法を紹介します。 親要素にfont-size:0;を指定する 横並びにしたい<li>タグを1行で書いたり、letter-spacingを調整したりなど、 いくつかの解決方法がありましたがこの方法が一番楽でした。 display:inline-blockの隙間問題はテキストの改行が原因で起こるので、 inline-blockを使った要素の親要素にfont-size:0;を指定すると改善されます。 <ul class="wrap"> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテキストテキストテキスト </li> <li class="inline-block"> テキストテ
Chromeで文字コード確認・変更ができない！？ そんな時の解決方法！ | ヤビブロ
コーディング作業で要素を横並びにする際に、display:inline-block;が使われていることがありますが、 結論から言うと、PCページで横幅いっぱいに要素を横並びにする場合は、その方法は使わずfloatで横並びにした方が良いかと思います。 なぜなら、ネット上でよく見かける情報通りに記述すると、safariブラウザで崩れる不具合が起きるからです。 また、その崩れを修正する方法もありますが、letter-spacingでのマイナス値を測って設定する煩わしさもあり、今度はIE7で崩れもおきます。 下記にdisplay:inline-block;を使ってsafariでも崩れない書き方を残しておきますが、この方法は、 ・IE7の対応をする必要がない ・横並びにしたい要素の親要素に左右の余白がある（pcページ） ・中央寄せしたい 場合にのみ使用するのが良いかと思います。 ちなみに、スマホだと
CSS初期値一覧なチートシート - Qiita
CSSを書いていて、設定してしまった値を戻したいことはよくあることだと思います。 戻したくてGoogle検索してみても、reset.cssやブラウザデフォルトCSSがヒットしてなかなか思うように見つかりません。そこで一覧を作成しようと思いました。 適当にググってみて、初期値の一覧は見つかったのですがCSS3も含めたものは見た感じなかったので一覧を作成しました。 参考 : Mozilla CSS reference ※ 初期値のようなもの一覧です。colorなどの定まっていないもあります。 ※ 必ずしも正しいとは限りません。 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; anima
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/m49nn/pen/YzXGpKg
GitHub - zzseba78/Kick-Off: UIkit 3 Starter Layout / Templates - Quick start for your UIkit 3 project!
GitHub - playree/uikit-plusa: UIkit Plus α
Tailwind CSS Cheat Sheet
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
ブラウザ別のCSSハック | ねたまめ.com
