【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）｜クロノドライブ
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
Webデザイナーなら忘れちゃいけない一つ。ディスプレイ（モニター）の発色について。 | Maka-veli.com
Webデザイナーなら忘れちゃいけない一つ。ディスプレイ（モニター）の発色について。 On 2011年7月1日, In Creative, Design, by maka-veli.com 画像のカラーマネジメント設定とか、紙質による色の違いとか、セーフモードとかの話しではなく、単純に「モニターの発色」についてのお話。 けっこう舐められません。僕もしょっちゅうやらかします。 このブログでも、モニター変えて見ると全然印象が変わるので時々焦ります。。 今もきっとどこかに変な部分があるでしょう・・・ モニターの違いによる問題 モニターを変えると、 見えていないものが見えちゃうことが多々あります。 特にPhotoShop等で画像を編集していると起きやすいです。 ベクターなどは領域がはっきりしているのでイラレなどでデザインしている場合は少ないかもしれません。 PhotoShop等で画像を
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
SEOやSMMのためにブログを作ったらまずやることリスト - ソーシャルメディアマーケティング(SMM).jp
ソーシャルメディアマーケティング.jpではソーシャルメディアを活用したマーケティング手法を解説していきます。SNS、ブログ、ソーシャルブックマークなど周辺ニュースの紹介もしています。 プラグインやテーマの追加、変更はおいておいて、ブログを立ち上げたらまずやることリストをこのエントリにまとめていこうと思います。見つけたもの、思い出したものを順次追加していきます。 これもやっといたほうがいいよ！というものがあればコメントもらえるとうれしいです。 Wordpress と Movable Typeのプラグインについてはまた後ほどまとめようと思います。 12月6日1:00 追記 戦略やコンテンツについて書かれていないというコメントをはてブでもらいました。ブログを始める前に考えておくべき戦略やコンテンツ作成の方針についても後ほどエントリを書こうと思います。 12月8日11:35 追記 F.Ko-Jiの
HTMLを綺麗に保つ12の原則 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。 [原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTY
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla
Google Analyticsのちょっとしたテクニック : LINE Corporation ディレクターブログ
こちらデイリー４コマ編集部です。 今回はGoogle Analyticsを利用したクリックカウントの取り方におけるちょっとしたコツについてお話ししたいと思います。 Google Analyticsはページ内に集計用のコードを貼り付けるだけで、業務用としても耐えられる、様々なアクセス解析できる優れもののツールではありますが、ただそれだけでは少々もったいないです。一つの機能としてクリックカウントを使ってみましょう。 例えば <a href="http://www.livedoor.com/">livedoor</a> というリンクがあったとします。このリンクが果たしてどれだけクリックされているかを知るために、以下のようにリンクに細工を施します。 <a href="http://www.livedoor.com/" onClick="javascript:urchinTracker('/live
Producing Web » Blog Archive » Web企画を立てる際にリストアップする34の要素
Webサービスの企画を行う際に、企画書を作られることがあるかと思います。個人で作るサービスであれば作らないこともあるでしょうが、企業として取り組む場合には必要なものです。 via Changes to site permalink page on Flickr - Photo Sharing! なぜ必要かと言えば、プロジェクトメンバーと意識を共有するためです。これがずれていると、プロジェクトの進行方向が徐々にずれていってしまいます。そうならないよう、初志を書き出しておくことで、定期的に見直し、改訂してプロジェクトを進めていくのが重要です。 そこで今回は私がWebの企画書（自分用ではなく、他社への提案用）を作る際に注意している項目を書き出してみました。実際は、これらを必要に応じて削除/追加したりします。 □ コンセプト 最も大事ですね。端的な言葉でサービスの概要を言い表す必要があります。 □
画像写真素材 足成
「写真素材 足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。個人、商用を問わず全て無料でお使い頂け、その上、煩わしいクレジットやリンクの表記、ユーザー登録は一切不要。Web、紙、動画他、あらゆる媒体で写真素材としてのご利用が可能です。更新も365日毎日行っております！
web制作に役立つサイトまとめ - 肉汁が溢れ出ています
引用元：web制作板 545 名前：Name_Not_Found[sage]投稿日：03/10/20 20:13 ID:??? 初心者向け ■はじめてのWEBドキュメント作り http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ■初めてのホームページ講座 http://www.hajimeteno.ne.jp/index.html ■30分間HTML入門 http://kanzaki.com/docs/html/lesson1.html ■ISMT HOME 〜 メモ帳で作る超初心者のＨＰ作成講座 〜 http://ismt.cside.com/ ■趣味のWebデザイン http://deztec.jp/design/index.html HTML/WWW解説 ■好ましいHTML文書を書くための方法と考え方 http://www.asahi-net.
画像よりもムービーの方が説明しやすい、デスクトップ操作を動画キャプチャーで記録できる「カムタジア スタジオ」 - GIGAZINE
ソフトの使い方や操作方法、あるいは相手に何か説明をするとき、文字をただ並べるよりも画像を加えた方が理解しやすいのは自明の理です。そして、画像よりも映像のほうがより理解しやすいというのもまた当然の話ですが、実際にムービーを作成しようと思うと一気にハードルが上がってしまいます。 そこで使えるのがこの「カムタジア スタジオ（Camtasia Studio）」、動画マニュアルや動画コンテンツなどを非常に簡単かつ強力に作成できます。 単純にデスクトップでの動きを記録するだけであれば他にもいろいろとあるのですが、このCamtasia Studioは単純に録画するだけでなく、その強力な編集機能の豊富さと簡単さがウリ。通常のムービーとは一線を画するクオリティの動画を少ない手間と時間で作成できます。 中でも特に強力なのが「SmartFocus」という機能。全自動で見せたい部分にズームインしてくれるため、デス
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
商用・非商用で使用できるフリーの写真素材サイト集 | コリス
商用・非商用で使用できるフリーの写真素材サイトのリンク集です。 ライセンス（二次加工禁止・著作権表記など）は各画像ごとに異なるため、特に商用利用の際は確認が必要です。 「商用利用可」「非商用のみ可」の記載は、各サイトの主要なライセンスとなっています。
HowToWriteAnEffectiveDesignDocument - 設計文書のうまい書き方
HowToWriteAnEffectiveDesignDocument - 設計文書のうまい書き方 目次 この文書について 設計文書のうまい書き方 なぜ設計文書を書くのか 良い設計とは何か 同僚の開発者に向けて書く 第 1 節に書くこと: プロジェクト/サブシステムの目的を示す 第 2 節に書くこと: 設計に使う高レベルなエンティティを定義する 第 3 節に書くこと: 個々のエンティティに関する低レベルの設計を書く 使い方 設定 モデル 相互作用 第 4 節に書くこと: 利点, 前提, リスク/懸念事項 マネージャ向けに書くこと 最後に 設計文書のうまい書き方 この文書について "How to Write an Effective Design Document" の日本語訳です. http://blog.slickedit.com/?p=43 推敲歓迎: 誤訳, タイポ, 訳語の不統一,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://e0166nt.com/blog-entry-364.html
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