タグ

ブックマーク / kudakurage.hatenadiary.com (4)

  • スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル(font size自動調整をきるなど) - くらげだらけ

    前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode(縦向き)では問題なく閲覧していたのですが、Landscape mode(横向き)にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは

    スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル(font size自動調整をきるなど) - くらげだらけ
    moromoro
    moromoro 2013/02/10
    画像のにじみ無くすの良いな
  • Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ

    Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがあります。編集者(作り手側)の場合は適切な箇所で改行タグを入れたり、閲覧者が適切に読めるように文章を改変したりできるのですが、ユーザーにそこまで考慮させるのは難しいことです。 またWebサービスには他にもトラブルの原因となることがあります。Webは様々な環境で閲覧・使用することが可能だということです。PCや携帯、スマートフォン、タブレットなどのデバイスの差異ももちろんありますが、閲覧するソフトウェア(Webブラウザなど)によっても表示のされ方が異なってしまいます。 (できる範囲ではありますが)すべての環境でトラブルなく適切に表示するにはどうしたら良いか?

    Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ
    moromoro
    moromoro 2012/09/02
    word-wrap:break-wordよさげ。今度実証しよ。半角スペースはなぜか位置調整で使う人が多くて色々無理だでコンテンツチェックで対応するしかないわなー。
  • Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ

    去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似たようなFontが作成され公開されていますが、つい最近知ったsymbolsetというサイトで紹介しているsymbol fontには感心しました。 それまでのSymbol Icon Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない(コンピュータに理解できない)文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列(Twitterなど)を記し、CS

    Ligature Icon フォントセットの自作方法とWebFont - くらげだらけ
  • CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ

    前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
  • 1