ふんいきがわかるCSSレイアウトの知識 - Money Forward Developers Blog
初 FPS TPSにPUBGを選んでしまった、マネフォのJSer 大須賀です。ドンカツたべられません 先日社内で、デザイナさんに向けてちょっとしたCSSの説明をしました。 本記事では、このスライドを作るに至った動機などを書いていきます。 ※ 2017/10/04 10:56「PUBGはTPSだ」と弊社ゲーム部の部員から指摘を受けました。全くもってその通りなので修正しました。 デザイン・実装のジレンマ デザインの良し悪しが分かるのはデザイナ 実装コストが分かるのはエンジニア という状況で「お互いの作業がトレードオフになることがある」という点に難しさがないでしょうか？ 効率を上げるには、なにかしなきゃいけません。 ということで冒頭のスライドが生まれました。 他の人達のとりくみ 色んな所で同じような課題に立ち向かっている人達もいるようです。 デザイン組織で働くエンジニアは何をやっているの？ Cr
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
CSS/UI Frameworks: 10 Bootstrap alternatives - webkid blog
In this post I will give you a quick overview of some CSS and UI frameworks. If you are building a rich admin dashboard, Bootstrap is totally fine, but for smaller projects you might not need all the features or you are just looking for a different look and feel. All frameworks in this post are actively maintained and Open Source. Bulma is based on flexbox and SASS. It offers everything you need f
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
12 Best Open-Source CSS Frameworks 2026
Colorlib content is free. When you buy through links on our site, we may earn an affiliate commission. Learn More Here are the best open-source CSS frameworks ranked by popularity. CSS gives the web its cozy look. It’s an evolving styling language. Writing plain HTML is a thing of a very distant past, and the language itself (CSS) has advanced so much in recent years that it’s impossible to imagin
CSS Inliner Tool | Email Design Reference
Some email clients strip out <head> and <style> tags from emails, so it's best to have your CSS written inline within your markup. We know that writing inline CSS is time consuming and repetitive, so we've built this conversion tool to automatically inline your email's CSS. Just paste your email's HTML below, click Convert, and you'll get a more email-friendly version that's ready to send. If your
怖話デザインリニューアルしました - Fjord, Inc(株式会社フィヨルド)
怖話のデザインリニューアルをしました。 デザインリニューアルの目的 怖話は元々怖い話投稿サイトとして始まったのですが、今は怖い話だけでなく、都市伝説やホラー漫画、妖怪、悪魔、UFO・宇宙人など、怖い話だけではなくオカルト情報のコンテンツへ横展開が進み、サイトの構造が変わってきたので、それに合わせてデザインを変える必要が出てきました。 何で横展開を始めたのかというと、怖い話だけで得られるPVの限界が見えてきた（収益の限界も）のと、より多くのユーザーの方が怖い話を投稿しやすいように、怖い話のインスピレーション源となるような情報もサイトに用意したかった、というのもあります。怖い話が好きな方はきっとオカルト情報も好きなはず。もっと怖話を楽しんでもらえたら、というのが一番ですが。 リニューアルが必要と思って一年くらい。たまに寝る前なんかにちょこちょこ触ってリニューアル用のブランチを育ててはいたのです
Colors - A nicer color palette for the web.
The code /* To be used in combination with a base border class i.e something like .border { border-style: solid; border-width: 1px; } */ .border--aqua { border-color:#7FDBFF;} .border--black { border-color:#000000;} .border--blue { border-color:#0074D9;} .border--fuchsia { border-color:#F012BE;} .border--green { border-color:#2ECC40;} .border--lime { border-color:#01FF70;} .border--maroon { border
DRY-ing Out Your Sass Mixins
One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
Basscss
Code with ConfidenceUsing clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. No Side EffectsThings behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS. ComposableReusable, interoperable styles work like buil
Getting Started | bootstrap-select · SnapAppointments Developer
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. Download (v1.13.14) Getting Started Quick start Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.4.
How to structure a Sass project – TheSassWay.com
One of the most useful features of Sass is being able to separate your stylesheets into separate files. You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: styl
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bulma: Free, open source, and modern CSS framework based on Flexbox
Redirecting to Animate.css
CSSに死を！これはJSerの叫び！ #kbkz_tech
https://www.swipe.to/0062cp
http://blog.takuyan.com/dev/shake/