「ほっ」と。キャンペーン

タグ:css ( 29 ) タグの人気記事

スマートフォンとフォントサイズ[解決編]

 苦労しまくった、この件。


変だ変だと思っていたけど、やっぱりタダの勉強不足だったようで。
[PR]

4の倍数でなんかするiPhone6~フォントサイズほんと困った。

iPhone対応のフォントサイズには、購入前に対応サイトをつくろうとして、
→http://aso2.exblog.jp/17850802/
イロイロ悩まされたのですが(あの節に表示チェックをお引き受けいただいた方々には感謝です)。


実機買ったし、もう楽勝!(More)
[PR]

スマートフォンとフォント、ほんとか??

2015/06/07追記:解決編⇒http://aso2.exblog.jp/21317789/




 某企画サイトにて。ひとつのサイトで、PCでもスマートフォンでも共用できないか、という話題で、軽く盛り上がる。

 ある方のスマホでは、「すっぴん」(CSS指定なし)のサイトが「文字が小さくて読めない」(指で広げないと読めない、ということらしい)という。そりゃ面倒ですわな、ということで。共用できるフォントサイズ探しを始めたんだが。

http://www.grandlicense.com/archives/290
>CSSで特に指定してない場合はデフォルトは16px

http://myakura.github.io/n/density.html
>iPhone 4
>(ピクセル密度 (dpi))326

 1インチは、25.4mm。25.4÷326×16=1.24
 1文字1.24mm? ほんとかいな。これじゃ、漢字は絶対読めません罠。誰だよそんな毛唐みたいな国際感覚のない設定したヤツ。

 で。ものすごーく長いこと忘れ果てていたんだが。font-sizeってmmでも設定できるンですな?  (使ったことなかったww)
 いろいろテストした結果、個人的趣味で3.6mmを採用、スクリプトをお借りしてつけておいて「お気に召さない方は、変えてね」というヒナガタを提案することにした。

 まあ、自己満足的に提案をしても、実際に使ってくださる方は少なそうな予感がするんだけどもな。

追記:
 こちら↓も参考になりました。
「スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript」
[PR]

とうとうIEをバージョンアップ、SuperPreview導入

きっかけは擬似フレーム

Year of the Catさんの「スタイルシートで擬似フレーム」を、XHTMLで、というミッション^^がありまして。

More
[PR]

HTML5^^;

W3C嫌いの阿狐に習得できるとは思えないわけだが。

いちおうメモっとこう。orz
http://blogs.yahoo.co.jp/nozakitakehide/folder/16792.html
http://journal.mycom.co.jp/articles/2007/04/12/html5/
[PR]

《eXcite》って、韓国語 中国語 表示できるんだ^^;

『多国語で書けるブログはどこ?ブログ124サービス【文字コード】全チェック』で、《eXcite》が、UTF-8に挙げられていた。韓国語も中国語も使ったことないから、あまり考えたことがなかった^^; というわけで、ちょっと実地テスト。

エキサイトブログは、ハングルと日本語の両方を表示することができます。
에키사이트브로그는, 한글과 일본어의 양쪽 모두를 표시할 수 있습니다.

eXcite blog systemは、中国語と日本語の両方を表示することができます。
eXcite blog system能表示中文和日语的双方。

訳文が違ったら、文句はinfoseekに(笑)。エキサイトブログを申しこまれる場合は、エキサイトブログのトップページに^^。

⇒表示が確認できたので、旧記事「《eXcite》の長所について」に書き加え。この記事自体も、若干推敲。



[5/1追記]“沖縄”スキン、中文NGみたいです。

(きっかけは、《FC2》ユーザーフォーラム『韓国語表示の仕方がわかりません><是非教えてください!! 』デシタ。頑張れば、本文コメント欄ともに表示が可能になるようだが、metaコードが関係しているみたいだし、そうするとテンプレートによって対応が異なるし、かなりヤヤコシそうな予感)

  □ ■ □ ■

P.S.「ことのは」松永サマ。読者の一人です。お元気でしょうか? 
[PR]

