使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」UnCSSはCSSををパースして使用してないスタイルを削除、使用中のものだけ残してくれるツールです。OSSとしてもソースコードが公開されています。この手のは先発のツールがありますので好みで。複数Webページにまたがってパースする（ドメインレベルで解析する）わけじゃ無さそうなので使用シーンは限られますけど、覚えておいて損は無いかなぁと思います。 UnCSS
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
CSS Nite in KOBE, Vol.8 「デバイス多様化時代に備えるWeb制作環境の効率化」参加レポート [ 紹介されたツールのまとめ付き ]
CSS Nite in KOBE, Vol.8 「デバイス多様化時代に備えるWeb制作環境の効率化」参加レポート [ 紹介されたツールのまとめ付き ] Publish2015/04/28(火) Update2020/01/30(木) 2015年4月24日（金）に新神戸のplug078 コワーキングスペースで行われたCSS Nite in KOBE, Vol.8 「デバイス多様化時代に備えるWeb制作環境の効率化」に参加してきました。 今回の講師は、こもりまさあきさんで、こもりさんの視点で見る効率化についてを知りたくて参加してみました。 このブログを読んでいる人は知っているかもしれませんが、僕はけっこうこもりさんの話を聞きに行っているので、実は今回の内容も情報として「全く知らなかった」というものはほとんどありませんでした。 でも、話を聞きに行ったのは「新しい情報を得よう」ということではなくて
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
uncss: Find Unused CSS
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work. Running a directory of images through ImageOptim is a euphoric experience, am I right? What if there was a tool, h
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | DevelopersIO
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
「第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表」に行って来ました - 強火で進め
【即日満員／増員400名】第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表 : ATND http://atnd.org/events/25251 ソーシャル時代に見るWeb系エンジニア生き残り戦略 - mochrom クロカワ リュートさん なぜ戦略が必要なのか ターゲットユーザを明確にし ターゲットユーザーに響く方法で告知をし 長く愛されるサービス/アプリを目指す 集客の方法・事例 「MacBook Airは中華包丁としてつかえるのか。」 「これ、中華包丁みたいだ。」から始まった 関連動画も含めた総再生数は100万再生超 国内ではGIZMODO JAPAN、デイリーポータルZ、ねとらぼ、秒刊サンデー。海外ではGIZMODO、CNN、Yahoo!香港、ディスカバリーチャンネルなどで取り上げられた 気をつけている事 ティザーは打たない
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
ビジュアルのRegression Test(回帰テスト)ツールを試してみた
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
https://bugs.chromium.org/p/chromium/issues/detail?id=44872
Chrome renders colours differently from Safari and Firefox
イラレ作成からWeb書き出しまで
HTML5 Boilerplate: The web’s most popular front-end template
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
Loading...
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
