CSS Grid Layout Moduleについて調べたメモ - 1000ch.net
CSS Grid Layout Moduleについて調べたメモ CSSによるレイアウトの問題はFlexboxでほとんどが解決されたと言って良いが、複雑なグリッドレイアウトを実現するためにCSS Grid Layout Moduleの策定が進められている。display: grid;ないしdisplay: inline-grid;といったように、displayプロパティに値が追加されており、それらが指定された要素はブロック要素またはインライン要素のように振る舞い、内包されるコンテンツがグリッドモデルに従ってレイアウトされる。 Chromeは50から、Firefoxは46から対応しているが、Chromeは現安定バージョンの49でもchrome://flags/でExperimental Web Platform featuresを有効にすれば使える。 そんなdisplay: grid;について
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
HTML5ビギナーズでリファクタリングについて喋ってきました | 1000ch.net
お疲れ様でした 2013/10/23(金)に行われたHTMLビギナーズ第3回に参加して、喋ってきました。 真ん中のスクリーンが映らないという機材トラブルに加えて、 吉川さんとひろみつさんのとてもわかりやすいCSSの話の後というプレッシャーの中 「あれ、2人がCSSで俺だけちょっと違う話だけど大丈夫かコレ」って思いながら お話させていただきました。ありがとうございました。 ちょっとモリモリ過ぎて早口でしたごめんなさい。 スライドはこちらです。 当日使ったようで使っていなかったデモファイルはこちらです。一応。 懇親会 参加者の方々と話してたら「黒い画面使ってみようと思いました！」とか 「csslintの話参考になりました！」とか感想を頂いて非常にありがたかったです。 少しでも足しになったなら冥利に尽きます。喋ってよかった。 黒い画面については… Webデザイナーの為の「本
インストールしておきたいMacのアプリケーション | 1000ch.net
2013/01/23 インストールしておきたいMacのアプリケーション そんなにMac歴が長くないし、業務柄な話もあるかと思いますが、 オススメのMacのソフトを紹介します。 XtraFinder MacのFinderにタブやその他様々な機能を追加します。 必ずインストールしておきたいアプリです。 MacのデフォルトだとReturnで名前の変更ですが、Returnで選択ファイルを開くようにしたり Deleteボタンで戻るようにしたりと、Windowsライクなキー操作にもできます。 タブのインターフェースはGoogleChrome風か、Opera風から選べたり アイコンのカラー化など、機能周りもデザインカスタマイズオプションも多彩です。 AppCleaner アプリケーションをアンインストールするためのアプリです。 アプリを起動し、このアプリに削除したいアプリをドラッグ&ドロップ
Gruntの概要と導入手順とメリット | 1000ch.net
2012/12/08 Gruntとは grunt: a task-based command line build tool for JavaScript projects もはや説明不要の可能性もありますが、 gruntがgrunt-cliへの移行(?)をしたこともあり、まとめてみました。 コマンドラインで使用するビルドタスクのツールです。 js(ほぼjson)の設定ファイル上に、concatやminifyといったようなタスクを定義し、 コマンドラインから実行します。言葉だけだとイメージ湧きにくいと思いますので、 使ってもらうのが一番と言い張って導入手順の説明に入ります。 npmからgrunt-cliをインストールする （nodeとnpmはインストール済み・・・よね？） npm install -g grunt-cli これで核となるCLIのインストールは完了です。 ターミ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
