テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題

スタイルシートで確りフォントサイズの指定をしているのに iPhoneに限って其の折角の指定が無効になっている場合が多々あります。 確認の為にPCブラウザのエミュレータで見て見ても問題ないのにiPhoneでは想定外のフォントサイズで表示されている事例としては Portraitモード、即ち縦位置で見ている画面をLandscapeモード、即ち横位置にすると 文字サイズがは大きくなる現象は割と知られているのではないでしょうか。 此れはスマホに於けるユーザービリティを考慮して スマホのブラウザでのみ有効な -webkit-text-size-adjust なる属性が用意され効いているのに起因するのも周知されている処だと思います。

しかし例えば自前のブログでは屡々振り仮名を持ちいるのですが 此の時利用する ruby タグで囲った部分には此の属性は効かないようで タグ内に記入した文字は横位置でも縦位置と同じフォントサイズであれば 横位置では思わぬ不揃いの文章表示となってしまうのでした。 此れなどは以下のリンク、サイト ヒビヅレの2011年5月24日の記事などに代表される情報を参照すれば bodyタグ、若しくはフォントサイズを指定する箇所の大枠部分に -webkit-text-size-adjust: 100%; を効かせてやれば解決するのでした。

"テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題" の続きを読む

CSSのみでスマホのときだけ電話番号をタップ発信させる方法

商売上のホームページではヘッダーやフッター、及び必要コンテンツ内に 電話番号を表示するのは閲覧者に連絡を取って貰いたいならば欠かせません。 表示させるだけならばHTML上で記述すれば済む話です。 しかし最近ではスマートフォンが充分普及し個人個人が所有するようになり ホームページの閲覧も多くがスマートフォンからのものを配慮する必要があるようになりました。

スマートフォンは携帯電話ですから出来得るならば 電話番号の表示をタップしたと同時に通話発信して欲しいものであるのは言わずもがな、 此の事情を配慮して電話番号とおぼしきテキスト表示には スマートフォンに依っては自動でタップ即発信機能を持たせた機種も多くあります。

ところでデザイン上の配慮などで画像で電話番号を表示させたい要請も多くあります。 此の時画像をタップして通話発信させるには例えば以下のようなリンクを張る必要があります。

<a href="tel:0123456789"> <img src="/images/0123456789.png" alt="0123456789" /> </a>

此のHTMLコードはもちろん スマホでもPC画面上でも適用されますので 機能して欲しくないPCに依る閲覧時にもクリックで電話発信しようとして 警告ダイアログを閲覧者に拝ませる羽目になります。 此の事態は出来るならば避けたいものです。

"CSSのみでスマホのときだけ電話番号をタップ発信させる方法" の続きを読む

Windows10機へのCompassの導入とDEPRECATION WARNING問題

3D用にと誂えたWindows10機も仕事用に漸く侵食されつつあり 此れでMicrosoft社のオフィスでも導入しよう日が来ようものならば世の儚さを思わされ なかなか悲しいものがありますが此れもまた世の習いなれば致し方なし、 さてこそホームページの作成、編集に最早 Compass は欠かせないツールとなっておりますれば オフィスの導入に先立っての導入となりましたが CompassのインストールとCSS変換時に文字が消える問題の解決 の如く多少トラブルのも毎度のこと、 観念して対応作業を実践した顛末が本記事と相なります。

CSSフレームワーク Compass には其のインストールに先立って拠って立つ処の Sass 、そして Sass を導入するための RubyGem 、 そして又 RubyGem を動かすための言語 Ruby の導入が必須となりますが Compass 利用者には既知のこととて改めて述べる迄もないでしょうが老婆心ながら下に軽く手順を記し置きます。

"Windows10機へのCompassの導入とDEPRECATION WARNING問題" の続きを読む

画像の下への回り込みを解除する方法-Twitter編

