Rails4でGemの資産がAssets Precomplieに含まれないときは
Rails4プロジェクトでGem内の画像ファイルやフォントファイルといった資産がprecompile対象に含まれない原因と対策をまとめておきます。 原因は、assets precompileのデフォルトの対象変更です。対策としては以下の方法をとる必要があります。 assets precompile に含まれるよう資産を移動する assets precompile に含めたい資産を明示する 原因 precompile対象ディレクトリの変更 Rails4では、パスにapp/assetsを含む資産のみをデフォルトのprecompile対象とするように変更されました。 rails/rails - Only compile non-js/css under app/assets by default precompileのパスに置かれているREADME.mdのような"loose"なファイルを対象から
プログラミングを忘れられるサービス「ドットアンインストール」を公開しました · 上杉周作のブログ
シリコンバレーに住んでいます。(1)いちばん読まれた記事はこちらです。(2)二番目に読まれた記事はこちらです。(3)自己紹介はこちらです。(4)無料メルマガの購読リンクはこちらです。(5)現在は引きこもっています(詳細)。 このたびプログラミングを忘れることのできるサービス「ドットアンインストール」を公開しましたので宣伝します。 某サイトとは違い、おもにプログラミング歴が長い方向けです。 スクリーンショット トップページはこんな感じです。 ほぼ全てのプログラミング言語を忘れることができます。 サンプル動画を公開しました HTMLとCSSを忘れることのできるレッスン動画を作ったので、こちらに貼っておきます。 なぜプログラミングを忘れられるサービスを作ったのか? 理由1: 彼女にコードの書き方を教えたら、彼女が自分よりもコードを好きになってしまった こちらの記事とこちらの記事に書いた通り、わた
固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
CSS3 Timeline
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSSアニメーション一発芸 - ほとラボ
CSS Property Advent Calendar 19日目のエントリ。 最近自分の中でホットなCSSアニメーションについて。 なぜCSSアニメーションか jQuery.animateでもアニメーションは出来るのに、わざわざCSSでやる理由は何か？ という内容で書こうと思っていたのだけど、11日目の Toshimaru さんのエントリと内容が丸被りしてしまった。 しかも俺の書く拙い文章よりもはるかに詳しくわかりやすく書かれていて申し分無い。 つまり俺はお呼びでないというわけだ。 仕方がないので、一発芸します。 CSSアニメーション一発芸 Snowfall!! クリックすると雪が降るよ。 JavaScript不使用 PCは Firefox, Chrome, Safari で動作確認済 スマホは未確認 雪にマウスオーバーすると・・・？ ソースコードはこちら おまけ 作ったはいいけど没にな
Quipper で最初のリリースなので振り返る - @banyan's blog
5月に Quipper に入ってやっと最初のリリースが迎えられそうな中、チームのメンバー全員がなぜかブログを書き始めた。なんなのこれ... Quipper のスピード感 自分の強みを生かすこと on Quipper Github Issues を利用したリリースマネージャのお仕事 Quipperでのおじさんエンジニアの立ち位置 QuipperでHTML5アプリを作ってる話 Quipperのエンジニアのblog day（ステマじゃないよ） でも @banyan さんが日記書くまでは寝るわけにいかない。 — 北市真 (@KitaitiMakoto) October 22, 2013 同調圧力は見て見ぬふりをしてたけど、外部のブログ圧力に負け僕も書くことにします。 Pull Request の粒度 6月に最初は開発者4人でスタートして、8月に Android 開発者の @dagezi さん、9月
Webサービス作るの難しすぎるよう... - 旧gaaamiiのブログ
こちらの記事。盛り上がってますね。 今すぐ辞めて欲しい、「Ruby on Rails勉強してます」「CakePHP勉強してます」 正直、「背伸びのしすぎ」としか言い様がない。要らない知識を取得するために必要な知識を修得するための時間を捨てているようにしか思えない。GETとPOSTの違いもわからない人が、ルーティングやらフォームの自動生成やら使えるわけがない。 こういうのってけっこう頻繁に盛り上がるようなものなのか、２００８年にも、モバツイの開発者えふしんさんがはじめてWebプログラミングをするなら PHP? Ruby?という記事で似たようなことを書いてます。 Ruby on Railsが10分でWebアプリができた！的な話はあまり好きではない。フレームワークは、まだ行間を読めない初心者が簡単にWebアプリを作るためのものではない。 どちらも、初心者が基本的な技術そっちのけでブラックボックス
アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for spritesCheck out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
小手先エンジニア : Nothing is impossible
最近よく目にする「フルスタックエンジニア」とは何だろうか？ 以前なら(エンジニア)ゼネラリスト、最近はフルスタックエンジニアって呼ばれる類のエンジニアの需要というのは年々高まりつつあります。 ネットワークとサーバがわかってミドルウェアがわかって設計ができてコーディングができてUIも作れてデプロイまでできる。 これは確かに最高です。 わたしはUI周りに弱い、具体的にはJSとCSSに弱いのでそこもカバー出来る人はいいなあと思います。 なにせ一人で公開できるサービスが作れますからね。 UIがカバーできないとプロトタイプというかスケルトンで止まってしまいますw しかもクロスオーバーした技術をもっているということはそれだけで造詣の深い設計が出来る可能性があります。 ところがここに罠が一つあります。 まだまだ未熟なエンジニアが「よーし」とかいってそういうのを目指してしまうと、ただ使い
Reveal - naoyaのはてなダイアリー
Reveal (http://revealapp.com/) なる iOS 向けのランタイムインスペクタなるものを知人のツイート経由で見つけた。ランタイムインスペクタとは何か ･･･ "Reveal brings the power of tools like Firebug and Web Inspector to iOS developers." ということでiOS アプリ用の Firebug みたいなのだと思えば良い。 動画を観てると確かにすごい。3D で動かしながら View の階層を手繰ってアプリのビューがどういう構造になっているかを見ていくことができる。更に動的にパラメータを変更して大きさや動きを変える、なんて Firebug の css の編集みたいなこともできるようだ。ベータ版は無料のようだ。 これは捗る。 RubyMotion で動かす ドキュメントを見てみたところ Re
CSS liefde – CSSの使える!と思えるテクニックを紹介。 » 文章をはみ出さずに折り返す
HTML <pre class="wrap">テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト</pre> pre { width: 300px; margin: 20px 30px; background-color:#d8d1cd; border: 3px solid #c0c0c0; padding: 5px; } .wrap { /* Mozilla */ white-space: -moz-pre-wrap; /* CSS3 */ white-space: pre-wrap; /* IE 5.5+ */ word-wrap: break-word; } PREにはWidthを指定 折り返したい物にはClassをつけて、Fx用CSS3用IE用と指定します。
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
CSS3だけで実現する美麗なスペースワープ 【増田 @maskin】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間: 1分] もはや定番ともいえる次世代ウェブアプリ開発タッグ「HTML5+CSS3+JavaScript」。欧米圏ではHTML5+CSS3の活用事例が毎日何本も公開されており、最近は、「高度」と「アイディア指向」に二分化されている。このデモも高度
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
