[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
3キャリア対応のCSS変換モジュールHTML::MobileJpCSS - komoriyaのはてなダイアリー
DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
Linuxディストリビューション「Zorin OS 18.1」リリース ─ LTS版の改良と互換性強化 4月17日 1:28
外部CSSの読み込み有無で微妙なレイアウトの違いを出す 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
久しぶりの更新です。毎日暑い日が続いていますね、、 さて、通常、携帯向けホームページを3キャリア（ドコモ、au、ソフトバンク）対応して作成するとき、業界的というか作成慣れしている人は「ドコモ+au」と「ソフトバンク」の2キャリア対応で作成するというお話しを、以前の記事でちょろっとしました。 これは絵文字の互換性の問題が影響しており、絵文字の互換性があるドコモとau、互換性のないボーダフォンを分けて作らなければならないということでした。 ただ、ドコモとauに絵文字の互換性があるといっても、1つのHTMLで2キャリアに対応させると、それ以外の部分、特にデザイン周りの違いがどうしても出てきてしまいます。 どうやら、ドコモ、auともにブラウザエンジンにHTMLの誤った解釈があり、例えばauではブロックレベル要素（Pタグやhrタグなど）に解釈の間違いがあるようです。 この不具合は、IEなどと同じよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queries
