レスポンシブ対策！電話番号リンク（tel:）をスマホのみ有効にする３つの方法
2024年04月06日非レスポンシブのサイトをレスポンシブ化いたしました。2024年04月05日テーマファイルが編集できない不具合を解消いたしました。2024年04月04日WordPress、テーマ、プラグイン、のバージョンアップを担当いたしました。2024年04月03日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年04月02日お問い合わせフォームを再構築いたしました。2024年04月01日不具合で表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月31日サーバー移管に共に表示されなくなったサイトを表示される状態まで復旧いたしました。2024年03月30日WordPressの操作方法をサポートいたしました。2024年03月29日サイドバーに人気記事を表示させる仕組みを導入いたしました。2024年03月28日テキスト等の簡易な修正を
レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない
レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない
★レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について
スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
こんにちは。和田です。 ここ数日暑いですが皆様いかがお過ごしですか？ 私共は先日、アシアルのHP（ブログも）をリニューアルしました！ 皆さま見てていただけましたでしょうか？ まだの方は是非是非ご覧になってください。 http://www.asial.co.jp さて今回のアシアルHPはレスポンシブデザインを採用しています。 そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。 アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、 皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ（幅）で切り分けていますでしょうか？ 結構悩むところなのではないかと思います。 そこで、各デバイスのサイズの
Bootstrapで「触れるワイヤーフレーム」を作成！効率的にサイト制作を進めよう！ | WebNAUT by Beeworks
※この記事は2013年10月11日に執筆された記事です。現在は仕様が異なる可能性があります。 こんばんは、ハロウィンパーティのコスチュームを購入したものの、着ていく勇気がまだ出せていないマークアップSです。 本サイトで何度か取り上げているTwitter Bootsrtap。 この便利なフレームワークを使って実際にサイト制作を行いましたので、その制作過程などをご紹介致します。 また、このようなCSSフレームワークを使う事を前提とした新しいWEB制作のワークフローについても触れて行きたいと思います。 今回扱った案件 弊社ゲーム開発部からリリース中の「デッキメイク勇者」のサイト。 スマートフォン対応もされていなく、ちょうどリニューアルを検討中だったこちらのサイトをTwitter Bootsrtapをベースにしたレスポンシブ対応のサイトにリニューアル致しました。 制作フロー デッキメイク勇者以外に
レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた | A40
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。（ブレイクポイントを480px、768px、980pxとした場合の例です） 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット／スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト：980px以上用（PC用）の記述 */ @media screen and (max-width: 979px
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SlickNav
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP