超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
ブログ | ウェビングスタジオ
先週末の三連休のさなかに、人気プラグイン「Advanced Custom Fields(以降、ACF…
CSS flexboxのレイアウトで困った時に使えるスタイルシートのテクニックまとめ
flexboxを使ってレイアウトを実装するのは、何年もの間floatやclearfixを使っていた人に新しい驚きと喜びを与えます。主要なブラウザすべてにサポートされ、採用するプロジェクトも増えてきました。 しかし、以前のテクニックはflexboxに通用しません。 flexboxの仕様に基づいた、レイアウトで困った時に使えるスタイルシートのテクニックを紹介します。 11 things I learned reading the flexbox spec 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. flexboxにおけるmarginの特別な効果 02. min-widthでよくある問題 03. flexのデフォルト値に注意 04. flexboxはインラインにも使える 05. vertical-alignはflexアイテ
実用段階に来た次世代CSSレイアウト「Grid Layout Module」ってなに？
ChromeとFirefoxにデフォルトで実装された、CSS Grid Layout Module（グリッドレイアウトモジュール）。その基本的な機能と使い方を、デモを交えて。 Webアプリケーションはいよいよ複雑化してきています。そのためフロートを使ったハック的なソリューション抜きで、もっと自然に、簡単に高度なレイアウトを実現できる方法や、手間の省けるテクニックが必要とされています。CSS Grid Layout Moduleを使って、レイアウト作成における期待の新しいソリューションを実現できます。 本記事ではこの比較的新しいCSS機能について紹介します。現時点でのブラウザーの対応状況を説明し、例を使ってCSS Grid Layout Moduleがどのように動作するかを説明します。 CSS Grid Layout Moduleとは？ Grid Layoutの背後にある中心的な概念は、We
WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ
Paste and Indent JavaScript & CSS CDN Suggestions scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。 Brackets Extension: CDN Suggestions CDN Finder jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。 CDN Finder Autoprefixer 名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。 Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。 機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があり
「StyleStats」を活用してCSSを評価する、Evaluating CSS─Frontrend Conference
「StyleStats」を活用してCSSを評価する、Evaluating CSS─Frontrend Conference 石本 光司（Kaizen Platform, Inc...） 本記事は、2015年2月21日に行われたFrontrend Conferenceの「Evaluating CSS」の内容を紹介します。 はじめに こんにちは、@t32kです。今日はEvaluating CSSというタイトルでCSSの解析ツール、StyleStatsに関して説明したいと思います。ちなみにEvaluateというのは『評価する、価値を見極める』といった意味の単語です。 宣伝ですが、今年からFrontend Weeklyという無料のメールマガジンというか、海外の役立つリソースを紹介するウィークリーメールをやってますので、こちらも登録いただけると大変私嬉しいです。 なぜCSSはそんなに難しいのか？ で
CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita
新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。 Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。 Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる（はずだと筆者は判断している）。 コンテンツファースト アクセシビリティファースト モバイルファースト インブラウザーデザイン といった考え方や手
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？ といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。 書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
ウノウラボ Unoh Labs: CSSを書くときに使っているツールの紹介
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
Learn How To Code by Envato Tuts+
Thousands of free tutorials and online courses to help you learn software development from mobile devices to web applications and everything in between. Join our community to improve your coding skills and workflow. What would you like to learn? Our extensive learning guides provide a deep dive into various types of software development. Improve your WordPress knowledge, learn Ruby or PHP, get sta
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
「HTML、CSS、JS、PHP、Ruby、AIR」 フリーの開発環境Aptana 1.0リリース：CodeZine
Web関連の言語に対応した統合開発環境Aptanaの正式版がリリースされた。単体で提供される「Aptana IDE」とEclipseプラグイン版の2つが用意されている。Eclipseの場合は更新機能に以下のURLを登録することで入手できる。 http://update.aptana.com/install/3.2/ AptanaはHTMLやJavaScript、CSSなどに対応した統合開発環境で、プラグインの追加によりPHP、Ruby、AIRなどの開発にも利用できる。プラグインの追加はIDE起動時に表示される「Aptana Start Page」より、関連プラグインの「install」ボタンを押すことで行える。なお、プラグインの実行にあたっては各言語の実行環境を用意する必要がある。 Eclipseベースのツールのため、強力なエディタやソースコード管理システムを利用することができる。主な機能
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UAスタイルシートと リセットCSS
The Blog | Welcome to Adobe Blog
新着記事
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
compass-style.org is almost here!