「画像の使用を(略)CSS大会」ギャラリーがオープン

a0024690_1631487.gif「画像の使用を(略)CSS大会」ギャラリーがオープンになりましたよ。……阿檀分が圧倒的に地味シンプルなのは、狙ったンだからねっ!
[PR]

『画像の使用を(略)CSS大会』に参加

a0024690_1631487.gif ここ数日大騒ぎ(×,×,×)していた『画像の使用を(略)CSS大会』に参加メールをお出ししました(ちなみに、しゅがさんちで知りました^^)

 「お題」の表示がどうなるかは、追って公式サイトに載ってから見ていただくとして。とりあえず、ココからは、毎度お馴染み、『龍と詩人』バージョンへリンク

【自己紹介】(大会サイトからいらした方向け)
ハンドル名:阿檀(あだん)で参加しました。
メインサイト(更新止まってますがw):『Adan Kadan

【参加した部門】
画像を一切使用しない部門

【がんばった点や力を入れた点】
 文月夕氏の労作『読みやすさアンケート 1005件の結果を集計』……ではなく(滝汗)、有効投票総数837件時点平均値を算出し、結果として出てきた「眩しくない淡灰色の背景色」を生かしたデザインを、と、考えたものです。
(余白に白を入れることによって、画面が暗い印象を弱める、という「知恵」も、文月氏ブログの影響です^^)
 expressionは『HarukiyaArchives』を参考にさせていただきました。(IEで閲覧窓サイズを小さくするときは、[更新](f5)を)

【CC】
このCSSに関しては、クリエイティブ・コモンズ 表示 3.0 一般のライセンスに了解して参加しています。
[PR]

『画像の使用を(略)CSS大会』お題出たっ

画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会お題が出ました

blockquoteがない。ということに真っ先に気がいくワタシは、つまり普段、引用のしすぎ(汗)
[PR]

文月氏アンケートの平均値を計算してみた

 平均顔が美人という話題がかつてあったが。
 それだったらば、文月氏アンケート([読みやすさアンケート]800件集計)の平均値をとったら、そこそこ「美人」なCSSができるんではないか、と考えてw、平均値を計算してみた。
 文字サイズ:14.6px
 余白:16.0%(1024モニターと仮定すると、文字表示幅:696px)
 行間:169.8%

で。「文字色」「背景」は、薄地に濃い文字、濃地に薄文字が混じっているので無視することにし。

「文字色×背景色」(0.5%超えているのはたまたますべて薄地に濃い文字)の平均をとってみたところ、
 バック:RGB(241,241,241)
 文字:RGB(31,31,31)
となった。

これを16進変換したら
 バック:#f1f1f1
 文字:#1f1f1f
になった!!! むろんまったくの偶然だし、次回の集計で平均値を計算したら、違う結果になるのだろうけど。文字の並びが気に入った(笑)ので、アレに出るとしたらコレをベースにいってみます。

 とりあえず、上記の数字をさくっと丸めた感じでCSSをこしらえた。わたし的には毎度おなじみ、宮澤賢治『龍と詩人』を入力して、ジオシティーズに上げてみた。余白に純白(#fff)を入れてみたのは、文月氏パクリ影響。
(ジオシティーズ、広告が邪魔。後でたぶん、アップ場所を変えます)

……とかいう遊びをしていたら、ekken氏ブクマ経由で、こんな記事にも出会いました。
黄色地に緑文字のWebページの可読性が高いというお話
ウェブのテキストがもっとも読みやすい文字色と背景色は?

[追記]
この記事をトラバしちゃった後で1005件の集計結果が出ているのに気づきました。まったく、目玉がどこについてるやら>自分(滝汗)
 (1)文字サイズ (2)余白行間 (3)配色
今回の集計は、グラフも入った労作です。サイトを読みやすくしたい方にはぜひ御覧いただきたい、、、、のですが、、、、もっと見てほすぃのは、各ブログサービスで公式テンプレ発注する「中の人」だっww
[PR]