Twitterのつぶやきをブログ内に表示させることが 本ブログ2011年4月6日の記事 jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法 で上手く行くことが分かり、 またユーザー情報を抽出して纏め表示させることも5月1日の記事 目的要素の直前に挿入するjQeryメソッドbefore() に書いたようにどうやら上手く行きました。

其処でプロフィール表示部分に纏めた情報は以下

  1. ユーザーアイコンのURL情報:user.profile_image_url
  2. ユーザー名:user.name
  3. ユーザープロフィール:user.description
の三つでしたが、今回これに更に Twitter API が与えてくれている
  1. ユーザーID:user.screen_name
  2. ユーザーのサイトURL情報:user.url
の二つを追加することにしました。 両者共にURL情報を有していますから該当ページへリンクを貼ることも出来ます。

処でこの時、表示情報が増えれば表示面積も必然的に増え、 溢れた文字情報はプロフィールアイコンの下へ回り込みます。 回り込みがデザイン的に旨くない影響を及ぼす場合を考慮した、 その対策として…

"画像の下への回り込みを解除する方法-Twitter編" の続きを読む

ブログ上の汚しのテクニック

phpspot開発日誌 の2008年8月13日の記事 CSSでテキストにグランジ効果を与えるサンプル で紹介されているテクニックがWEB制作の際、 実に有用であると思えれば、当ブログにてもご紹介は、 Janko Jovanovic氏の手になるブログ記事 Add grunge effect to text using simple CSS のタイトルにも謳われる如く、シンプルな手法の CSS にて 汚し を施し、実に所謂 クール なフォントを表現できるテクニックです。 上記紹介記事にはチュートリアルも用意されていますので、 ご自分のサイト及びブログに採用されたい方は、 ご一読いただければと思います。

Tsukamotch on Grunge!


---2008年8月20日追記---
閲覧ブラウザがIE7の際にはベースライン問題が発生し、 IE6ではPNGファイルに対応していない為閲覧自体が不可能となります。

CSSによるルビ(振り仮名)表示方法

檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日に ルビ(ふりがな)タグの話 をエントリしているのはルビタグにはIEでは想定通りの表示も Firefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、
<ruby>
  <rb>夥</rb>
  <rp>(</rp><rt>おびただ</rt><rp>)</rp>
</ruby>
とW3Cの"Ruby Annotation"勧告では不必要に思われる <rp> タグを使用するのも其の為である旨、記述されているのですが、 それにしても説明の為の例文
いい話はなしだ。
は秀逸な登用ですので、一度ご覧いただければと思います。

此れを受け小飼弾氏が自ブログで利用している記事が2006年5月31日 css - ルビもCSSで で問題解決を提示しておられ、 其の解決法として採用されているのが北村曉氏のサイトで 曉に死す のブログ 徒書 でCSSのinline-table属性を用いたルビ表示の考案がなされている2001年10月11日付の記事 Mozillaでルビ表示3 での手法です。 "CSSによるルビ(振り仮名)表示方法" の続きを読む

自動アイコン選択表示CSS

当ブログでは 2008年5月29日の パズルの一枚の画像に依るブログ上自動生成 でも参照させていただいた ホームページを作る人のネタ帳 の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年5月1日の記事 ハイパーリンクの拡張子に応じてCSSでアイコン追加のチュートリアル での紹介は Ask The CSS Guy の2006年12月20日と紹介記事にも言及される少し許り以前なるも、 其の有用な内容から長い期間ランクインするようなロングヒット歌謡が如き記事、 Showing Hyperlink Cues with CSS で、当記事中にて紹介されているのが、 リンクの拡張子で判断してアイコン画像を付加する CSS は、当設定を一度施してしまえば EXCELファイルならばEXCELアイコン、 WORDファイルならばWORDアイコン という具合にリンク先が当該ファイルであるならば意識せずともアイコンが付加され、 シンプル乍、実効性が高い為の高評価で、繰り返しネット上の話柄に昇るのでしょう。 "自動アイコン選択表示CSS" の続きを読む

ピュアCSSアコーディオン

ホームページのメニュー抔で使用される大概のアコーディオン型機能は フラッシュ若しくは javascript を用いて実現されていますが、 PHPスポット開発の2008年4月11日の記事 CSSだけでアコーディオン風UIを実現するサンプル で紹介されていたのが CSSnewbie の2008年4月9日の記事 The CSS-Only Accordion Effect で公開されている CSS のみを用いた当該機能の実現にて、 開発者に依るサンプルページ にては実際に動作を確認でき、 当ブログにも此のサンプルのソースと、公開ページのチュートリアルに習い、 実装させていただきましたサンプルは、 直接アクセスでない方は当アーティクルタイトルをクリックするか、 [続きを読む]をクリックした上でご覧下さい。 "ピュアCSSアコーディオン" の続きを読む

アイコン画像ロールオーバー

オンマウス時の画像ロールオーバーと云えばDHTMLで実装するもので javascriptの記述は必須と云う固定観念に塗り固められていましたから、 数年前ブログの隆盛と共にテーブルデザインからCSSへとデザイン上の主流が移り変わり始めた際、 同機能をCSSのみで実装出来ると知った時には軽いショックを受けたものでしたが、 今となっては極々普通の方法として知られ、 当初何処から当情報を得たかは最早判然しない様な現状も申し訳ない乍、 今その方法を見ても実にシンプルで使い勝手が良く、 多少古いブラウザでは表示にチラつき抔問題のあろうとも、 IEも7が主流となり始めては、随分と業務上でも気軽に使用出来るようになったように思います。 上記では縦長のGIF画像を作成し、オンマウス時に表示座標をずらしてロールオーバーを実現しています。
リンク先は昨日4月30日のアーティクル ウゴウゴルーガ風ブックマークレット からウゴウゴルーガ繋がりです。
上記パーツを囲い込む彩色範囲の角丸には当ブログ2008年3月13日の 角丸 記事でご紹介のjQuery系の機能を利用しています。

overflowプロパティ

投稿した画像が使用テンプレートのアーティクル部分の設定より大きいと スクロールバーが右、若しくは下に表示されるのは時には困るものだと思います。 デザイン抔はブログシステム提供側に豊富にテンプレートが用意されていれば、 屡変えたくなるのが人情ですけれど、 その時使用のテンプレートのアーティクル幅に専用に合わせる設定では 折角提供される様々なデザインの切り替えの度に設定を変更しなければならず、 出来ればその様な行為は控えたいものです。

其処で登場いただくのが当アーティクル標題のプロパティoverflowです。 懸念のIMGタグをネストしたDIVタグに此のプロパティを設定します。 一昨日は4月12日の記事 SaaSでRuby on rails開発Heroku.com の画像を利用してみるとこうなります。
Heroku.com Limited Beta
画像のプロパティを右クリックしてご覧いただければ、 横幅は520px程ある画像であり、 一目で右側部分が非表示になっているのがお分かりかと思います。
具体的なHTMLソースは下記のようになります。
<div style="display:block; width:300px; overflow:hidden;">
<img src="HerokuLimitedBeta.gif" width="520" height="199" alt="Heroku.com Limited Beta" style="display:block;" />
</div>
この様な設定にしておけば画像データは其の儘に、 以降デザインを取り換えた時に違和感あれば当該記事のdivタグのwidth属性を少し弄れば良いだけになります。 勿論ひとつひとつ設定し直すのは手ですから、 専用のクラス名を設定し、テンプレートに一行書き加え一網打尽と云うのが CSSの旨味である処だと思います。

CSSのoverflowプロパティについては サイト「 World Wide Web Guide 」の W3G>CSS>表示と配置>overflow に詳しい説明が掲載されています。

また、比較の為に追記部分にoverflowプロパティを設定しない画像を設置してみます。 画像は3月24日の記事 INTERNET ARCHIVE で使用したものです。
直ぐ下の[続きを読む]をクリックしてご比較ください。 "overflowプロパティ" の続きを読む