Web制作者がチェックしておきたい！2018年、CSSベースのフレームワークのまとめ | コリス
CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。 CodyHouse CodyHouse's Framework -GitHub CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。 レスポンシブに対応したスペースをCSSで効率的に定義する方法 カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法 Webサイトやスマホアプリでよく使用されるさまざまなコンポーネントを最適なコードで実装することができます。また、CSSはマージン用・カラー用・タイポグラフィ用・ボタン用などに分かれているので、自分用にカスタマイズして利用することもできます。 Bulma Bulma -GitHub こういったフレームワークで
Microsoft EdgeのChromium化のアナウンスについて思うこと – Yoshifumi YAMAGUCHI – Medium
Microsoft Edge. Contribute to MicrosoftEdge/MSEdge development by creating an account on GitHub. We will adopt Chromium as the web platform for Microsoft Edge desktop. Our desire here is to align Microsoft Edge’s web platform both (a) with web standards and (b) with other Chromium-based browsers, for improved compatibility and a simpler test-matrix for developers. このアナウンスに関して多くの人がその是非を書いていますが、その中で
「Reboot.css」の特徴と使い方を解説
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
styled-components: API Reference
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
Houdini - CSS に関する誤解の解消 | CSS and UI | Chrome for Developers
CSS の作業量について考えたことはありますか？1 つの属性を変更すると、突然ウェブサイト全体が別のレイアウトで表示されます。これは魔法のようなものです。私たちウェブ開発者のコミュニティはこれまで、 その魔法を目の当たりにし、観察できただけです。独自の魔法を考案したい場合は どうすればよいでしょうかマジシャンになりたいとしたら？ Houdini に登場！ Houdini のタスクフォースは Mozilla、Apple、Opera、Microsoft、HP、Intel、Google のエンジニアが連携し、CSS エンジンの特定部分をウェブ デベロッパーに公開しています。このタスクフォースは、W3C に承認されて実際のウェブ標準になることを目指して、ドラフトのコレクションに取り組んでいます。チームはいくつかの上位レベルの目標を設定し、それを仕様のドラフトに変換し、それからサポートの下位レベルの
けものフレンズのタイトルロゴをCSSだけで作ったのー？すっごーい！！
Leo(@Akamaru12mg)はPureCSSでワケの分からないものを作るのが大好きなフレンズなので、けものフレンズのタイトルロゴをCSSのみで作ってみました。 ちなみに制作時間は約6時間！貴重な休日が潰れちゃったね！しにたーい！ 参考にしたのはけもフレ公式サイトのこれ↓ この画像を参考にしながらpositionで無理矢理レイアウトを組み立てました。見ての通り、「の」と「ズ」の部分は鬼畜です。CSSって丸っこい形は作りにくいんだよね… 「まぁ、どうにかなるっしょ」と甘い考えで作り始めた結果が、6時間という制作時間です。諦めなかった自分を褒めてあげたい。そして皆に「すっごーい！」って言ってほしい。 Kemono Friends Title Logo 完成品がこちらです。 See the Pen LxKNPm by Kuzlog (@Kuzlog) on CodePen. 最初は「綺麗なコ
CSSフレームワークを開発していて悩む、CSSフレームワークが持つクラスのHTMLへの依存について
Basis という CSS フレームワークを作っているのですが、CSS フレームワークが持つクラスと HTML の依存について考えたり悩んだりしています。 特に解決策とか結論とか浮かんでいないのであれですが。 例えばボタンを使う場合 例えばボタンのコンポーネントを使いたい場合、Basis だと次のようになります。 <a class="_c-btn">ボタン</a> ワイヤーフレームとかプロトタイプであれば上記のように既存のコンポーネントのクラス名を指定してあげてバンバン組んで良いのですが、正式なデザインが決定して、これに装飾していこうとした場合どうするのがベストなのでしょうか。 デザインもすごくコンポーネント思考で「ボタンコンポーネントのデザインはこれで統一するぜ！」みたいな感じであれば良いですが、まぁひとえにボタンといっても色々なパターンがでてきちゃうのが通例かと思います。となると、._
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
Ink - Interface Kit
Download 3.1.10 This file contains CSS, JavaScript and their minified versions, images, fonts and the cookbook. Download with source This file contains SASS and JavaScript source code, distribution versions and the build tools config files. Github If you prefer, head on to our github repository, fork the project and help us create an even better Ink. Responsive from the ground up Our grid system i
MUI - Material Design CSS Framework
The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── email │ ├── mui-email-i
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita
ブラウザの進化が早い昨今、CSSのベンダープレフィックス(-webkit-や-ms-)が必要なプロパティと不要なプロパティが入り乱れています。必要なベンダープレフィックスのみを付与しようとした場合、途端にコード量が倍増し、メンテナンス性が低下し、バグの温床となります。このベンダープレフィックス地獄を解消するAutoprefixerをGulpやwebpackで使う方法を紹介します。 今なお続くベンダープレフィックス地獄 角丸を表現するborder-radiusプロパティはIE 11を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えます。(Can I use border-radius) 一方で、ボックスレイアウトモジュールの為のflexboxプロパティやテキスト要素を変形するtransformプロパティ等では、Android 4.4以下等一部のブラウザではベンダープレフィックスが必
Scooter - Dropbox社製のデザインフレームワーク
企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirect
HiQ Theme Builder
normalize.css、sanitize.cssユーザーに朗報。display: none; 用のクラスを作る必要は無し - Qiita
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
まだ中央寄せで消耗してるの？ - @yoshiko_pg
Normalize.css: Make browsers render all elements more consistently.