実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
ビセラの口コミや効果まとめ【失敗しない】口コミからわかる3つのポイント
【インスタ・ツイッター】ビセラの口コミまとめ Instagram（インスタグラム） おはようございます🌞 空が綺麗な朝ですね✨ ・ 私の最近の腸活事情☺︎ 腸が綺麗だとお肌にはもちろん！健康にも良いので、最近話題の短鎖脂肪酸サプリのビセラを飲み始めました✨ ・ 腸内フローラをサポートしてくれて、飲み始めてから最近調子がいいのを実感しています♪ ・ 1日1カプセル💊でいいので、面倒だったり沢山飲むのが苦手な方にもおすすめです☺︎ ・ さて、今日も1日頑張りましょう☺︎ ・ #ビセラ#bisera#腸内フローラ#短鎖脂肪酸 #ダイエット#美容#健康#アラフォー#アラフォー美容#美容好きな人と繋がりたい#腸#腸活#美肌#yorkie#腸活 >> インスタでチェックする ヤセ菌と最近話題の短鎖脂肪酸サプリ 腸内フローラをサポートし 特殊製法のカプセルが 「生」菌を直接腸まで届けてくれる！ 年々
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
スマフォにも対応、簡単にEコマースサイトが構築できるWordPressのプラグイン -Jigoshop
Jigoshop のデモ ショッピングカートに商品を入れチェックアウトをしようとすると、おススメ商品がでるのもいいですね。 Jigoshopの主な特徴 商品を販売するEコマースサイトが簡単に構築できます。 商品はグルーピングが可能です。 割引クーポン マネージメントにも対応。 関連した商品の自動表示。 商品のレビュー。 税金は場所によって設定可。 通貨オプション。 出荷オプション。 高性能なプロダクトナビゲーション。 カスタマーアカウント。 在庫の追跡。 詳細なオーダーマネージメント。 輸入・輸出商品 カスタム ウィジェット クレジットカード・PayPalなど支払いは多数に対応。 Jigoshopのローカライズは現在、英語版以外にフランス語版が配布されています。 ローカライズは他のWordPressのプラグインと同じく、「.po file」「.mo file」で行えます。詳しくは下記ページ
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
jQuery Mobileを触りながら覚えよう！ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！ そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。 スマートフォンサイトやWebアプリを作成する際に利用します。 非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ ということで、j
総務省｜情報バリアフリー環境の整備｜ICTアクセシビリティの推進
法人番号2000012020001 〒100-8926 東京都千代田区霞が関2－1－2 中央合同庁舎第2号館 電話03-5253-5111（代表）【所在地図】
みんなの公共サイト運用モデル
「みんなの公共サイト運用モデル」は、国及び地方公共団体等の公的機関のホームページ等（公式ホームページ、団体が提供する関連サイト、ウェブシステム等）が、高齢者や障害者を含む誰もが利用しやすいものとなるよう、「みんなの公共サイト運用モデルの改定に関する研究会」（平成22年9月から平成23年1月開催）による改定方針及び改定案の検討、地方公共団体による改定案の検証・評価を経て、平成23年3月に改定されたものです。ウェブアクセシビリティに関する日本工業規格であるJIS X8341-3:2010に基づき、実施すべき取組み項目と手順等を示しています。 「みんなの公共サイト運用モデル改定版（２０１０年度）」を活用したウェブアクセシビリティの維持・向上の取組を実践するため、以下の各種手引き等について、ファイルを活用することができます。 「みんなの公共サイト運用モデル」の構成 １.「ウェブアクセシビリティ対
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の可能性を体験できる、すごいサイトのまとめ
ソーシャルブックマーク＆投稿ボタンの設置方法 ｜ SEOモード
