TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
Nuxt ver.2 へプロジェクトを移行したときにCSSで対応したこと（PostCSS編） - Qiita
前提条件 Nuxtのver.1を使って個人的なプロジェクトを作っていました。SSRは使わずSPAモードでGenerateして、静的ファイル一式をサーバーにアップする形です。 しばらくプロジェクトを進めて、一旦区切りが出来たので、使っているモジュール（node_modules）を全てアップデートしました。その中でも、すんなりとは行かなかったNuxtのアップデートについて書きたいと思います。 アップデートしたバージョン：1.4.1から2.2.0へ アップデートしたら起きたこと 私はNuxtでスタイリングするときに、NuxtのデフォルトであるPostCSSとcssnextの組み合わせで書いていました。ですので、nuxt.config.jsにはCSS周りの設定は入れていません。 各コンポーネントのスタイリングは、下記のようにvueファイルに書いていました。
【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
OOCSSについて調べた - Qiita
OOCSSとは object oriented CSSの略。 BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。 何やら原則があるらしい。 原則1 再利用できるようにする 転載元 https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ before # button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } # widget { width: 500px; min-height
CSSだけでお絵描き（CodePen） - Qiita
Qiita初投稿になります。よろしくお願いします。 お手柔らかに...( ;∀;) CSSだけでお絵描き CSSだけで絵を描いている方をちらほら見かけまして え、おもしろ、私もやりたいと思い初挑戦してみました。 この記事は記録用として書いています。タメになることはないかも... SCSSで書いてます。 CodePen HTMLとかCSSとかJSをウェブ上で書けるサービス。 書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。 https://codepen.io/ CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。 今後もお世話になりそう。 ということで、アンパンマン いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。 目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です） See the Pen CSS Anp
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その１ - Qiita
本記事は、筆者がチームに新人きた際に作ったHTML/CSSの練習課題の改訂版です。 狙い 課題は以下の3つを目標に作成しました。 BEM記法に慣れてもらう。 パーツ同士が疎結合なクラス設計を意識できるようになる。 保守性を大事にするマインドを身につけてもらう。 対象 HTMLとCSSがとりあえず書ける初心者から中級者への一歩目を踏み出したい人 やくそく HTMLタグは正しく使う（brタグ連打で間隔を調整したり、なんでもdivタグで済まさない）。 レスポンシブに作る（PC用とSP用にそれぞれHTMLを書いて画面幅によってdisplay: none;するのは禁止）。 クラス名はBEMに従う。 装飾にidは使わない。 タグに直接にスタイルを指定しない（ただし例外もある）。 !importantは絶対に使わない。 Javascriptで高さや幅を制御するのは禁止。 今回はモダンブラウザ(chrom
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その２ - Qiita
@media all and (max-width: 767px) { .panel__header { display: flex; align-items: center; } .panel__header__icon { flex: 0 0 auto; margin-bottom: 0; } .panel__header__icon > img { width: 60px; } .panel__header__text { flex: 1 1 auto; margin-left: 15px; text-align: left; } .belt { min-width: 100%; } .belt__content { width: 100%; padding: 30px 15px; } } .panel__header__iconのflex-basisや.panel__header_
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その４ - Qiita
その３では、与えられた課題をついにクリアし、しかも急な追加要求までこなすことができました。 これであなたも立派なフロントエンドエンジニア、とはすぐにはいきません。 IE11での評価はしましたか？ さあIE対応だ IE11のサポートが切れた未来にこれを読んでいる人にこの記事は必要ありません。 きっと素敵な世の中になっていることでしょう。 さて2018年現在、IE11をサポートしなければいけない現場がほとんどでしょう。 もしサポートはChromeだけでいいよと言われている幸運な人がいたらその人もこの記事を読む必要はありません。 これまではChromeなどのモダンブラウザで表示確認をしてきたと思いますが、今度はWindowsのIE11で確認してみてください。 きっとどこか崩れたでしょう？ 筆者のコード例も見事にIE11で崩れています。PCサイズで確認していますが、まるでSP時のような縦積みになっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
haml（html）でfloatプロパティを使って要素を左右に配置する方法。 - Qiita
Nuxt.jsのプロジェクトにSassを導入する方法 - Qiita
Sass 入門 - Qiita
Nuxt.jsでSassの変数やMixinsを管理する（resources-loader） - Qiita
Sassでeachを用いた色管理でハマった（Always quote color names when using them as strings） - Qiita
【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー） - Qiita
node.jsのgulpでブラウザsyncとscssの自動コンパイル - Qiita
非フロントエンドエンジニアのためのCSS設計入門（OOCSS） - Qiita
HTML/CSS初心者から中級者への一歩を踏み出す練習課題 その３ - Qiita
Node.js+gulpを利用したSass利用環境の構築 - Qiita
Nuxt(v2.4未満) + Typescriptセットアップ - Qiita
