TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ

Amazonを利用している方やこれからAmazonを利用する方々に朗報です。たったこれだけでAmazonにある商品を90％offで買える方法を見つけてしまいました。それは、URLに「&pct-off=90-」 と入力するだけです。こんなにも便利な裏ワザは今までに見たことがありません。 今回は、この魔法のキーワード「&pct-off=90-」について詳しく解説します。ぜひ、参考にしてください。 1：Amazonで90％off以上の商品を2秒で一発検索する方法冒頭でもお伝えしましたが、「&pct-off=90-」とURLの最後に入力するだけで90％off以上の商品を一発で検索することが簡単にできます。では実際の検索の方法について詳しくご説明します。 まずは、Amazonのホームページを開いて探したい「カテゴリー」を選択します。ここで重要なのが、キーワードの項目は絶対に空欄にして「検索」ボタンを

プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト

【ヒカ☆ラボ】JavaScriptの情報交換LT会~React/Redux,Node.js,アニメーション,Processing等々~

TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ

（ゆるいスキルアップ的な意味で）フロントエンドエンジニアが暇なときにやると良いかもしれないこと。 主観です。「これが良いよ！」というのがありましたら、ぜひ教えて下さい🙇 W3Cを読む whatwgを眺める。 ↑のissueを見る MDNを読む JavaScript CSS Web API NodeのAPIを読む caniuseを見る npmパッケージを眺める starが多い順 パッケージ一覧 ↑で１位のexpressが使っているパッケージ スライドを読む node学園 React.js Meetup Mediumを読む JavaScriptタグの記事 FrontEndタグの記事 Twitterで著名人をフォローする TBD @addyosmani @LeaVerou @paul_irish @BrendanEich Podcastを聞く Mozaic.fm Front-end Five

フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ

アイデアのつくり方「60分で読めるけれど一生あなたを離さない本」という帯は本当だった。 2022 8/08 社会人になって企画の仕事に就いていた頃、大変影響を受けた本をご紹介します。右も左も分からずにガムシャラだった私に、デザインの専門学校に通っていた友人が「学校ではこの本を皆買うように言われて、皆がバイブルのように扱っている」と絶賛して私にすすめてくれました。 この本には「60分で読めるけれど一生あなたを離さない本」という何ともすごいキャッチコピーの帯が付いていました。 出会ってから20数年経った今、この帯の言葉は本当だったと実感しています。 ▼ 小さくて・・ ▼薄い本です（全102ページ） 『アイデアのつくり方』(A technique for producing ideas)はジェームス.W.ヤング(James Webb Young)が著した書籍。 原著の初版は1940年に出版され、

（言葉遊びみたいな記事を書きますね。その上、用語の使い方が間違ってたらごめんなさい。） 一時期、フルスタックエンジニアって言葉流行りましたよね。ふと、要件どこまでだっけ？と思って調べようと思ったんですが、日本語で調べると、妄想が暴走してロクな話が出てこなそうなので、英語の方で調べてみるとわかりやすい。 What is a Full Stack developer? Server, Network, and Hosting Environment. Data Modeling Business Logic API layer / Action Layer / MVC User Interface User Experience Understanding what the customer and the business need. 個人的には、ネットワーク監視やデプロイなどのインフラ運用

「API Food」はさまざまなAPIを素早く検索できるサービスです。さまざまなAPIが存在しますが、それらを横断して検索できるサービスになります。キーワードを入力するとそれに関連するAPIが表示されますよ。API探しのときに助かりますね。 以下に使ってみた様子を載せておきます。まずAPI Foodへアクセスしましょう。旅行関連のAPIを探してみます。「travel」で検索してみました。 するとこのように旅行に関連するAPIが一覧で表示されました。クリックすると各APIのページもしくはAPIが紹介されているページへ遷移します。検索速度はかなり速く、タイプするたびにリアルタイムに検索結果が変化しました。ぜんぶで15000以上ものAPIが検索対象になっていました。ぜひAPIをお探しの際にご活用ください。 API Food （カメきち）

はてなブログを使っているとき、記事を書き上げて最後に押すボタンをつい、押し間違えそうになった経験はありませんか？ 最後の一手を、うっかり押し間違えないように これまではてなブログの記事編集画面では「公開する」ボタンと「下書きに保存する」ボタンを並べていましたが、これにより誤って隣のボタンを押し間違えてしまうということがありました。 今回のリニューアルでは、 ドロップダウンで選んでから押すことによって、2択を1択にすることで押し間違いを防止。 それぞれの状態で、ボタンのデフォルトを変えることによって毎回悩ませることを減らしました。 下書きの状態から 公開済みの状態から インターフェースに完成はない これからも様々なユースケースを考えて、改善していきたいと思います。 ぜひ、新しくなった公開ボタンではてなブログをご利用ください！

