スマートフォン表示で、はみ出したtableをスクロールさせるCSS
このようにtableを横スクロールさせるには、HTMLとCSSを編集すればOKです。 1、HTMLの編集 まずは、tableを「divタグ」で囲みます。ここでは、そのdivタグに”scroll”というclass名を付けました。 <div class="scroll"> <table border="1" cellspacing="0" cellpadding="5"> <tbody> <tr> <th>商品名</th> <td colspan="5">インターネット回線</td> </tr> <tr> <th>初期費用</th> <td colspan="5">事務手数料3000円 ＋ 標準工事費0円</td> </tr> <tr> <th>プラン</th> <td>30Mコース</td> <td>50Mコース</td> <td>100Mコース</td> <td>200Mコース</td>
スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット
iOS6のSafariから対応の、HTML5のFileReaderをつかって スマートフォンのカメラを起動し、撮影した画像を <input type=”file”>へセットしたり <img>としてプレビューしたりするサンプルを作ってみました。 サンプル 今回は、jQueryなしで組んでみました。 <div class="console"> <div class="button"></div> <input id="addImage" type="file" accept="image/*"> </div> <div Id="preview"></div> window.onload = function(){ var $addImage = document.getElementById("addImage"); // input type="file" の要素 var $
レスポンシブWebデザイン対応のサイトを1から作ってみた手順と感想 | RCBlog
「とりあえずJavaScriptとレスポンシブWebデザインは使えるようになった方がいい」なと思い、レスポンシブWebデザインに対応した架空のサイトを1から制作してみました。その時の作業メモ＋作りながら思ったことを、記事として残しておきたいと思います。 作ったサイト 札幌すずき整形外科（実在しない病院です） とある病院（整形外科）から『出先でも見られるようにスマートフォンに対応したサイトを制作して欲しい』という依頼を受けたという設定で作ることにしました。 構成を考える 患者さんが出先で検索した時＝病院にかかりたい時だと想定して、「診療時間・曜日」「住所」が一番に知りたい場所だと考え、それらの情報を極力上の方にまとめる事にしました。 PCで見た時もそれらの情報は優先して見せたいと考え、それぞれの端末で見た時のワイヤーフレームを作ります。レイアウトはスマートフォン・PCの2パターンで考えていき
レスポンシブ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
スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブWebデザインの作り方（簡単設定方法）