タグ

WEB制作とスマホに関するnewsmasuda-tのブックマーク (5)

  • 【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう

    スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか? スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ

    【CSS】見出しが変に改行しない!スマホのfont-size指定にvminを使ってみよう
  • スマホ対応!パララックスサイトの作り方 | SONICMOOV LAB

    皆様おひさしゅうございます。 ラーメン女子のうさこでございます。 最近は大好きなラーメンべるのを控えています。 えらいことになってるんですよ・・・ 親に骨皮筋子と言われた私でも・・・! 以前、会社の飲み会でデザイナーのユウコさんに、25 歳を超えるといくらべても太らなかった体質も変化するから気をつけた方がいいよ!・・・というありがたい言葉をいただきました・・・ まさに今、身に染みて体感中でございます(涙 4月9日をもって Windows XP がサポート終了となりましたね! これで IE6 との長き戦いにも終止符が打てそうですっ!やっとですよ、やっと・・・! IE6 消え失せろ~♪ ついでに言うと、IE8 も消えちゃっていいんだぜ☆ さて・・・今回で3回目の投稿となりますっ 今回は、スマホに対応したパララックスサイトの作り方についてご紹介! Sublime Text ネタで通してきた

    スマホ対応!パララックスサイトの作り方 | SONICMOOV LAB
  • スマートフォンサイトのコーディング 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 の処理が走り、自動で文字サイズを最適化(拡大)する機能があります。 読

    スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
  • omotan.com

    This domain may be for sale!

    omotan.com
  • こんなUI/UXはイヤだ

    業務中にメモっていた、イヤなUI/UXのメモを公開。(スマホ中心) こう見てみると、多少はチェックリスト的に使えるかも知れないです。各事例の画像が貼られていないのはご勘弁を。 思ってたのと違う。。△ 入力フォームなのにその場で入力できない 見た目は入力フォームなのに、タップするとモーダルで入力画面が立ち上がってしまうと違和感がある。そのままその画面で入力できるようにするか、どうしても別画面を立ち上げる必要があれば、入力フォームをボタンに変えた方が自然なUIになる。 △ 押せそうなのに押せない 立体感があったり囲まれていたりしてボタンのように見えるUIなのに、実際には押すことができないとストレス。遷移先の画面が存在しないのであれば、ボタンに見えるような紛らわしいデザインにしない。 △戻るボタンなのに1つ前に戻らない アプリ内ブラウザで外部サイトを立ち上げる際、画面の上部(ナビゲーションバー)

  • 1