カオスになりがちなCSSと向き合ってみた - Qiita
機能追加や既存機能の修正、デザイン変更など、プロダクト開発やサイト制作をしていると、完全分業制ではない限り、デザイナーやコーダーだけでなくアプリケーションエンジニアもCSSに触れる機会があります。 実際に私が関わるプロジェクトでは、CSSを聖域扱いにしていないので、開発チームの誰もが必要に応じて触っています。 ですが、CSSはカオス化の危険性を多分に含んだ、ゆるーい言語なので取り扱いには注意が必要なのです。 カオスで汚いCSS!? 以下のどれか一つでも心当たりあれば、高確率であなたのCSSはカオス化しています... スタイルの上書き数が多い プロパティ順がぐちゃぐちゃ どれを変更すれば良いかがわかりにくい 1. スタイルの上書き数が多い Chromeの開発ツールで見ると、プロパティに打ち消し線が引かれて、別の箇所で上書きされていることがわかります。 normalize.css や rese
GAS ビギナーが GAS を使いこなすために知るべきこと 10 選 - Qiita
はじめに Google Apps Script (GAS) は Web ブラウザ上の JavaScript とも Node.js とも環境が異なります。その違いや、 GAS 特有の機能を理解するとさらに開発が捗るので、それらをこの記事で紹介しようと思います。 Tokyo GAS で 5 分 LT した内容です。 スライドはこちら > GAS ビギナーが GAS を使いこな すために知るべきこと 10 選 ※より網羅的で最新の情報を得たい方は DevFest 2020 の登壇動画 Google Apps Script 入門 2020 をご覧ください。 1. ローカル環境で開発する GAS を好きなエディタで開発したり、ローカルで開発したものを github に上げたりしたくなる。 Google ブログの記事 Apps Script による高度な開発プロセス で紹介されているが、 node-g
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
あなたの知っている正規表現はもう古い！ 正規表現の新常識（ES2018編） - Qiita
2018年1月23日から25日にかけて、TC39の第62回ミーティングが行われました。TC39のミーティングでは、提案されているECMAScriptの新機能 (proposal) について審議し、各proposalのステージの移動を決定します。 今回のミーティングでは正規表現に関する幾つかのproposalがStage 4になりました。Stage 4になったproposalはES2018に組み込まれ、JavaScript (ECMAScript) に正式採用ということになります。 この記事では、JavaScriptに追加された正規表現の4つの新機能を紹介します。 s (dotAll) flag for regular expressions Proposal: https://github.com/tc39/proposal-regexp-dotall-flag 正規表現の新たなフラグとし
CSSのスコープ - Qiita
この記事の内容についてのほとんどが対応ブラウザの少ないものなので、現段階でそのまま実際に使えるものではない。Polymerで使用されているCSSを初見でわりと理解できなかったかつての自分用メモです。Polymerの解説ではなくて仕様の整理なので注意。 scoped属性 これは直感的でわかりやすくて、HTML内部に直接style要素を挿入してscoped属性をつけるだけ。scoped属性をもつ要素はフローコンテンツが許容される最初の子要素である必要があって、場合によってはそのstyle要素をラップする親要素が必要になることもある。 <p>この文章にはスタイルが適用されません。</p> <div> <style scoped> p { color: red; } </style> <p>この文章は文字が赤くなります。</p> </div> 嫌がらせ以外で誰が使うんだろうかとおもっていたんだけど
React、Angularになじめなかった僕に手を差し伸べてくれたVue.js - Qiita
ギークハウス Advent Calendar 2016の12月２２日の記事です。 他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。 なぜVue.js？？ 普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚... ↓ しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。 ↓ いろいろ、ググって調べてみると、ES6、Babel、Reactふむふむ...🤔 ん？？ Webpack? JSX?? Flux?? Redux?? 「落ち着け！とりあえず日本語でOK」状態。。正にこの記事で書かれている状態そのものでした。 ↓ Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーショ
スマート家電も赤外線家電もGoogle Homeでまとめて操作 - Qiita
Google Homeに声をかけるだけで、赤外線では操作できないスマート家電も、赤外線でしか操作できない赤外線家電も、まとめて操作できるシステムを開発しました。 複雑な操作も簡単に実現できるので、シンプルにスマートホームを構築できます。 （他のシステムでは、家電のON/OFFのような単純な操作しかできなかったり、複雑な操作のためには複雑怪奇な設定が必要だったりします。） 「初心者でもできた！」という報告もたくさん頂いているので、ぜひお気軽にお試しください。 できること 「OK Google、行ってきます」の一言で、スマート家電も、赤外線家電も、まとめてOFFにする 「OK Google、暖房 22 度」で、エアコンの設定温度を 22 度にする 「OK Google、エアコンを 6時半 につけて」で、6時半 にエアコンをつける 「OK Google、エアコンを 7時間後 につけて」で、7時間
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
11ヶ月間でTOEICスコアを300点から835点に上げた英語学習法 - Qiita
ということで11月で835点を取ることができました。 2017/09でいったんスコアが下がったのは結構へこみました。(まあTOEICの点数は運もあるのでプラスマイナス50点くらいの揺れはでると思います。) 学習戦略 英語上達完全マップ 実は英語上達完全マップどおりには勉強しませんでした。英語上達完全マップではボキャビルの勉強は後のほうでいいと書かれていましたが、TOEICのスコアを順調にあげるためにはボキャビルは最初の方にやったほうがいい気がして、4ヶ月後くらいにはTOEICの教材を中心に勉強しました(英語上達完全マップ的にはTOEIC用の勉強するのは邪道なのですが、まあ私はTOEICさんに身を委ねることに決めたので…)。 ただ、英語上達完全マップで掲げられている、瞬間英作文、音読、精読、文法、多読、ボキャビル、リスニングといった体系別トレーニング方法はとても理にかなっていると思いますし、
Salesforce Lightning Design Systemとは - Qiita
Salesforce.comは新しいCSSフレームワークであるSalesforce Lightning Design System(SLDS)をリリースしました。 SLDSはSaelsforceのコアプロダクト(CRM製品やForce.com)で適用されているデザインを誰でも簡単に利用できるようにするために開発されたもので、以下の特徴を持っています。 Salesforceの提供サービスが利用している見た目に準拠 レスポンシブデザイン SASS, LESS, StylusなどのCSSプリプロセッサに対応 Pure CSSフレームワークのためJavascript不要 このSLDSには業務システムを構築する上で重要なコンポーネントが数多く揃っており、またSalesforce上でなくても、もちろんSalesforceユーザでなくても誰でも自由に利用することができます。 同様のものとしてはTwitt
Google Homeに話しかけて娘のおむつ交換を記録する - Qiita
好きなモノは酒と女とラーメン、LIFULLのてぃば(@rechiba3)です。 弊社にはふたりの千葉がいますが、私のことは“人妻の方の千葉”で覚えて下さい！ はじめに この記事はLIFULL Advent Calender2017 その2の4日目の記事です。 今年の１月に誤って天使を地上へ産み落としてしまいまして、そりゃもう、毎日が幸せです。 天使は生後〜２ヶ月ぐらいは１５回／１日ほどおむつ交換の必要があり、それからは徐々に１０回、６回と減っていきます。 はじめは、おむつを替える度に育児手帳のような紙に記録していたのですが、ペンを持って時間を見て、印を付けて…といったフローが億劫でした。 なのでGoogle Homeを利用して記録できるようにしました。 ちなみに記録する目的 夫婦の共有のためです。 いつ交換したか、うんちは出ているか、便秘ぎみか、軟便ぎみか、などなど 娘の健康のために把握し
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
CSSの設計方法をまとめてみた~SUIT CCS編~(Angularによるサンプル付き) - Qiita
SUIT CSSについて、簡単にまとめる。 また、Angularを使用した簡単なサンプルも書いてみる。 なお、本記事は、公式ドキュメントをかなり参考にさせていただいている。 詳細な部分に関しては以下の記事がわかりやすかったので、参考にされると良いと思う。 suit/design-principles.md at master · suitcss/suit suit/naming-conventions.md at master · suitcss/suit SUIT CSSとは Componentベースのcssの方法論。 Componentベースなので、AngularやReactなどのComponent指向なJavaScriptフレームワークやライブラリと相性が良いそう。 SUIT CSSのメリット 各々のユニットの結びつきを緩くして、独立したものにすることができる。 SUIT CSS の
プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita
SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 なにそれ？ ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。 なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。 ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく
CSS設計 MOCSSの紹介と解説 - Qiita
GitHubはこちら 概要 MOCSS（モックス）は、CSS Modules、BEM、SMACSSに影響を受けて作られた、コンポーネント志向のCSS設計です。コンポーネントが持つ保護と再利用という2つの性質を分けることで、強固さと柔軟さを兼ね備えました。 背景 BEMやSMACSSなどでCSSに秩序がもたらされたものの、ウマく対応しきれない部分もあって結構不満も感じてました。BEMは命名が冗長だったり、SMACSSはあまり強固でなかったりなどなど。それに対し、CSS Modulesは結構よかったです。CSSの問題をよく分かってる感があります。ただWebpackとJSXを前提としているので、自分の範囲だと採用できるプロジェクトが限られてしまっています。 以前自分が設計した方法だと、CSS Modulesのようなコンポーネント志向でCSSを書くことができ、それは結構うまくいっていて、しかも他で
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
W3C 版 HTML 5.1 変更点まとめ - Qiita
HTML 勧告の全てを把握した上で、フロントエンド開発を行うことはなかなか難しく、 昨今のフロントエンド開発は、都度必要な処理が出てきた際にサポート状況等を調べて実装するような流れが順当なのかと思います。 今回、W3C 版 HTML 5.1 で追加・変更されたものをまとめたものの、 勧告された全てが、現段階で全てのブラウザーに実装されているわけでもなく、 こんなのが正式勧告されてるんだーと、頭に入れておけば良いのかと思います。 間違い、解釈の違いなどありましたらすみません。 W3C HTML 5.1 勧告 https://www.w3.org/TR/2016/REC-html51-20161101/index.html 大きな変更点 https://www.w3.org/TR/2016/REC-html51-20161101/changes.html W3C HTML5 と W3C HTM
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱jQueryのためにしたこと - Qiita
