[B! CSS] gfxのブックマーク

GitHub - uncss/uncss: Remove unused styles from CSS

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

gfx 2018/03/19

CSS

リンク

Chromeで計測可能になったCSSカバレッジについての調査検証を行ったお話 | GMOメディアエンジニアブログ

こんにちは、最近GoogleHomeとビットコインにハマっているミーハーデザイナーの大西です。今回は、Chrome59でCSSとJSのカバレッジを取得できるようになったので、自社媒体で運用可能かどうかCSSカバレッジの調査と検証を行ってみたいと思います。そもそもカバレッジとは？所定の網羅条件がテストによってどれだけ実行されたかを割合で表したものです。出典‥カバレッジ(網羅率)分析とは | ソフトウェアの検証の種類 | テクマトリックス株式会社つまり、CSSカバレッジとはCSSの網羅率ということになります。カバレッジをあげると何が良いのか？余分なものを含まなければ、ダウンロードの時間が短くなり︵ページの軽量化︶、おのずと表示速度が早くなるはずなので、結果的にユーザー体験の向上をはかることが可能であると言えます。︵なんと素晴らしい！︶カバレッジツールの利用方法というわけで、実際にC

gfx 2017/12/25

CSS

リンク

よこ並びのCSS。

スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな﹁よこ並びにするためのCSS﹂も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。よこ並び？そう、よこ並び。例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏︵ひとえ︶に﹁よこ並び﹂と言えど、CSSにはそのやり方がたくさんあるんです:o。導入この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float︵フロート︶要素を左右へ寄せるためのプロパティ。後続する文章︵テキスト︶などのインラ

gfx 2017/02/16

CSS

リンク

amakanにstylelintを導入した - ✘╹◡╹✘

https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ amakanのフロントエンドを色々改善した - ✘╹◡╹✘ amakanをSidekiqに移行した - ✘╹◡╹✘ amakanの開発環境をDockerに移行した - ✘╹◡╹✘ amakanの本番環境をDockerに移行した - ✘╹◡╹✘ amakanをDocker化した感想 - ✘╹◡╹✘ amakanのCIをShippableに移行した - ✘╹◡╹✘ amakan の CSS は勘で書いていて、何となく気が向いたので style

gfx 2017/01/28

css
lint

リンク

PostCSS はポストCSS の夢を見るか？ - YHATT (わいはっと)

この投稿は﹁Speee Advent Calendar 2016﹂の16日目です。前回は弊社CTOによる﹁1年間、毎月200㎞走ることにコミットした話し﹂でした。私はというと、実は風邪を召してしまいました。冬の乾燥にはみなさんもお気をつけ下さい。 PostCSS をかじってみよう今回は最近何かと話題の PostCSS をかじってみます。 postcss.org PostCSS は、Pluggableに CSS の文法や機能を拡張できる Node 製のツールです。 PostCSS 自体は CSS を扱う AST (抽象構文木) の相互変換・操作ツールですが、これに対してプラグイン側で CSS に操作を行うことで、CSS のみではできない機能を付加します。CSS 操作系ツールでは、内部で PostCSS が使われている例も多く、現在の CSS 操作の主流となっています。使用例 aut

gfx 2016/12/21

ぼちぼちPostCSS検討したい。

CSS

リンク

QiitaのCSS構成2016 - Qiita

Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRubyonRailsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。まず、Sprocketsで使われているRuby製のSas

gfx 2016/12/01

CSS

リンク

Is there a "previous sibling" selector?

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

gfx 2016/09/30

CSS

リンク

morishitterのCSSの書き方（2016年夏） - morishitter blog

今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること持論だが、﹁デザインの意図を正確に理解した上で書かれたCSSは破綻しない﹂と思っている。しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。僕が1番時間を使うのがこの工程だ。今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、﹁なぜこのようなデザインなのか﹂を質問しまくる。ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。最近読んだ本だと、﹁みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善

gfx 2016/08/02

CSS

リンク

Bulma: Free, open source, and modern CSS framework based on Flexbox

The most beautifully written framework I've ever had the pleasure of working with.

gfx 2016/02/12

CSS
grid

リンク

HTML5 CSS Sticky Footer

The original and simplest sticky footer CSS modified for HTML5.Ryan Fait's HTML5 CSS Sticky Footer Like the original CSS Sticky Footer, this HTML5 Sticky Footer works in virtually all browsers to make a website's footer 'stick' to the bottom of the page even when the content is short. As many web designers are designing in HTML5, including myself, I decided it was time add this as a companion to t

gfx 2015/11/18

CSS
footer

リンク

Web Fundamentals — Google Developers

Stay organized with collections Save and categorize content based on your preferences. A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. Go back

gfx 2015/11/11

CSS

リンク

Responsive CSS Tabs

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

gfx 2015/10/22

CSS

リンク

[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート

﹁New﹂﹁新着﹂などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ実装デモ元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。まずは、img要素の画像から。デモページ‥div要素 ※当方作成実装実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版このエフェクトの要点はラッパーの﹁overflow: hidd

gfx 2014/07/16

CSS

リンク

初心者がよくハマる、CSSのfloatプロパティ徹底攻略 | WeeeeB

2011年も残りわずかですね。今年最後の記事は、CSSのfloatプロパティについて書いてみようと思います。僕はフリーのWebクリエーターをしつつ、Webの講師業もしてるんですが、どの生徒さんもfloatに苦しめられてるのをよく見ます。そこでCSSを勉強しているWebクリエーターさんにfloatとの上手な付き合いかたをご紹介します。初心者がよくハマる、CSSのfloatプロパティ徹底攻略の目次まずはfloatを理解しよう floatした要素の親要素に付けた背景が出ない時の対策方法 floatによるレイアウト崩れ︵段落ち︶の解決方法 1. まずはfloatを理解しよう floatはただ、要素を左右に振っているのではない。浮いているんだ！ floatとは、左右に要素を回り込ませたいときに使うCSSのプロパティです。でもただ左右に回り込んでるだけではないのです。実はfloatした要素は浮いて

gfx 2013/10/21

CSS

リンク

css-lecture.com

gfx 2013/10/17

CSS
box

リンク

CSS3: Auto Hyphenation for Text-Elements | Blog | Hans Reinl

gfx 2013/10/09

CSS

リンク

Bootswatch

Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.

gfx 2013/09/03

CSS

リンク

Bootstrap Templates and More on WrapBootstrap

Bootstrap templates are website templates built with the popular Bootstrap framework. WrapBootstrap is the marketplace for high-quality website templates compatible with Bootstrap, React, Angular, Vue.js, Laravel, Django, ASP.NET Core, PHP, Python, and more.

gfx 2013/09/03

CSS

リンク

Tridiv | CSS 3D Editor

Concept, code and design by Julian Garnier. For questions, feedback, bugs or anything related to Tridiv, contact me on twitter @TridivApp. Tridiv is licensed under Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License

gfx 2013/08/24

CSS

リンク

CSS： marginの正しい理解 - kojika17

toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。﹁marginはバグが多い﹂という声をたまに聞きます。しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸

gfx 2012/08/28

CSS
layout

リンク

はてなブックマーク

タグ

関連タグで絞り込む (22)

CSSに関するgfxのブックマーク (34)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス