初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。

見栄えからアニメーションまで基本的にCSS（一部SVGも使用）を使って作成されているユニークなローディングアニメーションを、CodePenで公開されている中から紹介します。 ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考になるものやインスピレーションもらえそうです。 Loading Idea HTMLとCSSで作成した三角形を並べ、それらをタイミングずらしてopacityを使うことで見栄えを実装しています。 このデモはすべて同じカラーですが、カラーをバランス良く異なるものに設定するのも良さそうです。

2017/05/24 (更新日: 2019/03/04) フロントエンドエンジニア向け、超効率的な勉強方法を解説【断言】 PROGRAMMING 将来的にはフリーランスエンジニアを目指している、もしくはフロントエンドエンジニアとして就職を考えている。 そういった計画のもと、とりあえずは独学でフロントエンドを学んでいる。もちろん、勉強することが全てではないので、早い段階で“実務レベルのスキル”を身につけたい。 こんな方に向けて書いてます。 尚、この記事はフロントエンドエンジニアとして、最速で実務スキルを身につけたい方向けです。もっと網羅的な知識を学びたい方は、【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】をご覧ください。 それでは見ていきましょう。 フロントエンドエンジニア向け、超効率的な勉強方法は０から作ることです 最低限の基礎を終えていることが前提。 最低限の基礎とは、入門書

2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます

今回は、デザイナーであればついつい食い付いてしまう「フォントの話」についてです。ウェブサイトや公共交通機関など、日常的に目にするところでどんなフォントが使われているのか、改めてまとめてみました。 Appleのウェブサイトで使われている有名な組み合わせと言えば、「AXIS」と「Myriad」です。 他の日本語フォントと比較すると分かりますが、「AXIS」は直線フォルムで先進的な印象を与えるため、Appleのブランドイメージと良く合っています。 そのAXISに、Frutigerよりもやや有機的で愛嬌のある「Myriad」を組み合わせることで、冷たすぎる印象になるのを和らげていると思います。 Apple公式サイトのCSSを見ると、「Apple TP」というフォントが指定されていますが、これはAXISとMyriadのオリジナル合成フォントパッケージのようです。 ただ合成フォントにしただけでなく、フ

トレタ アドベントカレンダー3日目担当の増井です。 最近、新しいサービスリリースに少し関わることがあり、そこに向けてオススメした開発で役に立つサービスをここでもまとめてみることにしました。 私が、実際にトレタやキタヨンを作るときに使ったサービスを中心に上げています。特に使った方がいいサービスには [必須]を書いてみました。 他にもオススメのサービスがあったら、コメントで教えていただけると嬉しいです！ BrowserStack [必須] https://www.browserstack.com http://qiita.com/tags/BrowserStack 言うなら"Browser as a service"。色々なブラウザをリモートで操作してWebの動作確認をしたり、指定したURLのスクリーンショットを多種多様なブラウザで撮ってきてくれるサービス。 Chrome Extensionを

Google検索エンジン初期の仕組みは論文で書かれている Googleの創業者はご存知の通り「ラリー・ペイジ」と「セルゲイ・ブリン」の２人である。 ２人はスタンフォード大学での博士課程在籍中に知り合い『検索エンジン』について共通の関心があったことから、1998年に共著で論文を執筆した。論文タイトルは『The Anatomy of a Large-Scale Hypertextual Web Search Engine（大規模なハイパーテキスト的なウェブ検索エンジンに関する解剖）』。 この論文では、Googleの検索エンジンのインデックスや検索順位決定のベースとなった考え方が詳しく解説されている。「こんなに載せてしまっていいの？」と不安になるレベルで詳しく書かれている。 SEO対策の前に論文を読んでおこう この論文は、スタンフォード大学の情報研究室のWebサイトから参照することができる。名論

