もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
1万円台！8インチWindowsタブレット(CHUWI Hi8)＆キーボード(F.G.S キーボードケース)をレビューしてみる - ゆとりずむ
こんにちは、らくからちゃです。 先日こちらの記事でRootportさんの『女騎士、経理になる。』という漫画をご紹介させて頂きました。 色んな人にシェアして頂いた結果、当サイトより 電子版 ・・・ 602冊 書籍版 ・・・ 159冊 お買い上げ頂けました！ 収益のほうはというと・・・、まあ小学生のお年玉くらいのもんなんですけどね（笑）。ただ、こちらの記事にも書かせて頂きましたが、 はてなブログでAmazonアソシエイトがどれだけ稼げたか分析してみる 自分が『これはいい！』と思ったものが沢山の人に手にとって貰えるのは達成感がありますねヽ(=´▽`=)ﾉ さてさて、ブログでおすすめ商品を色々書いて、Amazonさんからギフト券をちょっぴり沢山頂けましたので、1月あたりから色々と『自分へのご褒美』的なものを買わせて頂いております。その中で、１万円台で購入することができた８インチのWindowsタブ
モバイルサイトをPCで見るためのツールやFirefoxアドオン : LINE Corporation ディレクターブログ
こんにちは。ライブドアでモバイルディレクターをしている河野です。 モバイルディレクターをしていますと、モバイルのサイトをPCで見たいという要望が少なからずあります。それは、PC からの方が実機で見るよりレスポンスが早く、また電波状況に左右されずに閲覧できたり、リンク先の URL の情報やヘッダ情報、画面キャプチャーなど実機からでは得られない情報を取得することができるからです。 そこで今回はモバイルサイトを PC で閲覧する方法についてまとめながら、開発を進めるのに便利なツールや Firefox のアドオンを紹介できればいいなと思います。 Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つ
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
モバイルサイトのデザイン : LINE Corporation ディレクターブログ
こんにちは、『livedoor 歌詞』や『livedoor グリーティング』を担当している吉沢です。 今回は、モバイルサイトのデザインの決め方、デザイナーとの仕事の進め方をご紹介したいと思います。 モバイルサイトのデザインというと、画面が小さいし容量制限も厳しいし、デザインのやりようがないのでは？ と思うかもしれません。 確かに 1 年程前まではそんな状況だったのですが、世間的に 3G 端末が普及し、容量制限の緩和、通信速度の向上とモバイルサイトを華やかに魅せる環境が整いつつあります。 そこで『ケータイ livedoor』も昨年後半あたりから少しずつ 3G 端末をメインとした開発を行っており、今ではモバイルサイトの“こったデザイン”が必須となっています。 これまで、サイト開発時にディレクターがデザイナーにお仕事を依頼するタイミングは、サイトのリリース直前という場合がほとんどでした。最後の仕
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事