スマホサイトの矢印付きメニューをCSSのみで実装する。 | バシャログ。
こんにちは もうすぐ待ちにまったGWですね。今年は、多い人で11連休とかあるんじゃないでしょうか。そんなことしたら…もう、社会復帰できる自信がないmackyです。 さて、 そんな今日は、スマホサイトのメニューの定番デザインである、 矢印付きメニューをcssのみで実装してみようと思います。 CSSのみで実装する定番の矢印つきメニュー こんな感じです。 まずはHTMLを用意します。 HTML <ul> <li><a href="#">シーブレイン七不思議</a></li> <li><a href="#">シーブレインあるある</a></li> <li><a href="#">シーブレイン3つの掟</a></li> <li><a href="#">minamiが行く横浜うまいもの日記</a></li> </ul> css * { margin: 0; padding: 0; } a { disp
media queryのCSS一覧
レスポンシブデザインのサイトやスマホ機種の解像度によってCSSの指定を振り分けられるmedia queryですが、クライアントによっては 「Apple製品だけきっちり見えれば良い」とか「ウチの社長のAndroidの○○だからそれでキレイに見せてよ」などなど・・・ 単純なスクリーンのサイズの指定だけでは済ませられないケースもあったりして・・・ なので主要機種用のmedia query指定のライブラリー一覧作ります。 お好みの指定をコピって下さい。 主要ディスプレイサイズ別 ディスプレイサイズ320px @media screen and (max-width: 320px) { /*スタイル記述*/ } ディスプレイサイズ640px @media screen and (max-width: 640px) { /*スタイル記述*/ } ディスプレイサイズ800px @media screen
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
iPhone向けwebアプリを作ってみる-タッチイベント、ジェスチャーイベントに関するまとめ-
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら？」と思い立ったのですが、iPhoneのネイティブアプリを作るには、”Objective-C”と、”cocoa Touch”というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり（iPhoneエミュレータ上で動かす分には問題ないのですが…）と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識＋αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集1 | {M} 383blog
自分がスマートフォン向けのWebアプリを初めて作成したときにいろいろと調べたことを、メモ的に書いておこうと思う。スマートフォン向けのWebアプリ制作におけるJavaScriptやHTMLの基本的な小ワザをまとめた。これからスマートフォン向けのWebアプリを制作する人たちの参考になればうれしい。 アドレスバーを隠す [iOS, Android] ページを表示したときにブラウザ上部のアドレスバーを隠すことができる。スマートフォンのブラウザは表示領域が少ないため、アドレスバーを隠すことで画面を多少広く使える。 setTimeout(window.scrollTo(0, 1), 100); フルスクリーン表示かどうか調べる [iOS] Safariから「ホーム画面に追加」ボタンをタップすると、ホーム画面にそのページへのショートカットアイコンを追加することができる。追加したショートカットアイコンから
6つのモバイルOS向けにアプリを作るための基礎知識
6つのモバイルOS向けにアプリを作るための基礎知識：HTML5で可能になった6OS対応時代のスマート開発（1）（1/2 ページ） 本連載では「第三極」モバイルOSの登場で新時代を迎えたアプリ開発市場においてAndroid、iOS、Windows ストア（Windows 8）、Windows Phone、Firefox OS、Tizenの6OS全方位対応をするための方法論や課題について解説していきます。初回はモバイルOSの現状とWebプラットフォームの概要、Webベースのモバイルアプリ開発の基礎知識について。 百花繚乱のモバイルOS新時代で全方位型アプリを開発するということ Firefox OSやTizenなど「第三極」と呼ばれる新しいモバイルOSを搭載したデバイスが発表され、世界中で注目を集めています（参考：スマホ開発者が知るべきTizenやFirefox OSの特徴～第35回 HTML5
風俗サイト用CMS CASTPRO4プレミア
よくあるご質問 インストール・導入編 テンプレート編 プラグイン編 ライセンスその他 管理画面編 オンラインマニュアル 準備編 アップデート手順(プレミアテーマv1.0 → v2.0 ) アップデート手順(CASTPRO4.2* → 4.3) インストール手順(CASTPRO4.3プレミア) 運用編 テーマ設定 ページ設定 ウィジェット設定 メニュー設定 テーマカスタマイズ キャスト管理 待ちヒメ ランキング管理 出勤スケジュールの登録 キャスト新規登録・編集 基本設定 表示設定 プロフィール設定 画像設定 ユーザー設定 アカウント設定 プラグイン カスタマイズ編 テンプレート編 <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″ /> <title></title> <meta name=”robots” conte
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | SHINGO IRIE
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。
AppAnnieのCEOが語る、世界のアプリ市場トレンド-ネイティブアプリxグローバルセミナー | アプリマーケティング研究所
5/27に東京（新橋）で開催された、D2CRとAppAnnieさん主催の「ネイティブアプリxグローバルセミナー」に参加してきました。 本記事では世界でもっともアプリ市場のデータを保有しているといっても過言ではない「AppAnnie」のCEO、Bertrand Schimittさんの、講演内容をまとめています。 AppAnnieについて 「AppAnnie」はマーケットデータのリーディングカンパニー、アプリのマーケットに特化して行っている。 社員は90名、オフィスはロンドン、サンフランシスコ、北京、日本。日本はインフィニティパートナーズに出資してもらっている。トップ90%以上のパブリッシャーが使用していて、120,000以上のビジネスユーザーがいる。 「APPANIEindex」という、アプリとパブリッシャーのランキングをまとめたレポートや、IDCと一緒にゲームレポートを四半期に一回だしてい
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
AIR Androidアプリ作成:Flash, Flex Hero
モバイルAndroidアプリケーションを作成するための基礎以下は[2-20-2:デバイスの向きとGravity2D]で取り上げたGravity2Dでドロイド君を”物理オブジェクト化”し、デバイスのマイクと画面タッチに反応させる実験です。 ドロイド君はGravity2Dの世界で質量を持っているので、アプリケーションがスタートするとデバイスの下方向に落ちていきます。途中岩があるので、これに引っかかりますが、やがて落ちていきます。ドロイド君を指でタッチすると少しだけ上に移動します。また大声を出すとそれをデバイスのマイクが感知して、それによりドロイド君が回転します。 ドロイド君は次のようなムービークリップです。各部位がうまく重なっていると、Gravity2Dがゆるくつなげてくれます。 [メインのタイムラインのフレーム１] stop(); import Box2D.Gravity2D; import
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
公海555000kk线路检测—首页（欢迎您）
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
スマフォ向けWebアプリの制作初心者が覚えておくと便利な小ワザ集2 | {M} 383blog
めしおのアフィリエイト教材レビューブログ