PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
WordPressをスマホ対応にするプラグインをいろいろ試してみた | Web活メモ帳
wordpressでスマートフォン対応する際に使えそうなプラグインをいろいろ試してみました。 先に結果から伝えると、個人サイトではwptouchが一番オススメです。 インストールするだけでお手軽にスマホ対応できるのが高ポイントでした。 企業サイトで1からテーマを作成する場合はmobilepressが今の所一番使えそうです。 これからスマホ対応される方の参考になれば幸いです。 それでは、各種プラグインを入れてみた様子をご紹介。 iWPhone iPhone向けに最適化してくれるプラグイン。 ↑ダウンロードするとテーマファイルも同梱されており、ダウンロードしたファイルをそれぞれテーマフォルダとプラグインフォルダに保存して、プラグインを有効化するだけでつかえるようになります。 テーマの切り替えにはユーザーエージェントで判断しているのですが、 Androidの場合には、テーマを切り替えないようにな
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ | Web担当者Forum
1.携帯向けサイトは横幅240px、スマートフォンサイトは320px 2.スマートフォンにあるといい viewport 3.携帯サイトをスマートフォン対応させる ■携帯向けサイトは横幅240px、スマートフォンサイトは320px 携帯電話（ガラケー、フィーチャーフォン）の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。 一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。 携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる／レイアウトが崩れる』などの問題が発生します。 ■スマートフォンにあるといい viewport スマートフォンでウェブサイトを閲覧すると、特にPC向けに作られたページの場合は、小さい画面に収まるようにして小さく表示され
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ 2011.03.07 2019.06.21 WEBデザイン 1.携帯向けサイトは横幅240px、スマートフォンサイトは320px 2.スマートフォンにあるといい viewport 3.携帯サイトをスマートフォン対応させる ■携帯向けサイトは横幅240px、スマートフォンサイトは320px 携帯電話（ガラケー、フィーチャーフォン）の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。 一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。 携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる／レイアウトが崩れる』などの問題が発生します。
WEBサイトのデザインについて質問です。 CSSなどを切り替える事でガラケー用とスマートフォンの表示を変えることを考えております。…
WEBサイトのデザインについて質問です。 CSSなどを切り替える事でガラケー用とスマートフォンの表示を変えることを考えております。 とはいってもガラケーとスマートフォンでは表現能力が段違いすぎますし、切り替えるといってもベースとなるHTMLは１つなので文字の装飾程度しか思いつきません。 ベースとして同じHTML(もしくはPHPなど)を使用しているが、CSSの切り替えだけでデザイン自体をガラケー用とスマートフォン用とで変えている(もしくは雰囲気がスマートフォンっぽいものを演出出来ているなど）所などあれば教えてください。 また、そういったガラケー・スマートフォン両用のサイトを作成するにあたって具体例などあれば教えてください。 ※検索等でスマートフォンサイトの作り方などの紹介は不要です。
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホサイトでケータイも対応する－画像問題解決編－