2016 - 06 - 06 Google検索１位と２位以下は大違い。「２位じゃだめなんです」 ☆ブログ☆ ☆ブログ☆-ブログ運営 ☆ブログ☆-初心者さん向け Twitter Google Pocket やっぱりGoogleの検索順位は1位がいい ここ１週間ほどで独自ドメインにしたことで下がっていた検索順位がかなり戻ってきました。そして昨日ついに２～４位をウロウロしていたものが軒並み１位に返り咲き。 以前とある議員さんがいいました。 「２位じゃだめなんですか？」って。ＰＶが欲しい、収益を上げたいという人がいるならば、やっぱり１位じゃないとダメなんです。もしかしたらまた落ちてしまうかもしれないので、落ちないうちに記事にしておきます。 やっぱりGoogleの検索順位は1位がいい Analyticsで眺めてみるPV GRCの検索順位で眺めてみる こんな記事を見つけました どうやって1位を取るか

JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。 最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。 はじめに 以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=

デザイン会社Basecamp⛺️の代表。dely株式会社のCXO。東京で活動する事業作りを仕事にしているデザイナー / プロダクトマネージャーです。 仕事の依頼はDMで受け付けております。

この記事は、スマートフォン時代のWebコーディングスクール のスライドの一部を再構成した記事です。 この記事ではHTML5以降の「セクショニング・コンテンツ」に絞って書いています。 HTML5以降で一般的なWebページをマークアップしようとした際、セクショニング・コンテンツへの理解は不可欠であると私は考えています。 セクショニング・コンテンツとは まず「セクション」とは「区分、節、（会社などの）部門」のことを指します。 要するに「区切り」のことです。 セクショニング・コンテンツは「見出しやフッターの範囲を定義する
コンテンツ」のことで、潜在的に見出しとアウトラインを持っています。 これまでのHTMLだと何が問題？ 上の図はスライド資料のため、「記事小見出し」の下にあるはずの本文や、サイドバー内にある要素は省略しています。 例えばこのような場合だと、人間にはどこからどこまでが本文でどこがサイ

ituore.com 2024 著作権. 不許複製 プライバシーポリシー

概要 社内の備品（主にスマホやパソコンなどの端末）をアプリで「ピッ」とスキャンするだけで、簡単に貸出/返却処理ができるTSUTAYAのレジ風システムを作りました。 その名も「ネコレジ」 OSSなテスト支援ツール「Chibineko」に続く、ねこシリーズ第2弾です。 ネコレジのシステム構成 備品を識別する仕組み 備品の識別にはQRコードを使用します。 各備品にはそれぞれ一意のIDを埋め込んだQRコードを貼り、リーダー側（クライアントアプリ）で識別できるようにします。 QRコードの印刷にはテプラPRO SR5900Pを使用。 このテプラはLAN接続対応なので、iPhoneからも直接印刷ができるスグレモノです。 ちなみにうちの部署にはスマホやガラケーなどが1,000台以上ありますが、気合いですべてに貼りました。 会員カード（通称ネコカ） ユーザーの識別も同様にQRコードで行います。 できるだけお

2016/05/21（土） 17:00〜17:50 JJUG CCC 2016 Spring GH-6 2011年にリリースした弊社のサービスは、Seasar2ファミリーで構築しました。利用者数は1000万人以上となり、今もサービスとして成長しています。2016/9/26にSeasar2がサポートを終了するというアナウンスを受け、私たちもアクションを起こしました。 サービスには絶え間なく機能改善、機能追加の要件があり、その対応をしながらSeasar2から移行するという前提条件を考慮すると、選択肢は限られます。Scalaなど言語自体を変えることはなく、Javaのままとしました。新規アプリケーションを作成すると監視対象とするアプリケーションの数が増え、様々なコストが増えると考えたため新規とはしませんでした。こういったさまざまな条件のもと、まずはSeasar2で動作している機能から、まずリスクが

周囲に余白（白枠）のある画像を、画像編集ツールでトリミングする作業に追われたことはありませんか？ 僕は面倒で周囲の余白を残したままブログに使ってしまうことが多いのですが、ページが間延びして本来はよろしくありません。 何とか自動化できないかと調査した結果をご紹介します。 面倒な画像の周囲の余白のトリミングを自動化する ブログを運営していると、メーカーが広報素材として用意した物撮り写真を使う機会は少なくないものです。 広報素材によくあるパターンに、白い背景で撮影した画像があります。 白く飛ばした背景の中に、ポツンと対象が写っている画像。いわゆる、白バック飛ばし。 余白となる周囲の白い背景部分は広めに取ってあることも少なくなく、それをそのままブログに使うと、ページが間延びしてしまいがちです。 余白を詰める場合、通常はPhotoshopやPixelmator、Preview.appなどの画像処理ソ

Sublime Text は、私のお気に入りのプログラミング用テキストエディタです。 Sublime Textで気に入っている特徴の1つは、あいまい検索アルゴリズムです。ファイルや関数の検索が超高速なのです。これまで多くの人が、インターネット上で、この仕組みについて質問していましたが、満足の行く回答はありませんでした。そこで、私が自らこれを解明することにしました。 全部読むのが面倒な方へ 本文を読まずに最終結果だけ知りたいですか？　了解！　私は、あなたを責めたりしませんよ。 インタラクティブなデモ： こちらをクリック ソースコード： C++ 、 JavaScript Sublime Textの仕組み Sublime Textのあいまい一致とは何でしょうか。そして、なぜそれはそんなに賢いのでしょうか。聞いてくれてうれしいです。 Sublime Textには、2つの非常に便利なナビゲーション関