エラーの発見や回避、フォーマットの一貫性、重複の回避。チームでCSSを書くときにの生産性とメンテナンス性をあげたいときに便利なツールが「Stylelint」です。特徴と導入方法を解説します。 フロントエンド開発はすでに円熟期に入っており、コード品質管理ツールの使用も増えてきました。このことがよく表れているのは、JavaScriptのエコシステムです。JavaScriptにおけるLintツールは、フロントエンド開発者がコードの正しい構成と一貫性を保証するために使われます。ツールに関する最近の調査では、開発者の大多数がJavaScriptでLintツールを使っていると答えました。 CSSコーディングでは、コード品質管理ツールの使用に向けた動きはいくぶん緩やかで、同様の調査では開発者の大半がワークフローでCSSのLintツールを使っていないと答えました。 この記事では、スタイルシートにおけるli
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
TL;DR 「stylelint 使い方」での検索が結構だったものの対象の記事がなくなんか申し訳ないので作ってみました。 結構入れ方や使い方が色々ありますのでフォローアップや追記希望等あれば、ContactかメニューにSNSが貼ってありますのでお気軽にお問い合わせください。 最終のサンプルはこちらにありますので、必要であれば参照してください。 https://github.com/isoppp/isoppp-com-examples/tree/master/how-to-use-stylelint また、設定ファイルの記述等はgithubでファイル名で検索して人のコードをパクる方法がおすすめです。 エラーが出て動かない場合も人のファイルを見てみると書き方が間違っていた、等結構あります。 対象読者 stylelintを使ったことがない方 npmの基本はなんとなく分かる方 cliコマンドに抵抗
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が大人気ですね！ 単一責任の原則でCSSの管理から解放されます。 tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。 慣れていないとクラス名を調べる回数が多くなり、時間がかかります。 tailwind CSSに慣れている方でも慣れていない方でも時間を節約できるツールをご紹介します。 tailwind components – コンポーネント集 ボタン、フォーム、ナビゲーション、カード、ウィジェット、テーブル、ページのtailwind CSSで装飾されたコンポーネントをコピペで使えます。 https://tailwindcomponents.com/ Tailwind Toolbox – コンポーネント集 �tailwind CSSで装飾されたテンプレートやコンポーネントがコピペで使えます。 http
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,cts,mts} in
Bootstrap CSSフレームワークを使う上で、これを選定対象からはずすことはないでしょう。 それくらい多くの技術者によって使用され開発されてきました。 2011年にTwitterで開発され使用されたフレームワークであり、フロントエンド開発者がレスポンシブWebデザインを非常に簡単に開発できるようにしてくれました。 Bootstrapは公開されたから非常に多くのアップデートを重ね、最新のプロジェクトのCSSデザインをサポートするように進化を重ねてきました。 フロントエンド開発者は、その進化によって生まれた複数の機能を無料で使用することができます。 メリット 最も人気のあるCSS フレームワーク 今現在、最も利用されているCSS フレームワークと言って差し支えないと思います。それゆえプロジェクトで遭遇した不具合の解決策をすぐに見つけることができるます。多くのフロントエンド技術者にとってこ
「メニューの上にカーソルを乗せるとサブメニューが表示される」というよくある動き。 CSSのみ・CSSとjQueryを組み合わせる・jQueryのみなどなど、色々な方法があると思いますが、みなさんはどのように実装していますか？ 対応ブラウザやレスポンシブの有無などによっても変わってくると思いますが、先日、自分がよく使う方法とは違ったCSSのみでの実装方法を目にしたのでまとめてみました。 【この記事を書いた人】 Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細 サンプル 以下のような動きを想定したHTMLとCSSを作成します。 CSSによるhoverのデモはこちら 共通HTML <header class="sample01"> <ul> <l
ホームWeb CSS もっと見る pragby pranktone ありきたりな日常と それとない非日常を 紡ぐ記録 SKIP
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
スマートフォンサイトでよく使われるメニューに三本線で表示されている「ハンバーガーメニュー」が挙げられます。 ハンバーガーメニューを実装するのはCSSとJavaScript、もしくはjQueryを使用することが多いですが、今回はもっと手軽にCSSのみで実装する方法を紹介いたします。 まずハンバーガーメニューとはスマートフォンサイトなどで用いられるメニューです。 三本線のアイコンがハンバーガーに見えるためそう名付けられました。この三本線のボタンをタップするとメニューが展開し、もう一度タップするとメニューが収納されます。 ハンバーガーメニューについては弊社ブログの過去記事「ハンバーガーメニューのメリット・デメリット」に詳しくまとめてありますのでご覧ください。 コーディングで実装する際は、この三本線のボタンとメニューの二つの要素を記述します。 ボタンが一度タップされているかどうかを判断し、一度タッ
コーディング作業で要素を横並びにする際に、display:inline-block;が使われていることがありますが、 結論から言うと、PCページで横幅いっぱいに要素を横並びにする場合は、その方法は使わずfloatで横並びにした方が良いかと思います。 なぜなら、ネット上でよく見かける情報通りに記述すると、safariブラウザで崩れる不具合が起きるからです。 また、その崩れを修正する方法もありますが、letter-spacingでのマイナス値を測って設定する煩わしさもあり、今度はIE7で崩れもおきます。 下記にdisplay:inline-block;を使ってsafariでも崩れない書き方を残しておきますが、この方法は、 ・IE7の対応をする必要がない ・横並びにしたい要素の親要素に左右の余白がある（pcページ） ・中央寄せしたい 場合にのみ使用するのが良いかと思います。 ちなみに、スマホだと
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ページを開く
