やるやんwindow.matchmedia - FICC Workbook
window.matchmediaとは簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。 ただ、IE9以下では使えません！スマホはバッチリ！(Android3以下…？知らない子ですね…。) 使い方とりあえず var widthMatch = window.matchMedia("(min-height: 500px)").matches; console.log(widthMatch); これで、高さの最小値が500pxあるかどうかがブール値で出てきます。 そして、主な使い方として // ウィンドウサイズでの処理 if (window.matchMedia("screen and (m
レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました
デバイスの画面サイズは色々あります レスポンシブWebデザインをする時に「スマートフォン」「タブレット」「PC」と大きく分けて3種類になります。 だからと言って、レスポンシブWebデザインの対応が3種類という訳ではありません。 今みなさんが使っているスマートフォンやタブレットは全部同じじゃないですよね。 iPhone、Android、iPad、iPad miniなどなど。 探してたら、「こんなにあったっけか・・・？」と思うくらいでした。 CMでJCOMさんも10万人にタブレット型テレビらしきものが当たるキャンペーン的な（曖昧ですみません）ものも行っている様ですし、これからもっともっと増えるのかもしれませんね。 という事で、現段階でよく使われているデバイスのサイズをまとめてみました。
【第72回】iPhone用の文字サイズ自動調整を解除する
さて、実は前回で、iPhone用トップページのデザインは出来上がっています。 しかし、ここでちょっと注意事項があります。 こちらの図をご覧下さい。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞ ＜横表示＞ 縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。 これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。 iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。 非常に便利な機能ですね。 でも今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。 そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。 ▼▼▼ 変更後 ▼▼▼ ＜縦表示＞ ＜横表示＞ ★iPhone用の
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Flexbox | web.dev
Flexbox Stay organized with collections Save and categorize content based on your preferences. The CSS Podcast - 010: Flexbox A design pattern that can be tricky in responsive design is a sidebar that sits inline with some content. Where there is viewport space, this pattern works great, but where space is condensed, that rigid layout can become problematic. The Flexible Box Layout Model (flexbox)
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
MdN Design｜総合情報サイト
viewportを使えば、Webサイトの横幅をスマートフォン向けに最適化できる。基本的な書式は【1-1】のとおりだ。viewportにはさまざまなプロパティが用意されているので、コンテンツの内容に合わせた適切な値を指定しよう 【1-2】。 【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない 【1-2】viewportのプロパティ一覧 viewportのプロパティの中でも特に重要なのがwidthの指定だ。iPhoneのデフォルト値は980pxに設定されているため、何 も指定しないとコンテンツが小さく表示されてしまう【2-1】。 値には数値も指定できるが、「devicewidth」で指定するのが一般的である【2-2】【2-3】。 【2-1】viewportのwidth指定なしの状態。コンテンツが縮小され、文字が小さくて読めない 【2-2】width=dev
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
スマホアプリのような横から出てくるサイドメニューを実装できるjQueryプラグイン
【Sidr】Facebookアプリのようなメニュ... / 【jPanelMenu】横から出てくるサイドメニ... / 【Snap.js】フリック動作で出し入れが可能な...他...全4件
Sidr
SidrThe best jQuery plugin for creating side menus and the easiest way for doing your menu responsive You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get startedLike any other plugin, you must inc
スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 イクリプススペシャルサイトのケース | blog – NOBORU HIRABAYASHI
昨日立て続けにスマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させるサイトを見たので、それらをチェックしてみた。 以前の記事はこちら：スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 今回チェックするサイトはイクリプス SPECIAL WEBSITEのSP版：http://www.eclipse-avn.jp/sp/ 基本的には以前の記事に記載の方法と近いのですが、ビミョーに違っていてその理由がすいませんわかりません。 デモはこちら：http://noboruhirabayashi.com/test/content_fit1/ 手順1 UserAgentでiPhone、iPod、iPad、Androidの判定。 function userAgentCheck(){ var ua=navigator.userAgent;
スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 | blog – NOBORU HIRABAYASHI
かっちり横幅を固定（レイアウト固定）かつ、ブラウザ横幅いっぱいに表示したい時の方法。 で、この件に限るわけではないですが、Androidは機種によってもちょっとしたJSとかでも挙動が違ったりするので完璧は無理だと思う。 どうしてもやらねばならないならバグった機種毎にuserAgentひろって条件分岐してやってくしかない。 このブラウザサイズにあわせてコンテンツを拡大縮小させる方法も、Android2、3、4.1までとiOSでチェックしているけど、機種によってはダメな場合もあるかもしれないのであしからず。 まずviewportの設定は以下の通り。 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> ポートレイトの時320pxでデザインしてiOS基準でコーディングしていくとして
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
Free PSD Resources - Freebiesbug
A big collection of 858 premium-quality PSD design files, including templates, icons, UI kits, mockups, and more. Carefully curated, this selection of free PSDs is as an invaluable asset for designers seeking inspiration. Outdoor scene of a fancy building with a big banner hanging on it. The banner is obviously a mockup, so you can change what’s on it.
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
ポケット詳細 jQuery Mobile辞典 サンプルサイト
ポケット詳細 jQuery Mobile辞典 サンプルサイト 1章jQuery Mobileについて 1-3 jQuery Mobileクイックスタート(全サンプル) 1-5 jQuery Mobileにテキストを省略させずに表示する 1-5 jQuery Mobileの定義済みクラス(オリジナルボタンアイコンの作成) 2章ページ構築 2-1 単一のHTMLでサイト構築する 2-2 複数のHTMLでサイト構築する 3章リンク 3-1 ページリンクを作成する 3-2 Ajaxを用いないリンク(1)—Ajaxを使用しないと明示する方法 3-3 Ajaxを用いないリンク(2)—外部サイトだと明示する方法 3-4 Ajaxを用いないリンク(3)—外部ドメインへのリンクを記述する 3-5 Ajaxを用いないリンク(4)—target指定をする 3-6 ブラウザの「戻る」リンクを作る 3-7 遷移しな
【初めてのビットコイン】コインチェックでの買い方をわかりやすく
本ページはプロモーションが含まれています。 仮想通貨取引所「コインチェック」で口座開設してビットコインを買ってみた手順をレビューしてみました。 暗号資産に関心はあるものの 「口座開設難しいんじゃね？」 「ビットコイン高いんじゃね？」 など一歩踏み出せないあなたは参考にしていただければ幸いです。 口座開設は無料、ビットコインも500円とか1,000円とかお小遣いの範囲で買えますから、お試しで買ってみて仮想通貨の世界を体験してみるのも悪くないかもわかりませんよ。 なお、パソコンでの口座開設手順を書いていますがスマホでもやり方は同じです。今はスマホのかんたん本人確認を利用した方が早く口座が開設できますよ。 ビットコインとは 少しビットコインについておさらいしておくと ビットコイン（BTC）は暗号資産（仮想通貨）の一種 2022年冬現在全世界で最も時価総額が高い暗号資産（仮想通貨） 暗号資産（仮想
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
