1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
iPhone用CSSをメディアクエリで分岐する問題点
iPhone用CSSをメディアクエリで分岐する問題点 これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。 追記(2010/07/09) 本エントリーはiPhone 4の発売前に書いたものです。 iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。 参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。 <link media="only screen and (max-device
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
CSSにデータを埋め込む方法を考えてみた(CSS2KB) - latest log
ここ最近 DOM + CSS + JavaScript な Widget を作ってます。タブとかスライダーとかです。 Wiget の見栄えを切り替える方法(テーマ)も実装してますが、CSS とテーマ情報を格納するファイルが、別々のファイル(CSS + js)に分かれてしまうので、どうにかしてこれらを一元管理できないもんかと考えてました。 今日は、list-style-image: や background-image: の URL(QueryString) に定数を埋め込む方法を思いついたので、その説明です。 list-style-image: url(1dot.gif?key=val) の key=val が取り出せるか試してみる <!doctype html><html><head><title></title> <style> .widget { list-style-image:
WingMemo: サイドバーのサムネイルを全部正方形にする （MT4用）
ちょっとした覚え書き。MT4のデフォルトテンプレのサイドバーにはアップした画像のサムネイルリストが付いてます。これ、可愛くて好きなんですが、１つだけ不満が。 このように縦長の画像がある場合、きれいに真四角なリストになってくれないんですね�。これはデフォルトのタグがサムネイルのサイズを縦幅で統一しているため、縦より横が短い場合、左右が余っちゃうからだと思うんです。そこで画像の縦横サイズを比較して、短い方でサイズを統一して、画像が縦長でも横長でも常に正方形のサムネイルになるようにしてみました。 １．モジュールの変更・修正 モジュールの「サイドバー（3カラム）」「サイドバー（2カラム）」の中にある<MTIf name="main_index"><MTIfNonZero tag="AssetCount">～</MTIfNonZero></MTIf>に以下のような赤字の部分を追加。 <MTIf na
iPhone用CSS [iPhone生活]
iPhone用のスタイルシートを別途用意する場合 下記のようにall.cssというスクリーン用のスタイルシートを、 pc.cssとiphone.cssに分けて下記のように設定することで、iPhone用のhtmlを作らずにiPhone用のレイアウトを用意することが出来ます。 media="screen and (min-device-width: 481px)"> media="only screen and (max-device-width: 480px)"> if IEの部分は、IEがmedia="screen and "を読み込めないため、IE用に再度外部CSSを宣言しています。 既存のスタイルシート内にiPhone用のスタイルを追加する 一方、外部スタイルシートを分けずに、またはhtml内にスタイルを宣言している場合にそれを生かしてiPhone用のスタイルを宣言することが出来ます。
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
サイト制作のためのテンプレートをごっそり自動生成してくれる『Project deply*』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
CMSで便利なCSSを使った画像をリサイズする方法 | ユージック
CMSで便利なCSSを使った画像をリサイズする方法 2008年2月22日 僕は仕事ではCMSを使用した案件がメインになっているのですが、CMSを使用した際に頭を悩ませる問題として、クライアントが縦横比率の違う画像を使用することによってレイアウト崩れを起こすことがあります。 その問題をスクリプトを使用せずにCSSだけで解決できそうな方法を見つけたのでご紹介しようと思います。 概要はCSSのOverflowを応用して画像を綺麗にリサイズ表示する事ができるようです。CSSで画像を固定サイズにトリミング表示できるという事ですね。トリミングしてリサイズされた画像はマウスオーバーで全体表示がすることができます。 Create Resizing Thumbnails Using Overflow Property MTのようなCMSは基本的にWEB制作の知識のない相手に更新・管理・運用をしてもらう事が目
clearfixの決定版を作る －IE編－
今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか、あらためておさえておこう。本来なら、ひとつでも多くの種類、バージョンのブラウザでfloatをクリアできる（もしくは同じ効果を得られる）ことをもって、決定版とすべきなのだろうが、ここでは少し違う方針をとりたいと思う。簡単にいえば、CSS自体の正しさとか美しさを優先したいということだ。逆に、そのためには古いバージョンのブラウザなどは犠牲になってもしょうがない、と考えている。ここでいう「決定版」を定義してみよう。 1. 文法的に正しいこと このこととイコールとするには異論があるかもしれないが、「W3Cのvalidatorを通ること」と言い換えることもできる。少なくとも、通らないより通るほうがいい。 2. 内容的に理にかなっていること、意味不明でないこと いわゆるCSS
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
网信彩票-安全购彩
网信彩票（www.ma-creators.com）是【购彩中心-以小博大】最知名的游戏平台网站，购彩中心极力为您提供注册、开户、登录、app下载、计划、走势图、开奖直播、网上代理等服务！
CSSのem指定のサイズが一発でわかっちゃう「EmChart」:phpspot開発日誌
EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
IDEA * IDEA
css 管理 - Google 検索
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
uuQuery.js と uuCanvas.js の version 1.0 をリリースしました。 - latest log
http://www.designwalker.com/2009/03/form-design-2.html
ユンサンの／／YungSang's: 透過PNG と IE と IE7 まとめ