jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
【2016年版】ポートフォリオサイトをリデザインしました！
2016年7月4日 CSS, JavaScript, Webデザイン, お知らせ 年始から時間のある時にちょこちょこいじっていた私のポートフォリオサイトがついに完成しました！長かった…。2012年にリデザインしてから実に4年ぶりの更新です。ようやくレスポンシブにも対応したり、アニメーションを取り入れたりと、多々変わったところがあるので、いくつかかいつまんで紹介します！ ↑私が10年以上利用している会計ソフト！ ちなみに前回（2012年）リデザインした時の様子は「ポートフォリオサイトをリデザインしました！」という記事で紹介しています。 今回ももちろん日本語版ページありますよ！ ホーム ホームはこんな感じに変わりました。 全体のデザインは私の名刺のデザインをベースにしています。 蝶のグラデーション ふわりふわりと移り変わるグラデーションカラー。まず色は空divに background: lin
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
カードデザインのポイントと実装方法
2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら
Webデザインにシャドウを取り入れる時のポイントいろいろ
2016年3月10日 CSS, Webデザイン 要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 ↑私が10年以上利用している会計ソフト！ If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 このTweetにも描かれているとおり、1年周期でシャドウの扱いが変わっていますね。2014年は影なしの完全フラットデザイン。2015年はロングシャドウ。そして2016年はこれから紹介するぼんやりふんわりシャドウ。 CSSで実装するシャドウの基礎 通常のシャドウ 要素にシャド
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
Enterキーを無効にする方法 - Qiita
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
CoffeeScript と TypeScript をそれぞれ実務案件で使ってみた感想 | DevelopersIO
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
USBメモリにReadyBoostを設定してキャッシュを逃がす
ReadyBoostは昔からあるが、Windoes7（64bit）にして物理メモリを４ＧＢ積んでいればお世話になることもないと思っていた。 ネットを見るぐらいの使い方しかしていないので十分なハズである。 （ＲｅａｄｙＢｏｏｓｔの記載は下のほう。★までジャンプ） 症 状 最近はスリープから復帰後しばらくすると、ハードディスクへのアクセスが１０分くらい延々と続き、ブラウザの表示もままならない。この間はひたすら待つしかない。 何が原因なのか分からないのでとりあえずリソースモニタで確認すると、system PID=4が書き込みをしていることまでは分かった。 何を書き込んでいるのか。 原因の推測 可能性として、 仮想メモリのページングファイル インデックス作成 プリフェッチ（次の動作を先読みしてキャッシュする） あたりが怪しい。 仮想メモリはハードディスクに書き込まれる。 多くのメモリを消費すると仮
CeVIO Official Site
「CeVIO Creative Studio FREE」（以下「本製品」といいます。）については、「CeVIO Creative Studio FREEエンドユーザー使用許諾契約書」を承諾していただくことがご使用の条件となっています。あらかじめ内容をよくご確認の上、同意していただける場合のみご使用ください。 第１条（当プロジェクトの権利等） CeVIOプロジェクト（以下、「当プロジェクト」といいます。）は本製品の使用をお客様へ許諾するために必要な権利を有しています。 お客様による本製品の使用に関して、お客様にはこの契約中で許諾される以外は何らの権利も発生せず、本製品に関する全ての権利は当プロジェクト及び原権利者に帰属します。 第２条（使用許諾） 当プロジェクトは、本製品の非独占的な使用権をお客様に許諾します。 第３条（使用の制限） １ お客様は、商用目的で本製品を使用することはできません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ - NAVER まとめ