サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。speakerdeck.com きっかけ とあるプロダクトのCS
The fastest way tobuild beautiful Electron apps usingsimpleHTML andCSS Powered by Electron Underneathit all is Electron. Originally built forGitHub's Atomtext editor, Electron is the easiest way tobuild cross-platform desktop applications. If you can write a bit ofHTML,CSS, and JS, you canbuild full featured applications. Companies likeMicrosoft, Facebook, andSlack are usingit – why
PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグインでCSSを変換するためのツールだ。 PostCSS自体は、CSSパーサーとそのASTを操作するためのAPIのみを提供していて、ユーザーはPostCSSのプラグインを書くことでCSSを変換することができる。 僕もPostCSSを使って、以前ブログにも書いたAtCSSというCSSプリプロセッサーや、postcss-style-guideというスタイルガイドをMarkdownから自動生成するためのプラグインなどを書いたことがある。 PostCSS
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的なCSS 設計手法 既存プロジェクトのCSS に立ち向かう！ (0) 流れ (1) 既存のCSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズCSS や共通の箇所のスタイルを分離する (3)CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
Hologram is aRuby gem that parses comments in yourCSS and turns them into a beautiful styleguide. Quick start: gem install hologram And then: hologram init View onGithub Why would I useit? Hologram makesbuilding a styleguide as easy as maintaining yourCSS.It issimilar to Kneath Style Sheets and Styledocco. Your documentation is written in your productionCSS using a combination ofYAML and
HTML/CSS/JavaScriptは相互に関係しています。 しかし、それぞれが関係しているからといって、不必要に複雑にして良いわけではありません。 理想としては、 テキストや構造に関する問題がある場合は「HTML」 スタイルの問題がある場合は「CSS」 振る舞いに問題がある場合は「JavaScript」 を確認し、修正するだけで良いようにしたいです。 こうすることで、デバッグのしやすさ、コードの理解しやすさ、保守性が上がり、幸せになれます！（きっと） パフォーマンスなどの事情で理想通りにはできないので、あくまで理想として。 それぞれができるかぎり関係しないようにし、疎結合にする方法を説明します。 目次HTMLからJavaScriptを隔離するJavaScriptからCSSを隔離するJavaScriptからHTMLを隔離する 1.HTMLからJavaScriptを隔離するイベント
StyleDocco generates documentation and styleguide documents from your stylesheets. Stylesheet comments will be parsed throughMarkdown and displayed in a generatedHTML document. You can writeHTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the exampleHTML code. The previews are rendered in resiz
Dropdown Menus Enhancement Enhancing functionality of dropdown menus. Overview Added the following improvements: Support sub-menus Support for radio and checkboxes Positioning of menus Bullet for menus To start using the improvements you need to include a modified dropdown-enhancement.js and dropdown-enhancement.css file. Important dropdown-enhancement.css only have enhancement rules and depends e
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
Notice Info Message Success MessageError Message Custom Icon (Font Awesome) No Icon Fast Notice Sticky Notice Sticky Info Sticky Success StickyError Stickyish Notice Stickyish Info Stickyish Success StickyishError Custom Button Icons No Sticky Button No Close Button Permanent Buttons Permanotice Close Permanotice Using NonBlock.js (Click through to things underneath the notice.) Translucent No
Dunia slot online 2025 makin panas, dan NAGA889 muncul sebagai pemain utama yang nggak cuma ngomongin gacor tapi juga buktiin lewat pengalaman main yang nyata. Lewat kolaborasi barengJustChickFlicks, NAGA889 sukses ngasih warna baru di dunia slot online: tampilan makin kece, efek visual sinematik, dan vibe permainan yang bikin tiap spin terasa hidupbanget. Buat pecinta slot sejati, NAGA889 bukan
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。HTMLInspector philipwalton/html-inspector IntroducingHTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower installhtml-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
FuelUX extendsBootstrap with additional lightweightJavaScript controls for your web applications. Get FuelUX View examples Ignite yourBootstrap project today. Include FuelUX controls in your next web project knowingit'ssolidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
