CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
英作文に時間をかけるな！英語圏のWEB制作現場でよく使われる英語表現テンプレート集！【メール編】 | バンクーバーのうぇぶ屋
さて、ちょっと真面目に日本人クリエイターの海外進出を少しでも後押ししたいなぁーと、来年からこんなことを始めるんですが、やっぱり英語って奴がネックと考える人は多い。 それこそ、例えば語学学校とか行っても、もちろんそこで制作現場で使われる英語を教えてくれるはずも無い。例えばWEB系であればこんなやっちゃいけないミスもあったりする。専門学校行ったりすれば話しは別なんでしょうが。 というわけで、僕らが誇る英語大好き人間兼海外WEB屋として巷じゃちょっと有名な玉さん（僕の英語メールの先生ｗ？）に、来年から始めるクリエイター海外進出プロジェクトの『制作現場英語レッスン』をバンクーバーで定期開催する事にしました〜。まぁ、ようするに『英語圏の制作現場では、どんな英語のやり取りが繰り広げられているか』を、英語教師じゃなくWEBクリエイターに教えてもらおうって企画ですね。ぶっちゃけ、ドラマとかそういうの見るよ
アクセシビリティから変わるビジュアルデザイン
W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら
色を指定したら、その色に関連した色合いを抽出してくれる・「colllor」 - かちびと.net
colllorは色のコードを指定する事で、その色と相性の良い色、トーンなどを抽出してくれるカラーツールです。 colllor
なぜ日本のWebデザインはダサいのか？ | Goodpatch Blog
こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
ウェブでの文章の書き方 - 情報考学 Passion For The Future
・ウェブでの<伝わる>文章の書き方 元ヤフー知恵袋などのプロデューサーで、現在はアカデミックリソースガイド社長の岡本さんが本を出版した。なんと文章術の本だった。なぜ岡本さんが文章術？と意外だったが、読んでみて、なるほど納得。ヤフーのような何百万人が使うサービスで、万人に伝達できるニュースリリースやお知らせを書く実践ノウハウがまとめられていた。 たとえばイベントの集客用の告知文をどう書くか。私もよくイベントを主宰するのでこの書き方が難しいのは知っている。岡本さんがおすすめするのはたとえばこんな文章。短い文字数でちゃんと伝わる秘訣がここにいくつも込められている。 「2012年12月31日（月）、山下公園で「本年最後」の忘年会を開催、参加者募集中」 「2012年10月21日（日）～10月22日（月）、山中湖でライブラリーキャンプ2012秋「創る図書館を創る/未来の図書館を作る」を開催、30名様限
WEB屋にとって便利なジェネレーター色々！最近のオススメも、昔から使ってきた物もまとめてご紹介！ | バンクーバーのうぇぶ屋
WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ | 高橋文樹.com | デザイン
この投稿は 11年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。 色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。 みんな大好き愛生会病院 僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。 Webで色彩
WEBサイト作成者に超オススメ！たった500円でプロのアドバイスが買える「ココナラ」の費用対効果がすごい！ | お土産屋さんブログ
WEBサイト作成者に超オススメ！たった500円でプロのアドバイスが買える「ココナラ」の費用対効果がすごい！ 7月にココナラというWEBサイトが正式オープンしました。 プロやセミプロの経験・知識・スキルを500円で取引できるサイトです。 誰でも「経験・知識・スキル」を出品したり、それを購入することができます。 人気のあるサービスは、自分の似顔絵を描いてくれたり、占いをしてくれたり、恋愛や仕事などへのアドバイスのようです。 (似顔絵は、友人の誕生日にあげると喜ばれるよ！) さらには、オススメのお土産を教えてくれたり、業界の裏話をしてくれるマニアックなサービスまであったりと、そのサービスは様々。 そんな中でもWEBサイトを作っている人に超オススメなのが、自分のWEBサイトを診断をしてくれるサービスです。 例えば、副業者がWEBサイトを作る場合、あまりお金をかけられないので、そのほとんどを自分で作
私がweb制作でよく使うサイト47+α 作業ごとリスト
web制作でお世話になっている便利サイト 今回は画像もなしに一覧にしてしまおうと思います。使うときにパッと一覧するような実用性を考えているので、詰めてあった方がいいですよね。 webcre8がwebサイトの制作をしているとき頻繁にアクセスするサイトリストです。これらは大半、webcre8がこれまで「*役に立つ」タグをつけてブクマ管理していたものですが、他にも漏れがあったり他のタグに入っていたり、何故か毎回検索して使っていたサイトも多いので今回ひとまとめにしてついでにシェアしてみようかなって感じです★要はリンク集ですね。 これらのサイトをぐるぐる回っているうちにみるみるwebサイトが…出来てくると良いですねｗ 素材サイト まずはよくある素材サイト集。当然全てフリーで商用可です。webcre8は写真をバナーや商用サイトに使う事が多いので、有料素材が用意出来る場合を除き普段からクレジット不要のこ
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
3分でそれなりに分かる Web フォント
こんにちは。Web 担当の真谷（シンガイ）です。 先日「Web Font ってどうなの？」という非常にアバウトな問いをもらい、Web フォントについて説明する機会がありました。 今回はその時説明した3分でそれなりに分かる Web フォントについて記載します。 Web フォントとは？ CSS2 のユーザーの PC にインストールされているものを指定するものと違い、サーバー上にあるものを利用するフォントです。使いたいフォントファイルをサーバーに上げる・Web サービスから取得する事で、柔軟にフォントを変えることが出来ます。 Web フォント 導入方法 Web フォント提供サービスから直接フォント読み込みして使うのが一般的です。 例を挙げるとデコもじやFONT+（フォントプラス）では 会員登録 Web フォントを使用するサイト（ドメイン）の登録 Web フォント提供サービスから発行されるコード設
フリーランスのweb屋な人が、見積や注文書、請求書を発行する際のポイント。 | たけろぐ
要所要所で追記してます。 フリーランスのweb屋な人が、仕事をする時の書類の流れとポイントをまとめてみました。 ざっくり言うと、 見積書発行→注文書発行→お客さんが注文書返送→納品→請求書&納品書発行 という流れです。 「ここまで書いちゃう？」的にけっこう書いてるので、 「そんなんわかってるよー」て方も、確認の意味も含めてご一読あれ。 ちなみにうちは「見積兼注文書」として発行しています。 また、後述しますが、納品書まで出すことはあまりありません。 書類の送付方法について まず基本的な、でも間違えると面倒な部分から。 各書類の送付方法は、 ・原本郵送 ・FAX ・PDF どれが可能なのか確認しましょう。 見積書や注文書と請求書で異なる場合があるので、必ず両方確認してください。 注文書はFAX・PDFでよくても、請求書は原本という所がたまにあります。 また、請求書を送る場合は、現実的に郵送のみ
レスポンシブWebデザインで作られた10の美しすぎるサイト ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
PCにモバイル、スマートフォンにタブレット、そして今後はデジタルTVまでユーザーがデジタルコンテンツに多種多様なデバイスでアクセスし、消費する時代が本格化している最中。デバイス毎にウェブサイトをデザインしていてはキリがないとばかりに、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやOSにデザインを柔軟に対応して表示させる手法。今回は、そんなレスポンシブWebデザインを実践しているサイトからThe Next Webが厳選した10の素敵なサイトを紹介します。 — SEO Japan 最近、皆が異なる方法でコンテンツを消費している。私の母はネットブックを持っているし、友人は27インチのiMacを持っていて、ガールフレンドと私はスマートフォンを持ち、彼女の母はiPadを持っている。 あなたのコンテンツはこれまでになく多くのデバイスとブラウザで閲覧されており、デザイナーはそのこ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
サービス終了のお知らせ
2024年9月30日をもちまして「秒刊SUNDAY」はサービスを終了いたしました。 長い間、ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブのレイアウトやUIデザインの参考になるPinterestのボードのまとめ
1ランク上のサイト作りの参考になる、海外のWebデザインギャラリー
29000個以上もの膨大な数のアイコンが揃ったサイト「Free Icons Web」 | つーる亭