スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。 仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。 実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ 属性セレクタ 構造疑似クラス ターゲット疑似クラス UI要素状態疑似クラス 否定擬似クラス 属性セレクタ 属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。 【例】リンクの属性がhttpを含む（外部リンク）場
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
How to Factory Reset iPhone 15 Pro Max - Skyward Design
Ever find yourself needing to wipe your iPhone 15 Pro Max clean? Maybe you’re planning to sell it, following an iPhone guide at i5apps.com, or perhaps it’s just time for a fresh start. Whatever your reason, performing a factory reset is a straightforward process. By the end of this quick overview, you’ll know exactly how to restore your iPhone 15 Pro Max to its original factory settings. After you
iScroll 4 – Matteo Spinelli's Cubiq.org
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live Demo GitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webk
iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元：iScroll ライセンス:MIT-License iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。 利用方法 まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。 <script src="iscroll.js"></script> HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。 <body> <header id="header">ヘッダー部分</header> <div id="wrapper"> <div id="scroller"> コンテンツ部分 </div>
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
はじめてのスマートフォンサイト制作「基礎知識や開発環境の準備編」
今までスマホサイトを制作したことが無いので、サイト設計から基礎知識、デザインの知識など一から全て勉強していきますので、その点についてまとめて行きます。 用語整理 まず初めてに新しい用語などについて整理していきます。用語については自信ある方はこの項目は飛ばして下さい。 「スマホ」と「スマフォ」どっちが一般的なのか 今まで「スマホ」だと思っていたのですが、最近「スマフォ」と呼称する人を見かけるようになりました。確かに「スマートフォン」を略すなら「スマフォ」の方が正しそうな気がしますが、Google で調べた所検索ボリュームの数が「スマホ」の方が圧倒的に多いので、私は略す場合は「スマホ」で通していくことにします。 フィーチャーフォン (ガラパゴスケータイ) 日本独自の進化を遂げた携帯をガラパゴス携帯、略してガラケーと呼びます。個人的にはガラケーという言葉を使っていたのですが、ガラケーではなく「フ
スマートフォンにおけるHTML5対応状況 (2) input typeについて - 30分で学ぶ「mixiアプリ for touch」（スマートフォン版mixiアプリ）の作り方
今回はマニアックにinputタグについて掘り下げようかと。 html5からinputタグのtype属性が大量に追加されています。 今までは type="checkbox" type="radio" type="image" type="text" type="password" なんかを使っていたと思いますが、html5では type="tel" type="url" type="number" など、内容に合わせた専用のtype属性が用意されています。 これで id="tel" とか id="url" なんて指定がいりません。 ただ、当然ブラウザごとに対応状況が違います。 せっかくのスマートフォンブログなので、iPhoneとXperiaでの対応状況を調べてみました。 iPhone（iOS） Android（Xperia） 対応 可否 入力モード 対応 可否 入力モード type="che
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
一度に申し込める数は？
キャッシングによる融資は基本的に1度に何社までという制限はなく、何社申込みを行っても個別に審査が行われる仕組みになっています。 しかし、複数社からの融資を受けている多重債務の状態では、信用性の面から銀行系企業のキャッシングで審査が通りにくくなったり、総量規制による借入限度額上限に引っかかるなどの弊害が生じる可能性があります。 銀行系のローンやキャッシングは、通常の消費者金融より審査基準が高めの傾向を持っている理由から、個人信用情報に事故履歴があったり複数の企業から融資を受けている場合は、非常に不利な条件となってしまいます。 また、総量規制による借入限度額制限は個人年収によって決定される要素である為、複数社へ申し込みを行って全ての審査に通ったとしても、年収に応じた金額分しか借りられない決まりになっています。 消費者金融では他社の借り入れ状況を調査した上で、総量規制による上限額に引っかからない
入力必須項目、地獄の40件でも成果でた！スマホサイトEFOで大事な3点
New Account on HTC Smartphone / digitpedia 「モバイル端末での入力項目は少ないほど、突破率は上がる」 これ、モバイルサイトをディレクションする時の定石です。 モバイルサイトのサービスディレクターを１年以上携わる中で、フォームについては入力項目を減らしたり、簡便化することで、突破率を120％程度アップさせることができました。 ゆえに、自社でスマホサイトを立ち上げるときも同様に入力項目の数を減らしたいと考えていたら・・・なんと。PCサイトとの仕様の兼ね合いにより、入力項目は減らすことはできませんでした。がびーん。 どうにかできるのは、UIだけ。PCと同程度の突破率を担保するため、webディレクターとしてEFO(エントリーフォーム最適化)悪戦苦闘するはめになりました。 自社のECは、商材の都合上個人情報の入力項目が最大40箇所あって大変。しかも漢字入力も
UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み。
HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート！ HTMLファイ部ほんだです。 カヤックの新規開発事業部「ブッコミジャパン」が、 HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました！ jsdo.it（弊社運営のHTML5コード共有サイト）からHTML5ゲームを簡単に投稿でき、 他のクリエイターによって投稿されたゲームを無料で遊べます！ また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる JavaScriptライブラリ「jsdoitController.js」もリリースしました。 今回は「jsdoitController.js」で使えるようになる 「jsdo.it WebSocket Controller」（以下：jsdo.it コントローラー）の 仕組みについて
Available on the Available on the Available on the X X X X X アプリケーションのマーケティングと アイデンティティ デベロッパ向けガイドライン 概要 iOSデベロッパプログラムのメンバーは、ウェブサイ
Available on the Available on the Available on the X X X X X アプリケーションのマーケティングと アイデンティティ デベロッパ向けガイドライン 概要 iOSデベロッパプログラムのメンバーは、ウェブサイト、広告、その他のマーケティングコミュニケーション においてApp Storeで配信をしているアプリケーションを宣伝する際に、以下のガイドラインに従う 必要があります。 バッジおよびiPad、iPhone、iPod touchの画像の使用条件 本ガイドラインに掲載されている「Available on the App Store」バッジとiPad、iPhone、iPod touch の画像は、App Marketing Artwork License Agreementに同意したiOSデベロッパプログラムの メンバーのみが使用を許可さ
livedoor Techブログ : デザイナーに聞かれがちなAndroid UIの仕様
開発部の井上（@inonb）です。12月に位置情報サービス・ロケタッチのAndroidアプリをリリースしました。ぜひお試しください。 さて、今回はAndroidアプリのUIまわりについて書いてみたいと思います。 iPhoneアプリに比べて、AndroidアプリのUI仕様は、わりとWebに近いところがあります。Webの仕事の経験があるデザイナーさんは入りやすいところもあるのですが、マルチディスプレイ対応など面倒なところもあります。 デザイナーさんに聞かれた質問について簡単にまとめてみたいと思います。 1. iPhoneアプリのデザインって流用できますか？ 流用はできるだけ避けたいです。 たとえばTwitterやFacebookのアプリなど、両プラットフォームに多くのユーザーを持つアプリを見ても、iPhoneとAndroidではデザインが変わっているのが分かると思います。 Androidのデザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.livedoor.jp/sumahoreview/
smph.info
adakoda.com
Mobile Web Design | Best Mobile Websites | Mobile Website Gallery
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介