部屋とYシャツと私 - MOL
部屋とYシャツと私、AutoprefixerとSpritesmithとLibsassの話。 愛しのMapleは、フレームワークというかGrunt詰め合わせセットなのですが、Grunt自体はNode.js依存で、使っているCSSプリプロセッサはSassでRuby依存なので、なんだかキメラみたいで気持ち悪い。いっそのこと、プリプロセッサはStylusにしてNode.jsで統一しようか、むしろMiddlemanみたいにRubyで統一するか、考えものだ。とりあえずはCompassを辞めてみようという結論に至ったので代替案を探る。 MapleでCompassを使っている理由は2つ。 ベンダープレフィックスを付ける手間をなくしたい CSSスプライトを自動化したい これらをGruntプラグインでなんとか置き換えれないものか。 grunt-autoprefixer nDmitry/grunt-autopr
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
位置を固定したメニューを作るjQueryプラグイン「stickUp」
twitter facebook hatena google pocket WEBサイトのトレンドである縦長ページにおいてメニューを上部に固定することが多くなっています。 これにより、現状どこを見ているのか、またどこまでページが続くのかなど明示できユーザーにとって優しくなります。 stickUp - a free jQuery Pluginにより簡単に導入できます。 sponsors 使用方法 下記のようなメニューがあったとします。 <div class="navbar"> <ul class="navbar-nav"> <li class="menuItem active"><a href="#home">Home</a></li> <li class="menuItem"><a href="#features">導入方法</a></li> <li class="menuItem"><a
Flexslider WordPress Slider Toolkit by WooThemes
Get started with FlexSlider in 3 easy steps! Step 1 – Link files Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us! Step 2 – Add markup The FlexSlider markup is simple and straightforward. First, start with a single
新社会人必須！最初に入れておくべき Windows 無料ソフト永久保存版｜Synclogue Navi
新社会人になって、パソコンを新たに購入したものの、「何のソフトを入れたらいいのか分からない」、 「みんなは、どのようなソフトを入れているのかな」と気になったことはありませんか？ 今回は、Windowsで必須の、入れておくべきフリーソフトを、すべて紹介します。 ここにあるソフトを入れておくと、あなたのPCは驚くほど便利になります。 紹介しているソフトの数がとても多いので、必要なカテゴリから見ることをおすすめします。 ※今回紹介しているソフトは、パソコンをはじめて自分で買った方が便利に使えるようなソフトを紹介しています。会社のパソコンに入れる際は、上司に確認をとってから入れましょう。 おすすめソフトが新たに出てきたら、随時更新しますのでチェックしてみてください。 1. ブラウザ Windows の OS には Internet Explorer が標準搭載されていますが、もっと高機能で便利なブ
効果的なカルーセルをデザインする： お化け屋敷ではなく、しゃれた娯楽を創り出そう
カルーセルを使えば皆が一番欲しがる場所を複数のコンテンツで独占することができるが、ビューポートの大小にかかわらず、カルーセルはスクロールして飛ばされてしまうことも多い。もしカルーセルをページの主役にするなら、良質なナビゲーションとコンテンツによってその有効性を高めることが可能である。 Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors by Kara Pernice on September 14, 2013 日本語版2013年11月11日公開 カルーセルの普及 カルーセルと見なされているUI要素にはいろいろなものがある。例えば、（DellのWebサイトにあるような）クリック可能な複数イメージからなるフィルムストリップもそうである。 また、（NestのWebサイトにあるような）
【Grunt】おれおれな画質調整の自動化 – T2
読了: 約 7 分 今制作に携わっているアプリケーションでページ毎、パーツ毎(ファーストビューであるか否か、アイコン等)でフォルダを作って画像を管理しています。 ホーム、投稿ページ、マイページ、タイムライン等。その中でもGoogleが最近1000ms以内で表示しろというものを出していて、 それじゃないと評価しないぞという事でスピードに本当にシビアになってきていますね。 Google公式サイトから Mobile Analysis in PageSpeed Insights Googleの方が書いた最近のspeedに対しての記事 Intro – Webを速くするためにGoogleがやっていること Make the Web Faster 00 – スタートアップのようにアプリを出してすぐの時や2,3年は改善を早いサイクルで回すために、 CSS Spriteや1つ1つの画像の管理が難しくなってきま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
