続：レスポンシブのサイトでスマホの時だけtelリンクを有効にする ｜ Tips Note by TAM
前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。 前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。 ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。 ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。 電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンク
レスポンシブなWebページで、スマートフォンを判別して電話番号リンクを有効に｜cleverdog
レスポンシブなWebページでは、スマートフォンからの閲覧時には電話番号をタップで発信出来る様にしたいので、jQueryで対応しました。 <a href="tel:00-0000-0000">電話をかける</a> 上記のようなtelリンクを使うとスマホから発信出来るようになるので、ユーザーエージェントを判別して、スマホからのアクセスの時のみhtmlを書き換える処理をします。 電話番号の表示を画像でデザインすることも多いので、画像の場合はaltの内容を番号に指定します。 【JS】 $(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.tel-link').each(function(){ if($(this).is('img')) {
JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
![JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e43158a9b02ff4438d55128491865b833395bd4d/height=288;version=1;width=512/https%3A%2F%2Froundup-inc.co.jp%2Fwp-content%2Fuploads%2F2019%2F09%2F9106fa4d7b0fdf2534aa97dea102e186.png)
レスポンシブなWordpressテーマ制作のためのスターターテーマまとめ
レスポンシブなWordpressテーマ制作のためのスターターテーマまとめ Wordpressはテーマが豊富に流通していることで有名ですが、完全に自分のテイストに合ったものや個性的なものを探すとなるとやはり自作するしかなかったりします。 こんな場合、全くの白紙状態から作るとなると大変なので、何かシンプルな造りのテーマをベースにしてそれに肉付けしていくというのが一つの方法と言えます。 そんなことを踏まえてオリジナルのテーマ制作時のスターターに適したテーマや、比較的カスタマイズしやすそうななるべくブランクに近い状態のテーマなどをフリーでレスポンシブなものに限定してピックアップしてみました。 （各種フレームワーク単体ではなく、あくまでテーマとして完成されているものに限定しています） Reverie Download | Demo | Multi Preview | Screenshot Const
「レスポンシブWebデザイン」の是非に関する考察 - outtakes
こもりまさあきさんによる『レスポンシブ・ウェブデザイン』（MdN）という素晴らしい書籍も出てきて、2012年後半は、さらにレスポンシブWebデザインへの取り組みが増えそうです。 スマホを購入した理由のひとつとして「PCサイトを見たいから（PCメールをやりとりしたいから）」というものが上位に来ることがあるといった統計（リンク）がよく引き合いにだされますが、これって、その昔、「印刷用のCSSの実装」とデジャブします。つまり、ユーザーの声「えっと…. そのまま印刷したいんだけど」。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると考えています。 ひとつは、ワンソースでのマルチデバイス対応。デバイスごとにことなる対応を行うまでの手間はかけられない、っていうときに使う方
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ・ウェブデザイン基礎
https://design-spice.com/2012/06/13/responsive-web-design-image/