Gulpの実行がうまくいかない時 - Qiita
$ npm uninstall --save-dev gulp-sass $ npm install --save-dev gulp-sass@2 $ npm rebuild node-sass /Users/****/node_modules/node-sass/lib/extensions.js:158 throw new Error([ ^ Error: The `libsass` binding was not found in /Users/****/node_modules/node-sass/vendor/darwin-x64-48/binding.node This usually happens because your node version has changed.
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
mac(macOS Sierra)で音声入りの動画（画面キャプチャ）を取る方法 - Qiita
mac(macOS Sierra)で音声入りの動画（画面キャプチャ）を取りたくなったため、実施方法を調べ、実施した。 調べるのに意外と時間がかかったため、まとめる 必要なもの macOS Sierra QuickTime Player Soundflower LadioCast 使用するソフトの説明 QuickTime Player 動画を取るために使用 macOS Sierra標準アプリケーション Soundflower 音声入りの動画（画面キャプチャ）を作るために使用 LadioCast 音声入りの動画（画面キャプチャ）を取っている際に、自分でも音声を聞けるようにするために使用する。 そのため、音を聞く必要がなければ、Soundflowerのみで動画を作ることは可能 導入 以下をインストールして下さい。 Soundflowerをインストールする https://github.com/m
Pug(Jade)記法でHTMLのテンプレート的なの - Qiita
2017/06/23追記 今更ですが、本記事のサンプルコードをあげました soarflat-prototype/pug-template サンプルコードは以下の点で記事内容と異なります。 拡張子がpug mixinを利用する必要がなかったため利用していない 現在のバージョンだと"http://#{metas.url}"のような"#{}"がサポートされていないため修正 はじめに Pugの勉強のためにHTMLのテンプレート的なのをJadeで書きました。 Pugで書くとこうなる もとのHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conte
gulp-imageminのプラグインによる最適化が機能しない際の対処 - Qiita
gulp-imageminを用いて画像を圧縮させる際に、 pngquantや非可逆圧縮としてmozjpeg等を用いようと思ったが、 圧縮率に反映されない時があったのでメモ 他の記事などを参考にimageminプラグインを追加していたが 同様の質問があり下記で解決されていた https://github.com/sindresorhus/gulp-imagemin/issues/190 追記：下記記事にも既出でした Gulpでpngquantを使ってPNGの減色＆軽量化 うまく行かなかった記述 gulp.task('imagemin', function(){ return gulp.src('src/images/*') .pipe(imagemin({ interlaced: true, progressive: true, optimizationLevel: 5, use: [png
滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話
Android 4.3系以前で使われた標準のブラウザ（Android Browser）は、不具合も多いし、デバッグ方法もろくにない。スマホのIE6と化しているこのブラウザはもうサポートするのやめたかった。 しかもこの標準のブラウザはGoogleからのサポートはすでに切られています。脆弱性も絶賛放置中！ https://plus.google.com/+AdrianLudwig/posts/1md7ruEwBLF（公式見つからなかった） なのでユーザー的にも開発者的にも標準ブラウザを使うメリットはないので、 標準ブラウザのユーザーをChromeに移行するようにページトップに警告を表示し、Android 標準ブラウザをサポートから外しました。 標準ブラウザを判定する方法 あまりJSでがんばりたくないので、UAで判定します。いつもカオスなUAですが今回もカオスです。 Android端末ユーザーエ
FlexboxでAndroid 4未対応のボックス折り返し(flex-wrap)を実現する方法 - Qiita
CSS3のFlexboxを試した人からよく聞くのが「Android 4系でボックスの折り返しができない」という声です。本記事ではポリフィルを使ってAndroid 4でもflex-wrapによるボックスの折り返しを実現する方法を紹介します。 なお、Flexboxの基本については記事「初心者でも始められるFlexbox入門 - ICS MEDIA」を参照ください。 Android 4におけるflex-wrapの挙動 Android 4におけるボックスの折り返しができないとはどういうことなのか、まずその挙動を確認してみましょう。 flex-wrapプロパティにwrap値を指定すると、親要素の横幅を超えたときにボックスが折り返し、複数行のレイアウトが可能になります。 下記のようなHTML・CSSコードを例にして考えてみます。リストで並べたボックスに対して、Flexboxレイアウトと折り返しを指定し
ローカル開発環境をもっとたくさんの人に使ってもらいたくてDockerで作りました - Qiita
始めに 最近ウェブ開発でローカル環境を使って欲しいなぁ、とすごく思うようになりました。 慣れてしまえば開発効率が上がると思うんですけど、その導入が大変なんですよね。 仕事で一緒になった方々に手作業で構築していましたが、もっと簡単にできないかなということで作りました。 Mac用です。名前はDAMP(Docker Apache MySQL PHP。 XAMPP, MAMPから取りました。)です。 Apache、MySQL、PHPが動きます。 （2018年11月8日）PHP7.2に対応しました 1.7.2でPHP7.2に対応しました。 https://github.com/yousan/damp/releases/tag/1.7.2 サンプルのdocker-compose.ymlはこちらです。 https://github.com/yousan/damp/blob/master/docker-c
2020年まで使えるfont-familyおすすめゴシック体 - Qiita
新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン
CSSアニメーションを作るときはChromeデベロッパーツールのAnimationsが便利 - Qiita
CSSアニメーションは直感的じゃないから作りづらい CSSでアニメーションを作るとき@keyframesを使います。オブジェクトを拡大縮小するアニメーションなどは次のようなスタイルで指定します。 @keyframes scale-anime { 0% { transform: scale(1); } 33% { transform: scale(2); } 66% { transform: scale(0.75); } 100% { transform: scale(1); } } .el { animation: scale-anime 1s linear; } Web開発者にはお馴染みのChromeデベロッパーツール。デベロッパーツールの機能の中に「Animations」があり、CSSアニメーションのテンポや尺(時間)を調整できます。 まずは、作成したアニメーションをChromeで表示
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
gulp-ruby-sassでfont-awesomeをコンパイルしたら文字化けした件 - Qiita
はじめに gulp-ruby-sassでfont-awesomeをコンパイルした時に、出力されるcssで文字化けするという現象に遭遇しました。現象とその対処法をまとめてみたので、何かの役に立てば幸いです。なお普通のsassでのコンパイルでも同様に再現しました。 対処法はスマートではない気もするので、もっとよい方法があればご教授ください！ 遭遇した環境は以下になります - windows7 - gulp-ruby-sass": "^2.0.5", - sass 3.4.4 なお既にissuesに上がっているようです https://github.com/sass/sass/issues/1395 何をしようとして、何が起こったのか font-awesomeを使ったmixin()を作成しようと以下のようなコードを書いていました @mixin bgFontAwesome($content) {
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
CSSフレームワークBourbon超速入門 - Qiita
はじめに やあ （´・ω・｀) 今回Bourbon（バーボン）というcssフレームワークを初めて触ってみました。特長やら何やらをざっとまとめてみましたので、興味のある方の参考にでもなれば幸いです。 なお説明はすべてバージョン4.2.4を想定しています（2015/08/31最新） 目次 Bourbon（バーボン）とは Bourbonに依存するフレームワークの紹介 機能の紹介 使い方 Bourbon（バーボン）とは sass用のmixin/functionsをまとめたcssのフレームワークです。基本@includeやfuncName()のように使うので、htmlに依存しません。まぁcompassと同じようなものかと思います。 公式サイト http://bourbon.io/ 特長 軽量でシンプル Neat, Bittersといったcssフレームワークの基になる コンポーネントやモジュールといっ
transformプロパティを使って要素を上下中央に配置する - Qiita
今回は上下中央に配置したいものの高さと幅が決まっていますが、この方法であれば文章などの不規則な高さのものも上下中央に配置可能です。 HTML <div class="box> <img src="dummy.png alt="" width="24" height="24" class="img" > </div> .box { position:relative; height:300px; } .img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
font-smoothingでOSXでのフォントのレンダリング方法を調整する - Qiita
Non-standard であることに注意すべき Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth MDNにもこう記載があるとおり、正式な仕様策定のトラックからは外れています。 影響範囲や、ブラ
ざっくりGulp.js入門（Mac向け） - Qiita
プログラミング学習サービスやら、ペットサロン予約サービス、風俗検索サービスなど色々とやっている「かずきち」です。 ■運営サービス一部 http://crazy-wp.com/ http://webukatu.com/ 新宿のホストから不動産・保険の営業を経て、HTMLって何？という状態から３ヶ月独学でプログラミングやデザインを学び、IT業界で１年間実務経験を積んで年収は１本超え。現在は起業家としてサービス運営やら不動産運営をしています。 Qiita内にそれ系の記事も書いてます。 エンジニアで稼ぐために大切な１３のコト WEBサービスで起業したい人に読んで欲しい１８のコト Gulpとは？？ タスク自動化ツール。 画像やjs、cssなどの色々なファイルを圧縮してくれたり、CSSプリプロセッサのSASS、LESS、Stylusなどを自動でコンパイルしてくれたり、ファイルが更新されたら自動でブラウ
sc5-stylgeduigeの記述方法 - Qiita
sc5-styleguideを使う際に日本語での解説が見つからず。 KSSの記述方法なのか、sc5-stylgeduige特有の記述方法なのかわからないですが、一応メモです。 style.scssファイル内での記述 // 色 /*←セクション名（ページ名）になる*/ // /*←この行も必要っぽい*/ // markUp:/*←これが必要*/ // <p class="red">テキスト赤</p>/*←実際にスタイルガイド内に表示されるHTML*/ // <p class="black">テキスト黒</p>/*←実際にスタイルガイド内に表示されるHTML*/ // /*←この行も必要っぽい*/ // Styleguide 1.0/*←最初が大文字でしっかりStyleguideと書き半角スペース後に章のナンバー 1.0なら1章、1.1なら1章のもうひとつ下のセクション？1となる、番号は上から
Sassを使ったz-indexの管理 - Qiita
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
スプラトゥーンの勝敗を画像認識で記録するiOSアプリを作ってみました - Qiita
作ったもの https://itunes.apple.com/jp/app/ikasukoa/id1097968132?l=ja&ls=1&mt=8 こんな感じで試合終了時に試合結果を判定して記録してくれるアプリ iPhoneを３脚に固定してカメラでゲーム画面を撮影しています なんで作ったか ちょうどOpenCVの勉強をしたかったので、いろいろ調べてみると HDMIキャプチャ（ https://github.com/hasegaw/IkaLog/blob/master/doc/IkaUI.md ） Raspberry Pi（ http://hogesuke.hateblo.jp/entry/ikashot ） など、OpenCVでスプラトゥーンの試合結果を記録するものが見つかりました。 でも正直機材用意するの面倒だし、スマホでいいと思ったのと、常にストアにあるものは手書きで記録する系のアプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
