グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかなと思います 結論から 僕が考える現時点でのWebアプリでの帳票印刷のベストプラクティスは、 Adobe XD や Figma で帳票のレイアウトをデザイン
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
pythonでサクッとwebサービス作るならFlaskよりsanicがいいよって話 - Qiita
▄▄▄▄▄ ▀▀▀██████▄▄▄ _______________ ▄▄▄▄▄ █████████▄ / \ ▀▀▀▀█████▌ ▀▐▄ ▀▐█ | Gotta go fast! | ▀▀█████▄▄ ▀██████▄██ | _________________/ ▀▄▄▄▄▄ ▀▀█▄▀█════█▀ |/ ▀▀▀▄ ▀▀███ ▀ ▄▄ ▄███▀▀██▄████████▄ ▄▀▀▀▀▀▀█▌ ██▀▄▄▄██▀▄███▀ ▀▀████ ▄██ ▄▀▀▀▄██▄▀▀▌████▒▒▒▒▒▒███ ▌▄▄▀ ▌ ▐▀████▐███▒▒▒▒▒▐██▌ ▀▄▄▄▄▀ ▀▀████▒▒▒▒▄██▀ ▀▀█████████▀ ▄▄██▀██████▀█ ▄██▀ ▀▀▀ █ ▄█ ▐▌ ▄▄▄▄█▌ ▀█▄▄▄▄▀▀▄ ▌ ▐ ▀▀▄▄▄▀ ▀▀▄▄▀ そもそもPythonでwebアプリを
柔軟なログ収集を可能にする「fluentd」入門 | さくらのナレッジ
複数台のサーバーやクラウド環境を組み合わせてのサービス運用においては、ログの収集方法に工夫が必要となる。こういった場合に有用なのが、さまざまなログの収集手段を提供するfluentdだ。今回はfluentdのアーキテクチャやそのインストール/設定方法、基礎的な設定例などを紹介する。 さまざまな方法でログを収集できるfluentd 今回紹介するfluentdは、Treasure Dataが開発するログ収集管理ツールだ（図1）。オープンソースで公開されており、Linuxや各種UNIXで動作する。 図1 fluentdのWebサイト ログ収集のためのソフトウェアとしてはsyslogdやsyslog-ngなどが有名だが、fluentdがこれらと異なる点としては、以下が挙げられる。 さまざまなソースからのイベントをさまざまな媒体に出力できる fluentdの大きな特徴としては、ログの収集方法やログの記
みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～ « SetucoCMSプロジェクト
はい、こんにちは。リーダーのskyguildこと三上です。 SetucoCMS合宿@2011のLT大会でリキッドレイアウトの話をしました。今回はそのスライド内で語り切れないデモの部分を中心に解説してみます。 リキッドレイアウトのLTスライド うまく表示されない方は下記のリンクからご覧ください。 みんな大好きリキッドレイアウト（別窓で開きます） 要約 リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して％で幅を指定する。 リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる！ とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。 参考にしたサイト：「サイトの横幅」再論：950px時代のウェブデザイン 実装方法 というわけで、普通のリキッドレイアウトと、固定幅+リキッドレイアウトの実装方法について解
ブラウザのスクロールバーをデザインする「perfect-scrollbar」 - ┗┐＜(՞ਊ՞)＞┌┛
ブラウザのスクロールバーはダサいです．まだ右端のスクロールバーなら許せるところはあるのですが，ページ内コンテンツでoverflowなどで出現するスクロールバーには怒りを覚えます． デフォルトのデザインがあまりにも嫌なので色々探していて，jScrollPaneやらを見てたのですが，あとで動的にdivを追加した時，スクロール範囲が自動で大きくならず，スクロールできなかったり，なんか動きモッサリしている気がして使う気になりませんでした． そこでもっとスマートに書けるライブラリは無いのか？と思って探して見つけたのが「perfect-scrollbar」です． http://noraesae.github.com/perfect-scrollbar/#Demo デモページに飛びます．あずにゃんの画像が設置されていて，画像サイズ（正確には背景画像が設定されているdiv）の大きさに合わせてスクロールバー
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
はじめてのKohana (1) Hello World ! - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） KohanaはPHPのMVCフレームワークです。 日本語情報が乏しいせいか、まだあまり国内では使われていない印象ですが、 ここに導入のメモを記してみます。全七回。 はじめに 本連載は、私がKohanaに興味をもって導入し、色々試してみた記録をまとめたものなので、 あまり体系的に紹介できていない部分があるかもしれませんが、ご了承ください。 また、導入時に書いた物なので、そこまで突っ込んだ内容はありません。 Kohanaの日本語情報は日本ユーザ会による翻訳ドキュメントぐらいしか無く（内容は1バージョン前だったりします）、 公式（英語）もそこまできちんと整備されているわけではなく、まだ歯抜けも見られるのが現状です。 そんな中で、少しでも情報を補足・共有出来れば良いなと思い、筆をとった次第です。 執筆当時の最新版（バージョン3.2）を基
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
ロリポップのサイト改ざん事件に学ぶシンボリックリンク攻撃の脅威と対策
既に報道されているように、ロリポップ！レンタルサーバーに対する改ざん攻撃により、被害を受けたユーザー数は8428件にのぼるということです。ここまで影響が大きくなった原因は、報道によると、(1)「WordPressのプラグインやテーマの脆弱性を利用」し、不正なファイルがアップロードされた、(2)パーミッション設定の不備を悪用されて被害が拡大した、ということのようです。 29日夜の時点では、攻撃者の改ざん手法について「WordPressのプラグインやテーマの脆弱性を利用」し、不正なファイルがアップロードされて「wp-config.phpの」の設定情報が抜き出されたと説明していたが、30日午後7時過ぎの説明で、この脆弱性が侵入経路となって同社のパーミッション設定の不備を悪用されたことが原因だったことを明らかにした。 「ロリポップ」のWordPressサイト改ざん被害、原因はパーミッション設定不備
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Open Web Apps と Web 標準 - Archive of obsolete content | MDN
注: クイックスタートの項目は、新しい、より集中的なクイックスタート記事 として更新され、従来のクイックスタート記事をすべて置き換えるものとなりました。この記事がより有益な情報源となり、古い一連の記事よりもより素早い学習体験を提供することを期待しています。 この記事は、開発者、プロジェクトマネージャ、その他アプリの開発や配布に関わる役割を担いつつ、Open Web Apps についてより詳しく学びたいというすべての人にとって最適なスタート地点となることを意図して書かれています。Open Web Apps とその背景にある哲学の、簡単で高次元な概要を提供します。 Open Web Apps は一般的な Web サイトや Web ページと本質的な違いはありません。いずれも HTML、CSS、JavaScript といった標準的でオープンな Web 技術を用いて開発され、Web ブラウザ経由でア
「KPI」、「KGI」とは？〜今更聞けないマーケティング用語をおさらい！
日頃の業務で何気なく使っている専門用語。でもその言葉の意味、ちゃんと理解して使っていますか？ ソーシャルメディアマーケティングラボが、なんとなく分かっているつもりでも、実はよくわからなくて「もやもや」している？！今さら人に聞くのはちょっと恥ずかしい、ウェブマーケティング用語を分かりやすく解説します。 用語説明 KPI（Key Performance Indicator）重要業績評価指標 KGI（Key Goal Indicator）重要目標達成指標 ビジネスにおいては、各組織レベルで最終的な「目標」を定め、その目標を具体的に実現するための「手段」を策定し、その手段がきちんと遂行されているかどうかを定量的に測定する「指標」を決めることが必要となる。KGI（重要目標達成指標）は、目標（ゴール）に対する達成度合いを定量的に表すものであり、KPI（重要業績評価指標）は目標達成プロセスの実施状況を計
PhoneGap/CordovaがiOSのネイティブ機能を使うしくみ - 方向
さいきんWebとiOS/Andoroid Native Appの融合がすすんでいますね！ ブラウザコンポーネント(WebViewという)のJSからiOSのネイティブ機能を呼び出すスタイルも流行っています． PhoneGapとかFacebookアプリとかね！ 自分は勝手にJS-Native Bridgeと呼んでいるのですが， あれってどうやってるのって話 Google先生で「uiwebview native」でぐぐると UIWebViewでWebとネイティブを相互連携させる方法について iPhoneのネイティブ機能をWebViewから呼び出す方法 こういう記事が出てきます ようするに Obj-C → JS [webView stringByEvaluatingJavaScriptFromString:@"JSCode"] JS → Obj-C webView:shouldStartLoadW
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【後編】 - くらげだらけ
前編ではiOS5のMobile Safariから使えるようになったHTMLやCSSの要素などについて試してみた、半分だけ紹介・解説しました。まだ前編を読んでいないという方は先に前編を読んでおくことをおすすめします。 →iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 ざっと今回試してみたプロパティやテクニックをもう一度振り返っておくと以下のような感じです。 position:fixedを使ったタブUI overflow:scrollを1本指ですいすいスクロールさせる Web Symbols typeface CSS Only Transition Effects 新しいInput typeとネイティブっぽいselect UI Inline SVGとSVG icons 前編では最初の３つを紹介・解説したので、後編では残りの３つを紹介したいと
ゆうちょ銀行もスクレーパーかけたら、色々終わってた。 - それマグで！
パスワードの話はこっち→ゆうちょ銀行のパスワード紛失したので、再発行手続したら、コーヒー吹いた話。 ゆうちょ銀行のスクレーパー ゆうちょ銀行のタイムアウトがきついのと、「ホームへ」ボタンを押さないとセッションエラーになるので頭に来た。ブラウザ戻るボタン。押させろよ。 ちょっと本気スクレーパーを書いてやった。スクレーパーを書いて気づいた。ゆうちょ銀行のオンラインは色々終わってた。（後述） ゆうちょ銀行は ゆうちょ銀行にはログインのために以下の３つが必要になる。 ID 1234-5678-09876 合言葉 [質問,回答][質問,回答][質問,回答] パスワード リクエストの仕組み。ボタン押した時にFormにActionとhidden eventを入れてSubmitする。 これだけわかればあとは簡単。 サンプル require 'yucho_bank.rb' cli = YuchoBank.n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色彩センスのいらない配色講座
http://ideahacker.net/2013/07/26/5962/
最近の Unicode 顔文字「ˉ̞̭ ( ›◡ु‹ ) ˄̻ ̊」について調べてみた - ワタタツの日記!(2012-03-02)