こんにちは。ほりでーです。 フロントエンドチームから、チーム開発には欠かせない「Git（ギット）」を基本から学ぶための連載がスタートします！　ということで、今回はその第一回目。 具体的な使い方の説明に入る前に、そもそもGitとは何か、なぜGitを学ぶ必要があるのか、という概論から入っていきたいと思います。前半ではスキルとしてなぜGitが重要視されているのか、後半ではGitに登場する基本的な概念について、初心者にもわかりやすく説明していきます！ 1. Gitが使えないと困る理由 Gitは、HTML・CSS・JavaScriptなどの コードを管理するためのツールで、世界的に定評があります。極端な話、Gitを使えるようになったからと言って、デザインが上手くなったり、すごいJavaScriptが書けたりするわけではありません。デザインやプログラミングのテクニックとは、あまり関係がないスキルなんで

緑豊かな居心地の良い“オアシスの宿り木”のような快適な空間で、美味しい食事をコーヒーやワインを飲みながら時間を過ごせるダイニングカフェ。 １人で静かに過ごす方、友人と楽しく過ごす方、それぞれのペースでくつろげるようなダイニングカフェと最先端のインターネット環境を融合させた新たなライフスタイル空間をご提供してまいります。

Webサービスを作ってみました。 とりあえず使えるレベルまで作ってみてから早１年、満を持しして発表しようと思います。 決して、ブログを書くのがめんどくさいかったわけではありません(｀・ω・´) 自己紹介 よくある皆様のブログの流れにそって書こうと思うので、まずは自己紹介から。 金融ITの会社でPMやっています。 とある後輩にソースコードをチェックアウトしないPMは糞だと言われていたけども、 とうとうソースをあまり見なくなってきた今日このごろです。 仕事では全くプログラムをやらないけど、趣味でたまにちょくちょくと書きます。 Webサービスを作るのは興味本位でキーワードでTweetをカウントする簡単なものを作って以来の２つ目。 基本、動けばいいという趣味プログラマです。 作ったWebサービス 怠け者な自分を矯正し、充実した1日を過ごすことを目指したサービス。 Committer サービスのこだ

Quiver: The Programmer’s Notebook Twitter のタイムラインで こちらのエントリ を見かけて、これはよさそうと思って衝動買いしてちょっと試してみたところ、自分のニーズを全て満たしていると言っても過言ではないくらいよかった。ので、この感動を同じニーズを持った人達に伝えるべく、軽くレポートしてみようと思う。 Quiver 移行前のメモ管理 Dropbox に markdown 形式で保存 emacs で編集 Marked 2 を emacs から起動して閲覧 という感じで落ち着いていた。 が、いまいちしっくりきてなかったというか。メモ管理に最適化されてる感じは薄かった。シェルの世界から出ないでよいのでラクだなあというくらい。 Quiver の特徴 最たる特徴は以下。 1つの Note は複数の Cell で構成されている 現状、Cell は以下の5種類 T

2016.02.12 【新型MacBook】USB Type-Cで充電しながらHDMI&USB接続。純正Multiportの半額 １今日は 12インチ MacBook(新しいMacBook)向けの『USB-C Digital AV Multiportアダプタ』と同等の機能を持ち合わせた非純正の『GranVela USB 3.1 Type-C/4K HDMIアダプタ』を紹介。 仕事で HDMI 端子対応のプロジェクターに画面を映したり、自宅で外部ディスプレイに接続する際には必須なので、1つは持っておきたい。 僕が今回購入したのは上のアダプタ。この製品は 12インチ MacBook など USB Type-C を搭載する端末向けの製品で、USB Type-C 端子から給電しながら HDMI 出力や外付けHDD を接続できる優れもの。純正の価格の約半額で購入できる。 別に必要ないと思っていた U

税制大綱 企業投資に優遇策[写真]NEW! 首里城 無残な北殿に涙の県民[写真]NEW! 逮捕歴の検索結果 削除命じるNEW! 強風で足場倒れる 園児らけが[写真] ミキプルーン 中井定着の理由[写真]NEW! 見える? 今夜コールドムーン[写真] 筒香の移籍先 3球団に絞った[写真] 発言小町 梅宮さん謎料理の解[写真]

Ruby on Rails チュートリアル プロダクト開発の０→１を学ぼう Railsチュートリアルとは？